Doch nicht nur Plan B (Teil 2)
Kommentare

Nachdem nun die Basis für das Projekt angelegt wurde, kann eine index.html erstellt werden, die als zentrale Datei für den Content der Anwendung dienen wird. Die Beispieldatei in Listing 1 soll die Grundstruktur

Nachdem nun die Basis für das Projekt angelegt wurde, kann eine index.html erstellt werden, die als zentrale Datei für den Content der Anwendung dienen wird. Die Beispieldatei in Listing 1 soll die Grundstruktur der Anwendung verdeutlichen.




 Tankstopp
 
 
        
        
        
    
    
      

Tankstopp

Übersicht

Zurück

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Im Header-Bereich werden zunächst die verschiedenen Stylesheets und die JavaScript-Bibliotheken von jQTouch und jQuery eingebunden. Das erste eingebundene Stylesheet definiert grundlegende strukturelle Formatierungen und Animationen. Bei dem zweiten referenzierten Stylesheet handelt es sich um ein Theme, dass sämtliche Schriften, Farben und Formen nach dem jQTouch-Style definiert. Um ein Theme zu verwenden, das der typischen iPhone-Anwendung noch mehr entspricht, muss nur die Referenz auf das zweite mitgelieferte Stylesheet abgeändert werden (themes/apple/theme.css).

Der nun folgende Script-Block initialisiert das jQTouch-Objekt und definiert einige Standardwerte, z. B. die Art der Statusbar (mögliche Alternative wäre hier der Parameter „black-translucent“) oder ein vordefiniertes Icon, das für die Verlinkung der Anwendung auf dem iPhone Homescreen verwendet werden soll. Wird dieses nicht definiert und in der Web-Root in Form einer 57 x 57 Pixel großen PNG-Datei abgelegt, so wird dynamisch aus dem Startbildschirm der Anwendung ein Icon generiert.

Der grundlegende Aufbau von Seiten basiert bei jQTouch auf einer vordefinierten Struktur. Ausgehend vom Div mit der ID „home“ werden weitere Seiten verlinkt und definiert. Ein Div (z. B. home oder overview) wird in der Anwendung zu einem Panel, das eigenständigen Inhalt darstellen kann. Jedes Panel enthält wiederum ein Div mit einer Referenz auf die Klasse „toolbar“. Diese Klasse ist in jQTouch für die Formatierung von Elementen zuständig, sodass diese einer üblichen iPhone-Toolbar ähneln. Im „home“-Panel wird neben der Headline, die später als Titel des Panels dargestellt wird, die Navigation definiert, um auf die anderen Inhalte zu verzweigen. Die Navigation wird in Form einer Liste (Unordered List) hinterlegt, der die Stylesheet-Klasse edgetoedge zugewiesen wird. Diese Klasse formatiert Elemente so, dass diese vom linken bis zum rechten sichtbaren Bereich ausgedehnt werden. In dem „overview“-Panel wird neben dem entsprechenden Content ein ZURÜCK-Button definiert, der als Link eingefügt und mit der Stylesheet-Klasse button back formatiert wird. Der BACK-Button referenziert im gezeigten Beispiel (mit dem Hash „#“) auf das vorher aufgerufene Panel. Eine Verlinkung zu speziellen Inhalten wäre durch die genaue Angabe des Ziel ebenfalls möglich (z. B. #home).

Damit wäre die erste kleine Web App fertig (Abb. 2) und kann auf den Webserver übertragen und getestet werden. Wenn kein iPhone zur Verfügung steht, dann empfehle ich das Testen mit dem aktuellen Safari-Browser. Dieser unterstützt WebKit (Open Source Rendering Engine von Apple) und ist von seiner Implementierung dem standardmäßig auf dem iPhone installierten Browser Safari Mobile am ähnlichsten. Nach dem im März erfolgten Erscheinen des Opera Mini empfehlen sich vor dem offiziellen Release einer App weitere Tests mit dem Alternativbrowser auf dem iPhone.

Abb. 2: Erste iPhone Web App
Abb. 2: Erste iPhone Web App

Erweiterung der Anwendung um ein Formular Die Anwendung soll nun um ein Formular zur Datenverarbeitung erweitert werden. Hierzu wird zunächst im „overview“-Panel ein weiterer Button hinzugefügt, der auf das Formular-Panel weiterleitet. Das folgende Beispiel verwendet die Klasse button slideup, die das aufgerufene Panel von unten hineinsliden lässt. Anschließend wird ein weiteres Panel mit der ID „createEntry“ hinzugefügt, das das eigentliche Formular beinhaltet. Das darin enthaltene HTML-Formular enthält eine Liste mit Textfeldern und einem SUBMIT-Button. Die Textfelder verfügen über eine Reihe neuer Attribute, z. B. das Attribut Placeholder, das den Text enthält, der angezeigt wird, solange in dem Feld noch keine Eingabe erfolgt ist, sowie die Attribute autocapitalize, autocorrect und autocomplete, die es erlauben, die „Safari-spezifischen“ Features zu deaktivieren (Listing 2).

Übersicht

Zurück Hinzufügen
...

Tankstopp

Abbrechen
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -