Mobilenations - die smartphone-community

Dies ist ein Blog Beitrag. Um den originalen Beitrag zu lesen, klicke hier »

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: show

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

Code: Select all

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: show

Page 1


Welcome
This is the default start page


Footer (optionale)





Page 2


Welcome on Page 2
This is the default page


Footer (optionale)

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

Spoiler: show

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;
}});

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!

Kleine Ergänzung im JS teil muss es $.mobile.activePagr.attr("id"); heissen, habe es grade behoben.