WebApps von Tizen 2.1 zu Tizen 2.2 migrieren

Seit kurzem ist das Tizen SDK 2.2 in einer Beta-Version verfügbar. Erstmals werden mit diesem SDK auch die Hardware-Buttons wie Back oder Menu unterstützt. Es wird empfohlen diese anstatt den bisherigen Software-Button zu nutzen.

Dies gestaltet sich aber zu mindestens bei WebApps etwas schwieriger.

Der alte Code

Spoiler

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

[Einklappen]

wird nicht direkt von den Hardware-Tasten emuliert.

Daher muss man sich selbst einen Weg basteln der einem das schließen aber auch das „zurücknavigieren“ durch die App ermöglicht. Ich habe eine relative simple Lösung gefunden, die dies ermöglicht. Wichtig ist, dass jede Page (data-role=“page“) über eine eindeutige id verfügbar.

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>

[Einklappen]

Die id wird später benötigt um mit Hilfe der Funktion $.mobile.activePage die aktuell sichtbare Seite herauszufinden.

Spoiler

document.addEventListener('tizenhwkey', function(e) {
var activePage = $.mobile.activePage().attr('id'); // read current page
switch(e.keyName)
{
	case 'back':
		switch(activePage)
		{
			case 'page1':
				tizen.application.getCurrentApplication().exit();
				break;
			default:
				parent.history.back();
				break;
		}
		break;
	case 'menu':
		switch(activePage)
		{
			case 'page2':
				console.log('you are on '+activePage);
				break;
			default:
				//TODO: Do something
				break;
		}
	break;
}});

[Einklappen]

Der Code emuliert mit default das zurücknavigieren, dies macht er immer dann, sofern die activePage nicht bekannt ist. Möchte man auf einer Seite etwas anderes als „Zurück“ muss man nun nur ein case dafür einrichten. Mit obigen Beispiel wird also die App nur geschlossen, wenn man sich auf page1 befindet. Analog verhält es sich mit dem Menu-Button, der Code befindet sich gleich schon mit im Code.

Dieses Tutorial funktioniert nur zusammen mit dem Tizen Web Framework!