Detect an input out event

This demo shows how to detect if there’s a click on the view but released outside the view. This construction is mainly used for buttons, a button click is only registered when a user touches the button and the touch up event is also triggered inside the same button. Click on the view and then drag out of the view and release.

Import the ui.View class.

import ui.View as View;

Class: Application

Create an application.

exports = Class(GC.Application, function () {

	this.initUI = function () {
		this.style.backgroundColor = "#FFFFFF";
		var clickBox = new ClickBox({
			superview: this.view,
			x: this.style.width / 4,
			y: this.style.height / 4,
			width: this.style.width / 2,
			height: this.style.height / 2,
			backgroundColor: "#008800"
		});

		this.view.on("InputSelect", bind(this, function () {

Restore the background of the view.

			clickBox.updateOpts({backgroundColor: "#FF0000"});
		}));
	};

	this.launchUI = function () {};
});

Class: clickBox

Create a view based on the view class which changes color when clicked.

var ClickBox = Class(View, function (supr) {
	this.init = function (opts) {
		supr(this, "init", [opts]);

		this.on("InputStart", function () {

Change the color when the view is clicked.

			this.style.backgroundColor = "#0000FF";
		});

		this.on("InputOut", function () {

Change the view when dragged outside the view.

			this.style.backgroundColor = "#00AA00";
		});
	};
});

The output should look like this screenshot: a book screenshot