View on GitHub

TAU

TAU (Tizen Advanced UI) project for supporting web app development based on web-based ui widget components library

How to use Controller

Controller controls navigation in applications. It is a part of TAU but can work standalone without the rest of the TAU. If it is combine with TAU then it cooperates with router module from TAU.

Creating pages on the fly

Example below shows how to create dynamic page. It is important to use deferred.resolve(page); this operation runs router on element which is applied to resolve and builds page/popup on element.

<script type="text/javascript">
	var controller = tau.Controller.getInstance();
	controller.addRoute("page-dynamic", function (deferred) {
		var page = document.createElement("div");
		page.dataset.role = "page";
		page.textContent = "Hello world!";
		deferred.resolve(page);
	});
</script>

The code above has the following flow:

Using params in routes

Example below shows how to pass params to next page.

<script type="text/javascript">
	var controller = tau.Controller.getInstance();
	controller.addRoute("page-params/:param1/:param2", function (deferred, param1, param2) {
		deferred.resolve(
			'<div data-role="page">' +
				'<div>param1: <strong>' + param1 + '</strong></div>' +
				'<div>param2: <strong>' + param2 + '</strong></div>' +
			'</div>'
		);
	});
</script>

The code above has the following flow:

Loading pages from string

Example of simple page created from string.

<script type="text/javascript">
	var controller = tau.Controller.getInstance();
	controller.addRoute("page-string", function (deferred) {
		deferred.resolve('<div data-role="page">Hello world!</a>');
	});
</script>

The code above has the following flow:

Loading pages from templates

Open a page defined in template.

<script type="text/javascript">
	var controller = tau.Controller.getInstance();
	controller.addRoute("page-template", function (deferred) {
		tau.template.render("templates/page-template.html", {}, function (status, data) {
			if (status.success) {
				deferred.resolve(data);
			} else {
				deferred.reject();
			}
		});
	});
</script>

The code above has the following flow:

TAU has template mechanism that supports multiple view based on which device you are working. You can define multiple views of one template:

Files in MyApplication/src/templates:

Open a page defined in template.

<script type="text/javascript">
	var controller = tau.Controller.getInstance();
	controller.addRoute("page-template", function (deferred) {
		tau.template.render("templates/page-template.html", {}, function (status, data) {
			if (status.success) {
				deferred.resolve(data);
			} else {
				deferred.reject();
			}
		});
	});
</script>

At first it tries to find template with the name of current profile in suffix. If it can’t find specific view it will choose “page-template.html”.