WebApps of Tizen Tizen 2.1 migrate to 2.2

Recently, the Tizen SDK 2.2 available in a beta version. For the first time are supported with this SDK and the hardware buttons such as Back or Menu. It is recommended to use it instead of the previous software button.

But this turns out to be a bit more difficult at least in WebApps.

Der other Code

Spoiler

$(&quot;#page1 .ui-btn-back").bind(&quot;click", function() {
was currentApp = penalty.application.getCurrentApplication();
currentApp.exit();
return false;
});

[collapse]

is not emulated directly from the hardware buttons.

Therefore you have yourself a path of a craft but also the close “navigate back” made possible by the app. I have found a relative simple solution that makes this possible. It is important that each page (data-role=”page”) Id available through a unique.

Spoiler

<div data-role = "page" id = "page1">
	<div data-role = "header" data-add-back-btn = "false">
		<h1>Page 1</ H1>
	</div>
	<div data-role="content">
		<h2>Welcome</ H2>
		<p>This is the default start page</p>
	<div>
	<div data-role="footer">
		<h4>Footer (optionale)</ H4>
	</div>
</div>

<div data-role = "page" id = "page2">
	<div data-role = "header" data-add-back-btn = "false">
		<h1>Page 2</ H1>
	</div>
	<div data-role="content">
		<h2>Welcome on Page 2</ H2>
		<p>This is the default page</p>
	<div>
	<div data-role="footer">
		<h4>Footer (optionale)</ H4>
	</div>
</div>

[collapse]

The id will be used later to help with the function $.mobile.activePage out the currently visible page.

Spoiler

document.addEventListener('Tizenhwkey', function(is,it) {
was activePage = $.mobile.activePage().attr('id'); // read current page
switch(and.keyName)
{
	case 'back':
		switch(activePage)
		{
			case 'page1':
				penalty.application.getCurrentApplication().exit();
				break;
			default:
				parent.history.back();
				break;
		}
		break;
	case 'menu':
		switch(activePage)
		{
			case 'page2':
				console.log('you are on ' ,enactivePage);
				break;
			default:
				//TODO: Do something
				break;
		}
	break;
}});

[collapse]

The code emulated with the default navigate back, this he does always, if the active page is not known. If you want on a page something other than “Back” you have to set it up just a case for it. With the example above, the app is closed only when going on to page1 is located. Similarly it is with the menu button, the code is the same already with in the code.

This tutorial works only with the Tizen Web Framework!