smart developer Ein Code für alle (Vorschau)

Schwerpunkt
HTML5 mit Jo und PhoneGap
ter und folgen Sie den Anweisungen, um
PhoneGap für Ihre jeweilige Plattform zu installieren.
(Es gibt für jede Plattform eine eigene
Seite mit Informationen für Neueinsteiger
[4]; nutzen Sie die Test-App, um sicherzustellen,
dass die Installationsumgebung
korrekt eingerichtet wurde.)
Um Jo zu installieren, müssen Sie nur die
nötigen Dateien an den passenden Ort kopieren.
Erstellen Sie im entsprechenden www-Verzeichnis
Ihres mobilen Betriebssystems einen
Ordner namens jo und kopieren Sie dann die
Datei jo.js aus dem Unterordner js, den Sie
in Jos Installationsverzeichnis finden, direkt
dort hinein. Kopieren Sie dann den gesamten
Ordner css ins Verzeichnis jo in Ihrem Projektverzeichnis.
Zu guter Letzt müssen Sie noch die Datei
index.html abändern, um das Jo-Framework
und die zugehörigen CSS-Dateien einzubinden.
Wenn Sie schon einmal am Editieren
sind, können Sie auch gleich eine Datei hinzufügen,
in der Ihr Programmcode sowie die
Daten aus dem Google Maps API [5] gespeichert
werden, sodass Sie die gespeicherten
Standorte auf einer Karte abbilden können.
Fügen Sie im Abschnitt HEAD den Code aus
Listing 1 hinzu, außerdem müssen die beiden
folgenden Codezeilen in den Startup-Abschnitt
Ihres Betriebssystems eingefügt werden
(beispielsweise in die Funktion
onDevice Ready).
jo.load();
App.init();
Erstellen Sie im Anschluss eine leere Datei
namens main.js.
Planen der App
Da wir eine eher „klassische“ App erstellen
wollen, fangen wir mit dem Hauptmenü-
Bildschirm (oder Karte) mit drei Menüelementen
an: Track (Standort Aufzeichnen),
Saved Prints (Abgespeicherte Routen) und
Options (Optionen). Beim Nachprogrammieren
jedes Menüelements werden Sie jeweils
ein anderes Jo-Widget kennenlernen. Wäre
dies hier kein Programmierprojekt, dann
wäre es wohl am sinnvollsten, wenn Ihre
App gleich nach dem Hochfahren den Track-
Bildschirm, d.h. den Bildschirm mit der
Standort-Aufzeichnungsfunktion, zeigen
würde, da Anwender wahrscheinlich diese
Funktion als Erstes ausprobieren wollen.
Sie können sich Ihre App so vorstellen,
dass jede einzelne ihrer Funktionen eine
Karte in einem Stapel darstellt. Dieser Ansatz
funktioniert bei Jo sehr gut. Jede Jo App
wird als joScreen dargestellt, der die BODY-
Elemente des Browsers abstrahiert. Apps
können dem Bildschirm joCard-Elemente
hinzufügen. JoCards werden über einen
joStack (oder joStackScroller) verwaltet,
außerdem können Programmierer mittels
dieser Elemente push- und pop-Methoden
auf die aktiven Karten anwenden.
Für jede der drei oben beschriebenen
Funktionen müssen Sie Karten erstellen.
Aber zunächst brauchen Sie eine Struktur, in
die Ihre Karten eingebettet werden können.
Das App-Skelett
Sicherlich wollen Sie den globalen Namespace
von JavaScript nicht unnötig verschmutzen.
Deswegen ist es am besten, den
App-Code in ein Objekt zu verpacken und
mittels des Module Pattern alle „Innereien“
der App dort einzubetten, sodass kein anderer
JavaScript-Code darauf zugreifen kann.
Wenn Sie die Programmzeilen aus Listing
2 zu der Datei main.js hinzufügen, erstellen
Sie damit ein App-Objekt mit ein paar internen
Daten (die Sie später noch brauchen
werden) und Funktionen. Nachdem Sie dann
Ihren joScreen erstellt haben, wird alles, was
Sie auf dem Bildschirm platzieren, auch auf
allen anderen Bildschirmen der App sichtbar
sein. Wenn Sie joNavbar verwenden, wird
damit auf allen App-Bildschirmen eine Titelleiste
eingeblendet, außerdem ein plattformspezifischer
Back-Button (bei webOS-Apps
wird beispielsweise die gängige Zurück-Geste
benutzt). Der Befehl return am Schluss gibt
alle Daten und Funktionen zurück, die Sie
außerhalb Ihres Objektes zur Verfügung stellen
wollen. In diesem Fall geben Sie nur die
init-Funktion selbst zurück, da dadurch alle
anderen von Ihnen benötigten Prozesse angestoßen
werden.
Die Menü-Karte
Bei Jo steht Ihnen ein äußerst einfach zu benutzendes
Menü-Widget zur Verfügung namens
joMenu. Um ein joMenu zu erstellen,
müssen Sie dem Widget ein Objekt-Array
übergeben, das die Menüoptionen und IDs
enthält. Die Klickevents im Menü werden abgefangen
und über die ID der gewählten Option
wird dann die entsprechende Karte ge-
Listing 1: index.html wird erweitert
smart-developer.de 02/2011 13