5 Der Whisky-App ein Gesicht geben
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
93
5 Der Whisky-App ein Gesicht geben
Das Modell steht und das Grundgerüst der View ist im letzten Kapitel
erstellt worden. Also höchste Zeit, sich mit den Details zu jQuery
Mobile auseinanderzusetzen. Die verwendeten Bibliotheken hält Herr
Weber als lokale Kopie im lib-Verzeichnis, da es keinen Sinn mehr
macht, sie von extern nachzuladen, wenn später das Offline-API ver-
wendet wird oder eine Hybrid-App erstellt werden soll. Er rät zudem,
sich zuerst auf die Smartphone-Version zu konzentrieren und diese erst
später in diesem Kapitel zu einer Tablet-Version zu erweitern. Als Aus-
gangslage dient der Code aus Abschnitt 4.4.2.
5.1 Model und Controller an die View anbinden
Im Grundgerüst aus dem Abschnitt 4.4.2 haben wir das MVC-Pattern
noch nicht angewendet. Dies wollen wir nun nachholen. Dafür ver-
wenden wir unser Projekt aus Abschnitt 3.4 mit dem Modell und die
Ausgangslage der View. Als Erstes kopieren wir das Listing 4–15 in das
Stammverzeichnis und benennen die HTML-Datei in index.html um.
Dasselbe machen wir mit dem About-Dialog, Listing 4–16. Die lokale
Kopie von jQuery Mobile kann unter http://jquerymobile.com/down-
load/ heruntergeladen werden. In jQM ist jQuery noch nicht enthal-
ten, deshalb müssen wir es separat unter http://jquery.com/download/
besorgen. Auf der Download-Seite von jQM steht jeweils, welche
jQuery-Version welche jQM-Version unterstützt1. Die Dateien kopie-
ren wir in das lib-Verzeichnis und passen die Pfade im -Element
der index.html2-Datei an:
1. Für jQM in der Version 1.2.0 empfehle ich mindestens jQuery 1.7 oder 1.8, für die
jQM-Version 1.3 muss mindestens jQuery 1.8 eingesetzt werden!
2. Wie weiter oben bereits erwähnt, empfehle ich, während der Entwicklung die les-
baren Dateien einzubinden und bei der »Produktiv-Setzung« nur noch die opti-
mierten minimierten Dateien zu verwenden.94 5 Der Whisky-App ein Gesicht geben
Listing 5–1
Header der Whisky-App
Whisky-Rating
Jetzt fehlt uns noch der Controller. Die Idee ist, dass wir alle href-
Attribute durch Event-Handler ersetzen. Dazu erstellen wir die Datei
controller.js. Da wir keine Vererbung brauchen, können wir ein nor-
males Objekt erzeugen, das in der Methode initialize() alle Events
registriert.
Tipp:
Es empfiehlt sich, zu jedem Event hinzuzuschreiben, wo es ausgelöst
werden kann und welche Page das Ziel ist. Dies erleichtert später die
Wartung:
/** Zurück auf Home
* Quelle: whisky-details
* Ziel: whisky-home */
In der Tabelle 5–1 sind die benötigten Events für die Whisky-App
zusammengestellt. Zurzeit sind noch nicht alle Elemente in der
HTML-Datei definiert, aber das kommt im Laufe dieses Kapitels.
Aktuell sind die drei ersten vorhanden:
Tab. 5–1 Bedeutung Element-ID Quell-ID der Page Ziel-ID der Page
Events der Whisky-App
About-Dialog (Menü) about whisky-home about.html
Home-Dialog home whisky-details whisky-home
Neue Wertung (Menü) newWertung whisky-home whisky-details
Detail-Wertung whisky-home whisky-details
(Tippen auf Tabelle)
Wertung löschen delWertung whisky-details whisky-home
Wertung speichern saveWertung whisky-details whisky-home
Wie können wir nun einen Wechsel der Seite (page) in JavaScript
erzwingen? Dazu dient die Methode $.mobile.changePage(). Als Para-5.1 Model und Controller an die View anbinden 95
meter wird die Ziel-Page-ID oder eine Datei angegeben. Da ein simpler
Wechsel des Inhaltes nicht sexy wirkt, können wir mit dem zweiten
Parameter die Transformation definieren. Dieser Parameter ist eine
Parameter-Liste:
$.mobile.changePage("#whisky-home", {transition: "pop"});
Alle Parameter sind in der Dokumentation unter API, Methods & Uti-
lities zu finden. Häufig verwendete sind:
■ changeHash: Die Location-Bar im Browser wird jeweils mit der aktuel-
len URL aktualisiert – was aber nicht immer erwünscht ist. Wenn
unsere Whisky-App zum Beispiel nur im Browser laufen soll, ist dies
nicht erwünscht, da wir nicht direkt zu den Details springen möchten.
Dann wird aber auch der Stack nicht aktualisiert! Standardwert: true.
Hinweis:
Wenn auf eine externe Seite verwiesen wird und diese über den Stack
zurückfinden muss (Back-Button oder das x bei den Dialogen), so ruft
jQM die URL vor der App auf, da sich diese im Stack befindet! Deshalb
dürfen wir diesen Parameter bei der About-Seite nicht verwenden. Da die
Whisky-App schlussendlich als App laufen soll – und es somit kein URL-
Eingabe-Element gibt – lassen wir diesen Parameter weg.
■ data: Mit diesem Attribut kann der Ziel-URL ein String mit Daten
mitgegeben werden. Dies funktioniert nur, wenn eine URL angege-
ben worden ist.
■ role: Dieses Attribut definiert, mit welcher Rolle (page, dialog, ...)
die Page geladen werden soll. Damit ist es auch möglich, eine Page
als Dialog zu laden, obwohl dies in der HTML-Datei anders defi-
niert ist. Dieses Attribut übersteuert folglich die Definition in der
HTML-Datei.
■ showLoadMsg: Soll der Loading-Dialog angezeigt werden? Standard:
true.
■ transition: Dieses Attribut definiert die Animation beim Seiten-
wechsel.
Die Transformation der Seiten erfolgt über CSS3. Leider funktionieren
nicht alle Transformationen auf allen Plattformen korrekt. Einige sind
auch sehr langsam, siehe auch den Abschnitt 7.4 zur Performance. Fol-
gende Transformationen sind zurzeit möglich:
3. Oliver Gast hat eine spannende Testseite mit CSS3-Transformationen ins Web
gestellt: http://www.olivergast.de/wp-content/demos/transitions/index.html96 5 Der Whisky-App ein Gesicht geben
Abb. 5–1
Transformationen
Mit der Testseite4 können die Transformationen unter der Zielplatt-
form zuerst getestet werden!
Die Entwickler der Spirit AG entscheiden sich, die Detailseite immer
mit slidedown zu animieren, die Homeseite dann mit slideup und die
Dialoge mit fade.
Nun stellt sich die Frage, wann wir die Events registrieren sollen.
Eigentlich dann, wenn das Dokument geladen und bereit ist. Dazu
können wir den jQM-Event pageinit verwenden, der aufgerufen wird,
wenn die Page initialisiert wird (und somit unsere Elemente im Spei-
cher für Manipulationen zur Verfügung stehen). Implementieren wir
im Folgenden den Controller:
Listing 5–2 /** Controller */
Controller var WhiskyAppController = function() {
/** Zurück auf Home.
* Quelle: whisky-details
* Ziel: whisky-home */
function home() {
$.mobile.changePage("#whisky-home",
{ transition: "slideup" } );
}
/** Neue Wertung erstellen
* Quelle: whisky-home
* Ziel: whisky-details */
function addTasting() {
4. http://jquerymobile.com/test/docs/pages/page-transitions.html5.1 Model und Controller an die View anbinden 97
$.mobile.changePage("#whisky-details",
{ transition: "slidedown" } );
}
/** About-Seite als Dialog
* Quelle: whisky-home
* Ziel: about.html */
function about() {
$.mobile.changePage("about.html",
{ transition: "fade", role: "dialog" } );
}
return {
initialize : function() {
// Add-Button in der Liste
$("#newWertung").bind( 'vclick', addTasting);
// About-Dialog
$("#about").click(about);
// Home-Button
$("#home").click(home);
}
};
}
/** Controller aufrufen, wenn pageinit von jQM geworfen wird */
$('#whisky-home').live("pageinit", function(event) {
// Event-Listener-Buttons
WhiskyApp.controller.initialize();
});
Zusätzlich erstellen wir ein »Main«, das heißt: ein Objekt, in dem wir
unsere globalen Instanzvariablen führen. In diesem Main-Objekt
instanziieren wir sowohl den Controller als auch das Model:
var WhiskyApp = { Listing 5–3
tastings: new Tastings(), Die Datei main.js
controller: new WhiskyAppController(),
}
Damit wir nun alles testen können, müssen die JavaScript-Dateien in
der index.html-Datei eingebunden werden:
Whisky-Rating98 5 Der Whisky-App ein Gesicht geben
Da ruft ein Entwickler enttäuscht: Weshalb funktioniert es denn bei
mir nicht? Ein Blick genügt: Er tippte bei der Transformation statt
fade face ein. Dann geht leider gar nichts mehr ...
5.2 Themen
jQM bringt fünf verschiedene Themes (auf Deutsch: Themen) mit, die
das Aussehen der Web-App auf je unterschiedliche Weise festlegen. Sie
werden mit den Buchstaben a, b, c, d und e abgekürzt. Mithilfe des
Attributs data-theme kann ein Thema für eine Page oder ein einzelnes
Element festgelegt werden.
Abb. 5–2
Themen von jQM
Das Thema a entspricht eher einem dunklen Aussehen wie bei And-
roid, Thema b ist in einem Blauton gehalten und die Themen c und d in
Grautönen. Das Thema e, ganz in Gelb, eignet sich für besonders
wichtige Sachen, die hervorstechen sollen.
Die Themen lassen sich mit dem ThemeRoller per Drag-and-drop
verändern. Die generierte CSS-Datei kann dann im Projekt eingebun-
den werden. Inspirieren lassen können Sie sich von der Seite
http://www.jqmgallery.com/.
Abb. 5–3
ThemeRoller5.3 Formular-Elemente gruppieren 99
Das Entwicklungsteam einigt sich auf das Thema c. Der About-Dialog
soll im Thema a erfolgen. Weitere Abweichungen werden ad hoc dis-
kutiert. Die Designer werden dann gegebenenfalls eine Anpassung
vornehmen.
5.3 Formular-Elemente gruppieren
5.3.1 Collapsible Sets
Die Detail-Page besteht aus vielen verschiedenen Eingabeelementen.
Wenn all diese Elemente auf einer Seite untereinander dargestellt wür-
den, wäre die Seite sehr unübersichtlich. Für die Gruppierung von Ele-
menten gibt es daher in jQM Collapsible Sets.
Abb. 5–4
Collapsible Sets
In unserer App gruppieren wir die Elemente in die Bereiche Allgemein,
Wertung und Ort. Wie gewohnt verwenden wir dafür ein div-Element
mit der entsprechenden Rolle collapsible-set. Pro Set wird ein weite-
res div-Element mit der Rolle collapsible erstellt. Mit dem Attribut
data-collapsed kann festgelegt werden, ob ein Content-Block (bei der
ersten Darstellung) aufgeklappt oder zugeklappt ist. Jeder Block kann
ein eigenes Thema haben; es zeigt einerseits, wie das Set dargestellt
werden soll, (data-theme="e") und andererseits, wie der Inhalt im Set
dargestellt werden soll (data-content-theme="c"). Da die Wertung her-
ausstechen soll, verwenden wir für dieses Set das Thema e (gelb). Als
Titel wird der Text im folgenden h3-Element verwendet. Folgendes Lis-
ting zeigt den Einsatz der Sets in der Whisky-App:
Listing 5–4
Whisky-App
Tasting100 5 Der Whisky-App ein Gesicht geben
Allgemein
Wertung
Ort
Hinweis:
Wird beim Element kein Content-Thema angegeben, so fehlen die senk-
rechten Linien von Set zu Set.
Wer die Standard-Icons nicht mag, kann diese auch durch andere
ersetzen. Dafür stehen die data-Attribute data-collapsed-icon und
data-expanded-icon zur Verfügung:
Folgende Icons werden mitgeliefert, wobei bars und edit erst seit Ver-
sion 1.3 dabei sind:
Abb. 5–5
jQuery-Mobile-Icons
Weitere Icons hat Andy Matthews5 für jQM aufbereitet. Nach dem
Download können die CSS-Dateien und deren Unterverzeichnisse in5.3 Formular-Elemente gruppieren 101
das Projekt kopiert werden, und das Stylesheet kann in der Index-
Datei hinzugefügt werden:
Zu beachten ist, dass bei den Font-Icons die Icons im CSS etwas größer
gemacht werden. Dadurch kann es passieren, dass die Formatierungen
nicht mehr stimmen. Ich persönlich verwende deshalb nur die Original-
Icons:
Abb. 5–6
Die Original-Icons des
jQM-Icon-Packs
Wenden wir die genannten Icons an, könnte das wie folgt aussehen:
Abb. 5–7
Collapsible Set in der
Whisky-App
Wir haben im Code oben bei den drei Elementen die Icons entspre-
chend hinzugefügt:
Allgemein
Wertung
Ort
Eigene Icons können im PNG-Format mit einer Auflösung von 18 18
Pixel und für Retina mit 36 36 Pixel eingebunden werden. Wichtig
ist, dass der Hintergrund transparent ist. Die Anwendung erfolgt wei-
terhin mit dem data-icon-Attribut:
5. http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/index.html102 5 Der Whisky-App ein Gesicht geben
CRM
Nun muss noch eine CSS-Klasse definiert werden, die mit .ui-icon
beginnt:
.ui-icon-crm { background-image: url("crm.png"); }
5.3.2 Grid-Darstellung
Eine weitere Formatierungsmöglichkeit ist die Spaltendarstellung. Die
Idee von jQM ist, dass der Content-Bereich in zwei bis fünf Spalten mit
gleicher Breite aufgeteilt werden kann.
In einem übergeordneten Bereich muss die Anzahl der Spalten im
class-Attribut angegeben werden:
Für zwei Spalten wird die Klasse ui-grid-a verwendet, für drei ui-
grid-b, für vier ui-grid-c und für fünf ui-grid-d. Danach ist in dessen
Block pro Spalte ein weiterer Block zu definieren, bei dem wiederum
über das class-Attribut die Spalte angegeben wird. Die erste Spalte
erhält den Wert ui-block-a, die zweite ui-block-b usw. bis zur fünften
mit dem Wert ui-block-e.
Das fünfspaltige Design aus der Abbildung 5–2 wird wie folgt
umgesetzt:
Header A
...
...
...
...
...5.3 Formular-Elemente gruppieren 103
Dynamische Spaltenbreiten und ein Responsive Layout können per
CSS erzeugt werden. Wird unter jQM 1.3 das Class-Attribut ui-
responsive mitgegeben, so werden, wenn der Platz nicht ausreicht, die
Zellen automatisch untereinander dargestellt.
Will man einen eigenen Wert für den Umbruch definieren, der in
jQM Breakpoint genannt wird, muss die Klasse selbst per Media-
Query definiert werden, dabei kann man auch gleich die Spaltenbreite
angeben. Wir können dies in unserem About-Dialog anwenden:
Abb. 5–8
About-Dialog im
Responsive Layout
Die CSS-Definition finden Sie gleich am Anfang des Codes. Wenn die
Breite kleiner als 25 Einheiten ist, so werden die Zellen untereinander
(width: 100%; float: none) dargestellt, ansonsten nebeneinander,
wobei die erste Spalte 22% des Platzes erhält:
Listing 5–5
about.html mit zwei
Spalten
@media all and (max-width: 25em) {
.my-breakpoint .ui-block-a, .my-breakpoint .ui-block-b {
width: 100%;
float: none;
}
}
@media all and (min-width: 25em) {
.my-breakpoint.ui-grid-a .ui-block-a {
width: 22%;
}
.my-breakpoint.ui-grid-a .ui-block-b {
width: 77%;
}
}
About Whisky Rating104 5 Der Whisky-App ein Gesicht geben
Whisky-Tasting-Web-App
entwickelt mit jQuery Mobile und HTML5.
App zum Buch Web-Apps mit jQuery Mobile
Version 02.2013
(c) Philipp Friberg
5.4 Die Formular-Elemente
Die grafischen Elemente wurden in jQuery Mobile als Widgets entwi-
ckelt. Ein Widget ist ein Interaktions-Element einer grafischen Benut-
zerschnittstelle, das ein eigenes Verhalten aufweisen kann. Der Vorteil
ist, dass es gekapselt ist und somit der Quellcode modularer wird. Ein
Widget kann z.B. ein Text-Feld oder eine Dialog-Box sein. Im
Abschnitt 7.5 werden wir uns nochmals intensiv darum kümmern.
5.4.1 Field-Container
jQM rendert je nach zur Verfügung stehendem Platz die Anordnung
der Felder unterschiedlich, siehe Abbildung 5–9. Die linke Darstellung
erfolgt in der vertikalen Ausrichtung. Kippt der Benutzer das Smart-
phone in die Horizontale, hat jQM mehr Platz in der Breite und stellt
die Seite wie rechts dar. Um diese dynamische Darstellung zu unter-
stützen, muss jQM über semantische Informationen zu den Element-
Gruppen verfügen. Deshalb müssen sich zusammengehörige Elemente
in einem Field-Container befinden:
...Sie können auch lesen
