This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Kommentare und Fragen können Sie gerne an uns richten: O’Reilly Verlag Balthasarstr. 81 50670 Köln E-Mail: [email protected]
Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.
Übersetzung und deutsche Bearbeitung: Ingo Dellwig, Werne Lektorat: Christine Haite, Köln Fachliche Unterstützung: Michael Gerth, Köln Korrektorat: Sybille Feldmann, Düsseldorf Satz: III-satz, www.drei-satz.de Umschlaggestaltung: Karen Montgomery, Boston Produktion: Andrea Miß, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; www.koeselbuch.de ISBN 978-3-89721-603-7
Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.
Für Erica – und das kleine hüpfende Böhnchen in ihrem Bauch.
Wie Millionen von Menschen habe auch ich mich sofort in mein iPhone verliebt. Anfangs waren Webanwendungen (Web-Apps) die einzige Chance, individuelle Programme auf das Gerät zu bekommen, was für mich in Ordnung ging, da ich ja Webentwickler bin. Als Monate später der App Store angekündigt wurde, war ich total aufgeregt. Ich rannte los und kaufte jedes Buch über Objective-C, das mir in die Finger kam. Da einige meiner Web-Apps schon recht bekannt waren, plante ich, diese als native Anwendungen (Apps) neu zu schreiben, sie in den App Store zu stellen und auf einem riesigen, galoppierenden Geldhaufen in den Sonnenuntergang zu reiten. Die Desillusionierung folgte auf dem Fuße. Ich fand es schwierig, Objective-C zu lernen, und ich wurde durch die Tatsache, dass die Sprache außerhalb der Mac-Programmierung wenig nützlich ist, zusätzlich demotiviert. Xcode und der Interface Builder waren zwar sehr professionell, aber sie waren nicht meine normale Entwicklungsumgebung, und ich fand es schwer, mich an sie zu gewöhnen. Ich war von den ganzen Ringen, durch die ich springen musste, nur um meine App und das iPhone für Tests vorzubereiten, extrem genervt. Der Prozess für die Veröffentlichung der Anwendung im App Store war sogar noch komplizierter. Nachdem ich ein oder zwei Wochen mit diesen Variablen gekämpft hatte, fragte ich mich, warum ich mir diesen ganzen Ärger überhaupt antat. Immerhin waren meine Apps bereits weltweit verfügbar – warum sollte ich also unbedingt im App Store sein? Darüber hinaus kann Apple Apps ablehnen – und macht es auch. Das ist sicherlich ihr gutes Recht, und vielleicht haben sie gute Gründe dafür. Allerdings sieht es von außen betrachtet sehr unberechenbar und willkürlich aus. Versuchen Sie einmal, sich hier hineinzuversetzen (das basiert übrigens auf einer wahren Geschichte): Sie haben etwa 100 Stunden damit verbracht, Objective-C zu lernen. In weiteren 100 Stunden haben Sie eine native iPhone App geschrieben. Nehmen wir an, Ihre App ist bereit für die Premiere, und Sie haben erfolgreich die Herausforderungen des Einreichungsprozesses für den App Store gemeistert. Was passiert dann? Sie warten. Und warten. Und warten noch etwas länger. Wir reden über Wochen und manchmal auch Monate. Schließlich bekommen Sie eine Rückantwort. Und … Ihre
Vorwort |
IX
Anwendung wurde abgelehnt. Was nun? Sie haben trotz des ganzen Aufwands nichts in der Hand. Aber warten Sie, es kann noch schlimmer kommen. Angenommen, Sie bekommen Ihre App genehmigt. Hunderte oder vielleicht sogar Tausende von Menschen laden die Anwendung herunter. Sie haben zwar noch kein Geld bekommen, sind aber auf Wolke sieben. Dann trudeln die ersten Fehlermeldungen ein. Sie finden und beheben den Fehler binnen Minuten, reichen die App erneut bei iTunes ein und warten auf Apples Prüfung der Änderung. Und warten. Und warten noch etwas länger. Verärgerte Kunden geben Ihnen haarsträubende Bewertungen im App Store. Die Verkäufe brechen ein. Und Sie warten immer noch. Sie denken darüber nach, den verärgerten Kunden das Geld zurückzuerstatten, aber die Möglichkeit gibt es im App Store nicht. Sie sind also dazu verdammt, herumzusitzen und Ihre Bewertung abstürzen zu sehen, obwohl der Fehler bereits vor Tagen oder Wochen behoben wurde. Sicher. Diese Geschichte beruht auf den Erfahrungen eines einzelnen Entwicklers. Vielleicht ist es ein Extrem, und die aktuellen Zahlen widerlegen meine These. Das Problem bleibt allerdings bestehen: Wir Entwickler haben keinen Zugriff auf Apples Daten oder die Details des Überprüfungsprozesses im App Store. Bis sich das ändert, ist das Erstellen einer nativen App mit Objective-C ein riskanter Plan. Glücklicherweise gibt es eine Alternative. Sie können Webanwendungen bauen, indem Sie frei verfügbare, standardisierte Webtechnologien einsetzen, sie als Web-App veröffentlichen und von echten Anwendern unter Volllast testen lassen. Wenn Sie absolut startklar sind, können Sie die Software PhoneGap verwenden, um Ihre Webanwendung in eine native iPhone App zu konvertieren und sie an den App Store zu senden. Sollte sie ultimativ abgelehnt werden, ist das Projekt nicht tot, denn Sie können immer noch die Web-App anbieten. Wenn sie genehmigt wird, umso besser! Sie können dann anfangen, die App mit Funktionen zu erweitern, die die grandiosen Hardwarefunktionen des Geräts nutzen. Das klingt wie das Beste aus beiden Welten, oder?
Wer sollte dieses Buch lesen? Ich gehe davon aus, dass Sie grundlegende Erfahrungen im Lesen und Schreiben von HTML, CSS und JavaScript (insbesondere jQuery) haben. In den Kapiteln 5 und 6 werde ich einige grundlegende SQL-Quelltexte verwenden, eine flüchtige Kenntnis von SQL wäre also hilfreich, ist aber nicht zwingend erforderlich.
Was brauchen Sie, um mit diesem Buch zu arbeiten? Dieses Buch wird das iPhone SDK vermeiden, wo immer es geht. Alles was Sie brauchen, um bei der großen Mehrheit der Beispiele mitzukommen, ist ein Texteditor und die aktuellste Version von Safari (oder noch besser WebKit, das eine innovativere Version von
X | Vorwort
Safari ist und sowohl für Mac OS als auch für Windows unter http://webkit.org zur Verfügung steht). In Kapitel 7 brauchen Sie dann einen Mac für PhoneGap. Dort erkläre ich, wie man Ihre Webanwendung in eine native App konvertiert, die Sie dann im App Store veröffentlichen können.
Konventionen in diesem Buch Die folgenden drucktechnischen Konventionen werden in diesem Buch verwendet: Kursiv Kennzeichnet neue Ausdrücke, URLs, E-Mail-Adressen, Dateinamen und Dateiendungen. Konstante Breite
Wird für Programmlistings und innerhalb von Absätzen für den Verweis auf Programmelemente, wie Variablen- oder Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen, Ausdrücke und Schlüsselwörter, verwendet. Konstante Breite, fett
Zeigt Befehle oder sonstigen Text an, der vom Anwender wörtlich eingegeben werden soll, und wird für Hervorhebungen innerhalb von Programmlistings verwendet. Konstante Breite, kursiv
Markiert Text, der durch anwenderbezogene Werte ersetzt werden soll, die sich aus dem Kontext ergeben. Dieses Symbol kennzeichnet Tipps, Hinweise oder generelle Anmerkungen.
Dieses Symbol zeigt eine Warnung an.
Codebeispiele verwenden Dieses Buch ist dazu da, Sie darin zu unterstützen, Ihre Arbeit zu tun. Im Allgemeinen dürfen Sie die Quelltexte aus diesem Buch in Ihren Programmen und Dokumentationen nutzen. Sie brauchen uns nicht um Erlaubnis fragen, solange Sie keine erhebliche Menge an Code reproduzieren. Wenn Sie beispielsweise ein Programm schreiben, das Teile der Beispiele aus diesem Buch verwendet, brauchen Sie keine Genehmigung. Sollten Sie allerdings eine CD-ROM mit Beispielen aus O’Reilly-Büchern verkaufen oder verteilen, wird eine Erlaubnis benötigt. Das Beantworten von Fragen durch das Zitieren von Texten oder Listings aus diesem Buch ist ohne Genehmigung möglich. Sie brauchen aber eine
Vorwort |
XI
Erlaubnis, wenn Sie große Teile dieses Buchs in die Dokumentation Ihres Produkts einfließen lassen. Wir begrüßen Quellenangaben, setzen sie aber nicht voraus. Quellenangaben beinhalten üblicherweise den Titel sowie Autor, Verlag und die ISBN, zum Beispiel: iPhone Apps mit HTML, CSS und JavaScript von Jonathan Stark. Copyright 2010 O’Reilly Verlag, 978-3-89721-603-7. Wenn Sie denken, Ihr Gebrauch der Programmbeispiele fiele nicht in die oben abgegebene Genehmigung, können Sie uns gern unter [email protected] kontaktieren.
Danksagung Ein Buch zu schreiben, ist Teamarbeit. Mein herzlicher Dank für ihren großzügigen Beitrag geht an die folgenden Personen: Tim O’Reilly, Brian Jepson und den Rest der ORM-Truppe, die meine Buchschreibeerfahrungen so lohnend und lehrreich machten. Jack Templin, Providence Geeks und RI Nexus, die mich in die blühende Technologieszene meiner Heimatstadt einführten. Dieses Buch würde nicht existieren, wenn es Providence Geeks nicht gäbe. David Kandeda für sein zwanghaftes Streben nach Schönheit. Egal ob es sich um ein Stück Code oder eine Benutzeroberflächenanimation handelt, er kann nicht schlafen, bis es perfekt ist. Ich finde das toll. Brian LeRoux, Brock Whitten, Rob Ellis und den Rest der Nitobi-Truppe für das Schreiben und die weiterführende Betreuung von PhoneGap. Brian Fling für die Erweiterung meines Horizonts in Sachen Mobilgeräte über die neueste und beste Hardware hinaus. Brian kennt sich seit Beginn damit aus; er ist ein wunderbarer Autor und darüber hinaus ein sehr großherziger Kerl. PPK, John Gruber, John Allsopp und John Resig für ihren Beitrag zu und ihre Unterstützung bei den zugrunde liegenden Technologien, die dieses Buch möglich machten. Garrett Murray, Brian LeRoux und den Schwarm von Menschen, die freigiebig Kommentare und Fragen auf der OFPS-Seite zu diesem Buch geschrieben haben. Eure Rückmeldungen waren sehr hilfreich und sehr willkommen. Kazu, Chuckie, Janice, Chris und den Rest der Haruki-Truppe, die so nachsichtig waren, als ich endlos in voller Lautstärke vor mich hin getippt habe. Meine wunderbare Familie, Freunde und Kunden, weil sie so verständnisvoll und hilfsbereit waren, während ich an die Tastatur gefesselt war. Und schließlich Erica. Du machst alles möglich. Ich liebe dich!
XII | Vorwort
Kapitel 1
KAPITEL 1
Los geht’s
Bevor wir eintauchen und damit beginnen, Anwendungen für das iPhone zu entwickeln, würde ich gern das Spielfeld definieren. In diesem Kapitel werde ich die grundsätzlichen Bedingungen festlegen, die Vor- und Nachteile der beiden gebräuchlichsten Herangehensweisen an die Entwicklung vergleichen und einen Crashkurs für die drei grundlegenden Webtechniken, die in diesem Buch verwendet werden, präsentieren.
Web-Apps im Vergleich zu nativen Apps Zuerst einmal definiere ich, was ich mit einer »Web-App« und einer »nativen App« meine. Anschließend werde ich jeweils die Vor- und Nachteile abwägen.
Was ist eine Web-App? Für mich ist eine Web-App im Wesentlichen eine Website, die speziell für das iPhone optimiert wurde. Diese Website kann alles sein, von einer Standardbroschüre eines kleinen Unternehmens über einen Zinsrechner bis hin zu einem täglichen Kalorienzähler – der Inhalt spielt keine Rolle. Die entscheidenden Merkmale einer Web-App sind, dass die Benutzeroberfläche mit Standard-Webtechnologien erstellt wurde, dass sie über eine URL ansprechbar ist (öffentlich, privat oder versteckt hinter einem Log-in) und dass sie speziell auf die Besonderheiten des iPhone optimiert wurde. Eine Web-App wird weder auf dem iPhone installiert, noch ist sie im App Store verfügbar, und sie ist auch nicht in Objective-C geschrieben.
Was ist eine native App? Im Gegensatz dazu werden native Anwendungen auf dem iPhone installiert, haben Zugriff auf die Hardware (Lautsprecher, Beschleunigungssensoren, Kamera usw.), und sie sind in Objective-C programmiert. Allerdings ist das sie auszeichnende Merkmal, dass
| 1
sie im iTunes App Store verfügbar ist – eine Besonderheit, die die Fantasie von Horden von Softwareunternehmern, mich eingeschlossen, angeregt hat.
Vor- und Nachteile Unterschiedliche Apps haben unterschiedliche Anforderungen. Manche Apps passen besser zu Webtechnologien als andere. Wenn Sie die Vor- und Nachteile der verschiedenen Ansätze kennen, fällt es Ihnen leichter, für Ihre Situation den richtigen Weg auszuwählen. Dies sind die Vorteile der Entwicklung von nativen Apps: • Millionen von registrierten Kreditkartenbesitzern sind nur einen Klick entfernt. • Xcode, Interface Builder und das Cocoa Touch Framework bilden zusammen eine schicke Entwicklungsumgebung. • Sie können die ganzen coolen Hardwarefunktionen des Geräts nutzen. Und hier sind die Nachteile der Entwicklung von nativen Apps: • Sie müssen bezahlen, um ein Apple-Entwickler zu werden. • Sie müssen sich der Gnade des Überprüfungsprozesses von Apple unterwerfen. • Sie müssen in Objective-C programmieren. • Sie müssen auf einem Mac entwickeln. • Sie können Fehlerbehebungen nicht zügig veröffentlichen. • Der Entwicklungszyklus ist langsam, und der Testzyklus ist durch den App Store beschränkt. Dies sind die Vorteile der Entwicklung von Web-Apps: • Webentwickler können ihre bisherigen Entwicklerprogramme nutzen. • Sie können ihre aktuellen Webdesign- und Programmierfähigkeiten nutzen. • Sie sind bei der Entwicklung nicht auf Mac OS angewiesen. • Ihre App läuft auf jedem Gerät mit einem Webbrowser. • Sie können Fehler sofort beheben. • Der Entwicklungszyklus ist schnell. Das sind die Nachteile der Entwicklung von Web-Apps: • Sie können die coolen iPhone-Hardwarefunktionen nicht nutzen. • Sie müssen sich selbst um ein Abrechnungssystem kümmern, wenn Sie mit der App Geld verdienen möchten. • Es kann schwierig werden, anspruchsvolle Effekte für die Benutzeroberfläche zu erstellen.
2 |
Kapitel 1: Los geht’s
Welcher Ansatz ist für Sie der richtige? Ab hier wird es nun spannend. Dadurch dass das iPhone ständig online ist, schafft es eine Umgebung, in der die Grenzen zwischen Web-Apps und nativen Apps verschwimmen. Es gibt ein paar weniger bekannte Funktionen im iPhone, die es Ihnen ermöglichen, Web-Apps auch offline zu nutzen (siehe Kapitel 6). Darüber hinaus entwickeln einige Fremdanbieter Software – von denen PhoneGap die bemerkenswerteste ist –, mit denen Webentwickler eine Web-App nehmen und sie als native App für das iPhone und andere mobile Plattformen verpacken können. Für mich ist das die perfekte Mischung. Ich kann in meiner »Mutterprogrammiersprache« schreiben, das Produkt als reine Web-App veröffentlichen (für das iPhone und andere Geräte, die einen mobilen Browser haben), ohne mich durch Apples Überprüfungsprozess zu quälen. Außerdem kann ich denselben Quelltext als Grundlage dazu verwenden, um eine erweiterte native Version zu erstellen, die dann die Hardwarefunktionen des Geräts nutzt und möglicherweise auch im App Store verkauft werden kann. Und wenn Apple die App ablehnt? Kein Thema, weil ich immer noch meine Onlineversion habe. Ich kann weiter an der nativen Version arbeiten, während die Kunden die Web-App nutzen.
Crashkurs in Webprogrammierung Die drei Technologien, die wir hauptsächlich für die Entwicklung von Web-Apps nutzen werden, sind HTML, CSS und JavaScript. Ich möchte gern jede von ihnen kurz abhandeln, um sicherzugehen, dass wir auf dem gleichen Stand sind, wenn wir uns auf die ausgefallenen Sachen stürzen.
Einführung in HTML Wenn Sie im Internet surfen, sind die Seiten, die Sie sehen, einfache Textdokumente auf einem fremden Computer. Der Text einer typischen Webseite wird in HTML-Tags gesteckt, die Ihrem Browser etwas über die Struktur der Seite verraten. Mit diesen Informationen kann der Browser entscheiden, wie er den Seiteninhalt am sinnvollsten anzeigen kann. Betrachten wir einmal den HTML-Schnipsel in Beispiel 1-1. In der ersten Zeile wird die Zeichenfolge Hallo! von einem Paar h1-Tags umschlossen. (Beachten Sie, dass das öffnende Tag und das schließende Tag etwas unterschiedlich sind: Das schließende Tag hat als zweites Zeichen einen Schrägstrich, während das öffnende Tag ohne auskommt.) Indem man einen Text mit h1-Tags umgibt, sagt man dem Browser, dass die eingeschlossenen Wörter eine Überschrift (engl. headline) sind. Der Browser wird sie dann in großer, fetter Schrift in einer eigenen Zeile anzeigen. Es gibt auch h2-, h3-, h4-, h5- und h6-Tags. Je
Crashkurs in Webprogrammierung | 3
kleiner die Zahl ist, umso wichtiger ist die Überschrift. Eine h6-Überschrift wird also kleiner (weniger wichtig aussehend) dargestellt als eine h3-Überschrift. Hinter den h1-Tags in Beispiel 1-1 kommen zwei Zeilen, die von p-Tags umschlossen sind. Das sind sogenannte Absatz-Tags (engl. paragraph). Browser stellen jeden Absatz in einer eigenen Zeile dar. Wenn der Absatz lang genug ist, um das Ende des Browserfensters zu erreichen, wird er automatisch umbrochen und in der nächsten Zeile fortgesetzt. In jedem Fall wird aber eine Leerzeile hinter dem Absatz eingefügt, um ihn vom nächsten Element auf der Seite zu trennen. Beispiel 1-1: HTML-Schnipsel Hallo!
Danke, dass du meine Homepage besuchst.
Ich hoffe, du magst sie.
Sie können HTML-Tags auch innerhalb anderer HTML-Tags verwenden. Beispiel 1-2 zeigt eine ungeordnete Liste (ul-Tag, vom engl. »unordered list«), die drei Listenelemente (li-Tags, vom engl. »list item«) enthält. In einem Browser würde die Liste mit Aufzählungspunkten vor jedem Listeneintrag erscheinen. Wenn man Tags innerhalb von anderen Tags betrachtet, spricht man von Kinder-Tags bzw. Kindern des Eltern-Tags. In diesem Beispiel sind die li-Tags also Kinder des Eltern-Tags ul. Beispiel 1-2: Ungeordnete Liste
Pizza
Bier
Hotdogs
Die Tags, die ich bisher gezeigt habe, sind allesamt Block-Tags. Ein Block-Tag zeichnet sich dadurch aus, dass es in einer eigenen Zeile, ohne Elemente links oder rechts daneben, angezeigt wird. Deshalb erweitern Überschriften, Absätze und Listenelemente die Seite immer nach unten und nicht nach rechts. Das Gegenteil eines Block-Tags ist ein Inline-Tag, das, wie der Name schon sagt, innerhalb einer Zeile auftauchen kann. Das Betonungs-Tag (em-Tag, vom engl. »emphasis«) ist ein Beispiel für so ein Inline-Tag und sieht folgendermaßen aus:
Ich hoffe <em>wirklich, dass Sie es mögen.
Der Großvater der Inline-Tags – und wohl die coolste Funktion in HTML – ist das a-Tag. Es steht für Anker (engl. »anchor«), aber ich werde dieses Tag auch als Link oder Hyperlink bezeichnen. Der Text, der in a-Tags eingebettet ist, wird anklickbar, so dass ein Klick darauf den Browser dazu bringt, eine neue HTML-Seite zu laden. Um dem Browser zu sagen, welche neue Seite geladen werden soll, müssen wir dem Tag etwas hinzufügen, das man Attribut (oder Eigenschaft) nennt. Attribute sind benannte Werte, die in ein öffnendes Tag eingefügt werden. In einem Anker-Tag verwendet man
4 |
Kapitel 1: Los geht’s
Umlaute in HTML Die deutschen Umlaute und das ß werden in HTML besonders behandelt. Man ersetzt sie durch diese Zeichenfolgen: Sonderzeichen
Folgendes ist passiert: 1 Ich habe dem Kopf des HTML-Dokuments einen script-Block hinzugefügt. 2 In dem script-Block habe ich eine einfache JavaScript-Funktion namens sayHello() definiert. 3 Die Funktion sayHello() beinhaltet einen einzigen Ausdruck, der dem Browser sagt: »Suche im Dokument nach einem Element mit der ID ›foo‹ und setze dessen innerHTML-Wert auf ›Hallo!‹.« Der Effekt im Browser ist, dass der Text »Klick mich!« durch »Hallo!« ersetzt wird, sobald der Anwender auf das h1-Element klickt.
Crashkurs in Webprogrammierung
| 11
4 Hier endet die Funktion sayHello(). 5 Der script-Block endet hier. 6 Das Attribut onclick des h1-Elements sagt dem Browser, dass er etwas tun soll, falls der Anwender auf die Überschrift klickt, nämlich die Funktion sayHello() auszuführen. Damals, in der schlechten alten Zeit der Webentwicklung, hatten unterschiedliche Browser verschiedene JavaScript-Unterstützungen. Das bedeutete, dass Ihr Programm zwar in Safari 2, aber nicht im Internet Explorer 6 laufen würde. Sie mussten also ganz schön leiden und das Programm in jedem Browser (und auch in verschiedenen Versionen des gleichen Browsers) testen, um sicherzustellen, dass es überall läuft. Als dann die Zahl der Browser und der Browserversionen wuchs, wurde es schlicht unmöglich, ein Programm für alle Umgebungen zu testen. In jener Zeit war es echt die Hölle, Webprogrammierung mit JavaScript durchzuführen. Kommen wir zu jQuery. jQuery ist eine relativ kleine JavaScript-Bibliothek, die es Ihnen erlaubt, Ihren JavaScript-Quelltext so zu schreiben, dass er in einer großen Vielfalt von Browsern auf die gleiche Weise funktioniert. Hinzu kommt, dass es einige typische Webentwickleraufgaben wunderbar vereinfacht. Aus diesem Grund nutze ich jQuery für den Großteil meiner Entwicklungsarbeit, und ich werde es für die JavaScript-Beispiele in diesem Buch verwenden. Beispiel 1-10 ist die jQuery-Version von Beispiel 1-9. Beispiel 1-10: Der onClick-Handler in der jQuery-Version Meine tolle Seite <script type="text/javascript" src="jquery.js"> 1 <script type="text/javascript" charset="utf-8"> function sayHello() { $('#foo').text('Hallo!'); 2 } Klick mich!
1 Hier füge ich die Bibliothek jquery.js ein. Ich habe einen relativen Pfad verwendet, was bedeutet, dass die Datei im selben Ordner liegt wie die HTML-Datei. Ich hätte sie aber genauso gut von diversen anderen Orten einbinden können, an denen sie verfügbar ist. 2 Beachten Sie, wie viel weniger Code wir brauchen, um den Austausch des Texts im h1-Element vorzunehmen. Das mag in so einem trivialen Beispiel nicht nach einer großen Sache aussehen, aber ich kann Ihnen versichern, dass es in komplexen Lösungen eine Art Lebensretter bedeutet .
12 | Kapitel 1: Los geht’s
Wir werden noch jede Menge jQuery-Code im echten Einsatz sehen. Deshalb lasse ich das hier erst einmal so stehen. jQuery-Download, -Dokumentationen und -Einführungen sind unter http:// jquery.com erhältlich. Um jQuery nutzen zu können, müssen Sie es von der Website herunterladen, die Datei (so etwas wie jquery-1.3.2.min.js) in jquery.js umbenennen und eine Kopie in das Verzeichnis der HTML-Datei legen.
Crashkurs in Webprogrammierung
| 13
Kapitel 2
KAPITEL 2
Einfaches iPhone-Styling
Letztendlich wollen wir eine native iPhone-App mit HTML, CSS und JavaScript entwickeln. Der erste Schritt auf diesem Weg ist, sich damit vertraut zu machen, wie man HTML-Seiten so aufbessert, dass sie wie eine iPhone-App aussehen. In diesem Kapitel werde ich Ihnen zeigen, wie man CSS einem Bündel von existierenden HTML-Seiten hinzufügt, damit man sie einfach auf einem iPhone bedienen kann. Sie werden damit nicht nur ihrem Ziel näher kommen, eine eigene native App zu bauen, sondern auch eine praktische (und wertvolle) Fähigkeit erlernen, die Sie sofort einsetzen können.
Sie haben keine Website? Wenn Sie Ihre Webseiten bisher immer lokal auf Ihrem Computer getestet haben, werden Sie sie so nicht auf dem iPhone testen können. Dazu müssen Sie einen Server aufsetzen. Sie haben die Wahl: • Legen Sie Ihre Webseiten auf einem Webserver ab (Ihr Internetdienstanbieter unterhält eventuell einen Web-Hosting-Service) und verbinden Sie sich mit dem iPhone mit diesem Server. • Legen Sie Ihre Webseiten auf einem Webserver ab, der auf Ihrem Computer läuft, und verbinden Sie sich mit Ihrem iPhone mit dem Server. Das funktioniert nur, wenn Ihr iPhone das gleiche WLAN-Netzwerk wie der Computer nutzt. • Wenn Sie kein iPhone besitzen, können Sie eines in Safari simulieren. Aktivieren Sie dazu einfach in den erweiterten Einstellungen das ENTWICKLER-Menü, wählen Sie dann ENTWICKLER → BENUTZER-AGENT und suchen Sie dort die gewünschte Version des mobilen Safari aus, die simuliert werden soll. Dieses Kapitel ist so aufgebaut, dass Sie die Beispiele beim Lesen direkt ausprobieren können. Egal, welche Möglichkeit Sie gewählt haben, um Ihre Webseiten zu betrachten: laden Sie sie einfach im Browser (vorzugsweise im iPhone-Browser) neu, wenn Sie etwas Neues den Beispieldateien hinzugefügt und diese abgespeichert haben.
| 15
Erste Schritte Theorie ist großartig, aber ich bin eher der »Zeig’s mir, rede nicht nur drüber«-Typ. Los geht’s! Stellen Sie sich vor, Sie haben eine Webseite, die Sie iPhone-isieren wollen (Abbildung 2-1). In diesem Szenario gibt es einige einfache Dinge, mit denen Sie die Site für das iPhone optimieren können. Diese Möglichkeiten werde ich Ihnen in diesem Kapitel vorstellen.
Abbildung 2-1: Die Desktop-Version einer typischen Webseite sieht im Safari auf einem Computer gut aus.
Abbildung 2-2 zeigt, wie dieselbe Webseite auf einem iPhone aussieht. Im Normalfall ist sie weit davon entfernt, optimal zu sein.
Abbildung 2-2: Dieselbe Seite sieht auf dem iPhone ganz okay aus, aber wir können das Aussehen deutlich verbessern.
16 | Kapitel 2: Einfaches iPhone-Styling
Beispiel 2-1 zeigt eine verkürzte (und übersetzte) Version der HTML-Seite aus Abbildung 2-1. Das ist die HTML-Datei, mit der Sie in diesem Kapitel arbeiten werden. Sie können sie auf der Webseite zum Buch herunterladen, wenn Sie das Styling selbst ausprobieren möchten, während Sie sich durch das Kapitel arbeiten. Die Desktop-Stylesheet-Datei (screen.css) ist nicht abgedruckt, da sie nicht wichtig ist, aber Sie können die CSS-Datei aus dem letzten Kapitel verwenden, wenn Sie ein wenig damit herumspielen möchten. Beispiel 2-1: Das HTML-Dokument, das wir stylen werden Jonathan Stark Jonathan Stark
Über mich
Blog
Ambulante Beratung
Bereitschaft
Entwicklung
Über mich
Jonathan Stark ist ein Webentwickler, Redner und Autor. Seine Beratungsfirma, Jonathan Stark Consulting, Inc., hat Kunden wie Staples, Turner Broadcasting und die PGA Tour gewonnen. ...
Gut, nun ist es an der Zeit, das HTML-Dokument zu bearbeiten: Löschen Sie den existierenden Link auf die Datei screen.css und ersetzen Sie sie durch die gerade gezeigten Zeilen. Auf diese Weise können Sie mit der iPhone-spezifischen CSS-Datei, die ich in diesem Kapitel zeigen werde, noch einmal frisch anfangen.
Die Seitengröße einstellen Solange Sie ihm nichts anderes sagen, geht Safari davon aus, dass Ihre Seite 980px breit ist (Abbildung 2-3). Im Großteil der Fälle funktioniert das gut. Allerdings wollen Sie unsere Inhalte speziell für das kleinere Display des iPhone formatieren. Deshalb müssen Sie Safari das wissen lassen, indem Sie ein meta-Tag mit dem Namen viewport (engl. für Darstellungsfeld) in das head-Element des HTML-Dokuments einfügen: <meta name="viewport" content="user-scalable=no, width=device-width" />
Wenn Sie die Breite nicht setzen, wird die Seite beim ersten Laden sehr weit herausgezoomt sein. Das meta-Tag viewport wird von allen anderen Browsern mit Ausnahme des mobilen Safari ignoriert. Deshalb können Sie es einfügen, ohne sich über die Desktop-Version Ihrer Seite Sorgen zu machen.
Allein durch das Unterdrücken des Desktop-Layouts und durch das Einstellen des Darstellungsfelds haben Sie den iPhone-Anwendern zu einer besseren Sicht auf Ihre Seite verholfen (Abbildung 2-4). Um sie nun wirklich zu beeindrucken, lassen Sie uns mit dem Aufbau des iphone.css-Stylesheets beginnen.
Erste Schritte
| 19
Abbildung 2-3: Das iPhone unterstellt einer normalen Webseite eine Breite von 980px.
Abbildung 2-4: Durch das Festlegen des Darstellungsbereichs auf die Breite des Geräts wird Ihre Seite deutlich lesbarer.
Die iPhone-CSS hinzufügen Es gibt einige Richtlinien für die Benutzeroberfläche (auch »UI« genannt vom engl. »user interface«), die eine iPhone-App wie eine iPhone-App aussehen lassen. Im nächsten Abschnitt werde ich die markante Titelleiste, Listen mit abgerundeten Ecken, fingerfreundliche Links, die wie glänzende Buttons aussehen, und Weiteres hinzufügen. Verwenden Sie Ihren Texteditor, um eine Datei namens iphone.css zu erstellen und den Code aus Beispiel 2-2 einzufügen. Speichern Sie diese Datei im selben Ordner ab, in dem auch das HTML-Dokument liegt.
20 | Kapitel 2: Einfaches iPhone-Styling
Beispiel 2-2: Hier werden einige Website-übergreifende Styles über das HTML-body-Element festgelegt body { background-color: #ddd; color: #222; font-family: Helvetica; font-size: 14px; margin: 0; padding: 0; }
/* Hintergrundfarbe */ /* Textfarbe */
/* rundum frei bleibender Bereich außerhalb von body */ /* rundum frei bleibender Bereich innerhalb von body */
Beachten Sie, dass ich die Schrift für das Dokument generell auf Helvetica gesetzt habe, da sie von den meisten Apps auf dem iPhone genutzt wird. Wenn Sie der App ein professionelles Aussehen geben möchten, sollten Sie möglichst bei Helvetica bleiben, solange Sie keinen triftigen Grund zu einer Änderung haben.
Nun werde ich das div-Element mit dem Namen header angehen in dem der HauptHome-Link (zum Beispiel der Logo-Link) sowie die primäre und sekundäre Navigation enthalten sind. Der erste Schritt ist, den Logo-Link als klickbare Titelleiste zu formatieren. Fügen Sie den folgenden Code in die Datei iphone.css ein: #header h1 { margin: 0; padding: 0; } #header h1 a { background-color: #ccc; border-bottom: 1px solid #666; color: #222; display: block; font-size: 20px; font-weight: bold; padding: 10px 0; text-align: center; text-decoration: none; }
Ich werde die ul-Blocks der primären und sekundären Navigation identisch formatieren, so dass ich den allgemeinen Element-Selektor (zum Beispiel #header ul) anstelle der Element-IDs (zum Beispiel #header ul#utility, #header ul#nav) nutzen kann. #header ul { list-style: none; margin: 10px; padding: 0; } #header ul li a { background-color: #FFFFFF; border: 1px solid #999999; color: #222222;
Bis jetzt ganz einfach, oder? Mit diesem Stückchen CSS haben wir schon eine starke Verbesserung des iPhone-Seitendesigns bewirkt (Abbildung 2-5): #content, #sidebar { padding: 10px; }
Abbildung 2-5: Schon ein bisschen CSS kann die Bedienbarkeit der Seite auf dem iPhone ein großes Stück nach vorne bringen. Sie wundern sich vielleicht, warum ich den padding-Wert für die div-Elemente #content und #sidebar angepasst habe und warum ich das nicht gleich global im body-Element gemacht habe. Der Grund ist, dass es häufig vorkommt, dass Elemente bis an den Rand reichen sollen (wie zum Beispiel die Titelleiste in diesem Beispiel). Deshalb würde ein padding-Wert ungleich null im body-Element, oder in jedem anderen seitenübergreifenden Element, mehr Ärger machen als nötig.
Als Nächstes setzen Sie noch etwas den padding-Wert für die div-Elemente #content und #sidebar, um den Text ein wenig vom Bildschirmrand wegzurücken (Abbildung 2-6). Der Inhalt des div-Elements footer ist auf dieser Seite quasi eine Wiederholung des Navigationselements oben auf der Seite (das ul-Element mit der ID nav). Sie können den Footer in der iPhone-Version also getrost ausblenden, indem Sie folgende Zeilen in die Datei iphone.css einfügen:
22 | Kapitel 2: Einfaches iPhone-Styling
#footer { display: none; }
Abbildung 2-6: Der Text wird vom Rand weggerückt.
iPhone-Look-and-Feel hinzufügen Zeit, noch etwas schicker zu werden. Fangen wir oben auf der Seite an und fügen wir einen 1 Pixel breiten weißen Schlagschatten zum Text des Logo-Links und einen CSSFarbverlauf zum Hintergrund hinzu: #header h1 a { text-shadow: 0px 1px 0px #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); }
In der text-shadow-Deklaration sind die Parameter von links nach rechts: horizontaler Abstand, vertikaler Abstand, Unschärfe und Farbe. Meist werden Sie genau diese Werte Ihren Texten zuweisen, denn das sieht auf einem iPhone nun einmal gut aus. Es macht trotzdem Spaß, mit text-shadow herumzuspielen, denn es kann Ihrem Design einen subtilen, aber raffinierten Touch verleihen. Die Zeile -webkit-gradient verdient besondere Beachtung. Sie ist eine Anweisung an den Browser, im laufenden Betrieb ein Farbverlaufbild zu erstellen. Deshalb kann ein CSSFarbverlauf überall verwendet werden, wo man normalerweise im CSS-Code url() verwenden würde (zum Beispiel Hintergrundbild, Listenbilder). Die Parameter sind von links nach rechts: Farbverlauftyp (kann linear oder radial sein), Startpunkt des Farbverlaufs (mögliche Werte: left top, left bottom, right top, right bottom), Endpunkt des Farbverlaufs, Startfarbe, Endfarbe.
iPhone-Look-and-Feel hinzufügen | 23
Achten Sie darauf, dass Sie die horizontale Position (left, right) vor der vertikalen Position (top, bottom) schreiben und sie nicht vertauschen. Mit anderen Worten: top left, bottom left, top right und bottom right sind unzulässige Werte.
Der nächste Schritt ist, dem Navigationsmenü die traditionellen abgerundeten Ecken zu verpassen: #header ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } #header ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
Wie Sie sehen können, nutze ich die für die Ecken spezifischen Versionen der -webkitborder-radius-Eigenschaft, um einen 8px-Radius für die beiden oberen Ecken des ersten Listenelements und die unteren zwei Ecken des letzten Listenelements zu definieren (Abbildung 2-7).
Abbildung 2-7: Farbverläufe, Textschatten und abgerundete Ecken sind der Anfang für die Transformation Ihrer Website in eine App mit nativem iPhone-Look.
Es wäre zwar cool, wenn man die abgerundeten Ecken direkt für das umschließende ulElement definieren könnte, aber das funktioniert nicht. Wenn Sie es ausprobieren, werden Sie sehen, dass die harten Ecken der Listenelemente die runden Ecken der Liste überlagern und somit den Effekt aufheben.
24 | Kapitel 2: Einfaches iPhone-Styling
Technisch gesehen, könnte man den Effekt der abgerundeten Ecken auf das ul-Element anwenden, wenn man dessen Hintergrundfarbe auf Weiß und die Hintergrundfarbe der Listenelemente transparent setzen würde. Allerdings würde bei einem Klick auf das obere oder untere Listenelement dieses blau hinterlegt, und diese Farbe würde die runden Ecken überlagern, was fürchterlich aussieht. Das beste Verfahren ist, die Ecken den Listenelementen selbst zuzuweisen, wie ich es hier demonstriert habe.
Elementares Verhalten mit jQuery hinzufügen Einer der Hauptgründe für den Spaß, den ich habe, wenn ich Web-Apps für das iPhone entwickle, ist, dass ich mich darauf verlassen kann, dass JavaScript aktiviert ist (was nicht immer der Fall sein muss, wenn man Websites für Desktop-Browser entwickelt). Ich werde unsere Beispielseite nun mit etwas JavaScript versehen, um einige elementare iPhone-typische Funktionalitäten zu unterstützen. Insbesondere möchte ich den Anwendern ermöglichen, den großen, auffälligen Navigationsbereich oben ein- und auszublenden, so dass sie ihn nur sehen, wenn sie wollen. Damit das funktioniert, werde ich noch ein paar neue CSS-Anweisungen schreiben und etwas JavaScript hinzufügen, um das neue CSS zum existierenden HTML hinzuzufügen. Lassen Sie uns zuerst einen Blick auf den neuen CSS-Teil werfen. Schritt eins ist, die ulElemente zu verstecken, damit sie beim ersten Laden der Seite nicht auftauchen. Wenn Sie zu Hause mitmachen, öffnen Sie bitte die Datei iphone.css und fügen folgende Zeilen ein: #header ul.hide { display: none; }
Als Nächstes werde ich den Stil der Schaltfläche definieren, die das Menü ein- und ausblenden soll. Beachten Sie, dass sie noch nicht im HTML-Dokument existiert. Nur zur Information: Der Button wird in HTML so definiert werden: Menü
Ich werde in Kürze auf das HTML für den Button genauer eingehen (Seite 27), kümmern Sie sich also erst einmal nicht weiter darum. Es ist nur wichtig zu wissen, dass es sich um ein div-Element mit der Klasse leftButton handelt, das in der Titelleiste platziert werden soll. Hier kommt das CSS-Layout für den Button (das Sie gleich in Ihre Datei iphone.css übernehmen können): #header div.leftButton { position: absolute;1 top: 7px; left: 6px; height: 30px;2
Für die im Folgenden verwendeten Grafiken können Sie die aus dem jQTouch-Paket nehmen. Laden Sie dazu jQTouch von http://jqtouch.com/ herunter und kopieren Sie die Grafiken aus dem Verzeichnis themes/jqt/img in Ihren images-Unterordner für das HTML-Dokument (legen Sie das Verzeichnis images an, falls es noch nicht existiert). Wir werden jQTouch im Detail in Kapitel 4 besprechen.
1 Fangen wir oben an, wo ich die Position als absolute definiert habe, um das div-Element aus dem Dokumentenfluss zu nehmen. Das erlaubt mir, dessen Pixelkoordinaten für oben und links zu definieren. 2 Hier setze ich die Höhe auf 30px, damit der Button groß genug ist, um bequem darauf tippen zu können. 3 Als Nächstes setze ich den Text fett und weiß, versehe ihn mit einem leichten Schlagschatten und zentriere ihn im div-Element. 4 In CSS ist die Funktion rgb() eine Alternative zur üblichen Hex-Notation, um Farben anzugeben (zum Beispiel #FFFFFF). rgb(255, 255, 255) und rgb(100%, 100%, 100%) sind beide mit #FFFFFF gleichzusetzen. Vor kurzem wurde noch die Funktion rgba() eingeführt, die es erlaubt, einen vierten Parameter anzugeben, der den Alphawert (Deckkraft) der Farbe angibt. Der Bereich der gültigen Werte befindet sich zwischen 0 und 1, wobei 0 vollkommen transparent und 1 völlig deckend bedeutet; Dezimalbrüche zwischen 0 und 1 werden transluzent (Milchglaseffekt) dargestellt. 5 Das Setzen von line-height sorgt dafür, dass der Text im div-Element vertikal nach unten geschoben wird und nicht an die obere Kante stößt. 6 Die Zeilen mit border-width und -webkit-border-image müssen ein wenig erklärt werden. Diese beiden Eigenschaften zusammen ermöglichen es, Bereiche eines einzelnen Bilds dem Randbereich eines Elements zuzuordnen. Das bedeutet, dass man sich hier endlich div-Elemente ohne Texte und das Zerschneiden von Grafiken in topLeftCorner.png, topRightCorner.png und so weiter sparen kann. Wenn sich das div-Element vergrößert, weil der Text länger ist, wird sich das Randbild automatisch strecken, um das zu kompensieren. Dies ist wirklich richtig klasse: Weniger Bilder bedeuten weniger Arbeit, weniger Bandbreitennutzung und kürzere Ladezeiten. In der border-width-Zeile sage ich dem Browser, dass er oben einen Rand von 0px, rechts von 8px, unten von 0px und links einen Rand von 8px setzen soll (die vier Para-
26 | Kapitel 2: Einfaches iPhone-Styling
meter starten oben und gehen dann im Uhrzeigersinn weiter). Beachten Sie, dass weder border-style noch border-color für den Rand gesetzt werden muss. 7 Nachdem border-width definiert ist, kann ich nun das -webkit-border-image setzen. Die fünf Parameter sind von links nach rechts: die URL des Bilds, die obere Breite, die rechte Breite, die untere Breite und die linke Breite (wieder im Uhrzeigersinn von oben). Die URL kann absolut (http://beispiel.de/myBorderImage.png) oder relativ sein. Relative Pfade beziehen sich auf den Speicherort der CSS-Datei, nicht auf den der HTML-Datei, die die CSS-Datei nachlädt. Als ich mich zum ersten Mal mit webkit-border-image beschäftigte, fand ich es seltsam, dass ich die Randbreiten definieren musste, obwohl ich das schon mit border-width getan hatte. Nach einigen schmerzvollen Testversuchen fand ich heraus, dass die Breiten der Eigenschaft webkit-borderimage keine Randbreiten sind, sondern die Breiten der Stücke, die vom Bild abgeschnitten werden sollen. Nehmen wir den rechten Rand als Beispiel, dann sage ich dem Browser, er soll die rechten 8 Pixel des Bilds nehmen und sie dem rechten Rand zuordnen, der ebenfalls 8 Pixel breit ist. Es ist durchaus möglich, hier etwas vermeintlich Sinnloses zu tun, wie zum Beispiel die rechten 4 Pixel eines Bilds einem 20-Pixel-Rand zuzuordnen. Damit das ordentlich funktioniert, muss man optionale Parameter in webkit-border-image setzen, um dem Browser zu sagen, was er mit dem Bildstückchen in dem zur Verfügung stehenden freien Platz machen soll (repeat, stretch, round usw.). In drei Jahren des Testens ist mir kein irrwitziger Grund eingefallen, warum man das tun sollte. Deshalb werde ich hier keinen Platz verschwenden, um diese verwirrende und unpraktische Option eines ansonsten hervorragenden Features zu beschreiben.
Okay, Zeit für etwas JavaScript. Zur Vorbereitung der JavaScripts, die Sie gleich schreiben werden, müssen Sie das HTML-Dokument erweitern, um die Dateien jquery.js und iphone.js einzubinden. Fügen Sie diese beiden Zeilen (in genau dieser Reihenfolge) in den head-Bereich Ihrer HTML-Datei ein: <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="iphone.js">
jQuery-Download, -Dokumentationen und -Einführungen sind unter http:// jquery.com erhältlich. Um jQuery nutzen zu können, müssen Sie es von der Website herunterladen, die Datei (so etwas wie jquery-1.3.2.min.js) in jquery.js umbenennen und eine Kopie in das Verzeichnis der HTML-Datei legen.
Der Hauptzweck des JavaScripts, das wir schreiben müssen, ist es, dem Anwender zu erlauben, das Navigationsmenü ein- und auszublenden. Kopieren Sie das folgende JavaScript in eine neue Datei, die Sie iphone.js nennen und im selben Ordner abspeichern, in dem die HTML-Datei liegt.
Elementares Verhalten mit jQuery hinzufügen | 27
if (window.innerWidth && window.innerWidth <script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="iphone.js"> Jonathan Stark
Machen wir weiter mit der Datei iphone.css. Wie Sie in Beispiel 3-2 sehen können, habe ich einige Eigenschaften aus früheren Beispielen zusammengemischt (zum Beispiel sind einige der Eigenschaften für #header h1 hoch in den Bereich #header gerutscht). Alles in allem sollte es Ihnen aber vertraut vorkommen (falls nicht, schlagen Sie bitte noch einmal in Kapitel 2 nach).
32 | Kapitel 3: Fortgeschrittenes iPhone-Styling
Beispiel 3-2: Die grundlegende CSS-Datei ist eine leicht neu gemischte Version aus früheren Beispielen. body { background-color: #ddd; color: #222; font-family: Helvetica; font-size: 14px; margin: 0; padding: 0; } #header { background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); border-color: #666; border-style: solid; border-width: 0 0 1px 0; } #header h1 { color: #222; font-size: 20px; font-weight: bold; margin: 0 auto; padding: 10px 0; text-align: center; text-shadow: 0px 1px 0px #fff; } ul { list-style: none; margin: 10px; padding: 0; } ul li a { background-color: #FFF; border: 1px solid #999; color: #222; display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none; } ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; } ul li a:active,ul li a:hover { background-color:blue;
Verkehrspolizist | 33
Beispiel 3-2: Die grundlegende CSS-Datei ist eine leicht neu gemischte Version aus früheren Beispielen (Fortsetzung). color:white; } #content { padding: 10px; text-shadow: 0px 1px 0px #fff; } #content a { color: blue; }
Alle Magie dieses Beispiels passiert im JavaScript in der Datei iphone.js. Bitte schauen Sie sich Beispiel 3-3 an, während ich Zeile für Zeile durchgehe. Dieses JavaScript lädt ein Dokument namens index.html und wird nicht ohne dieses funktionieren. Sie sollten die HTML-Datei aus Kapitel 2 wiederverwenden und sicherstellen, dass Sie es mit dem Namen index.html im selben Ordner abspeichern, in dem Sie auch die iphone.html aus diesem Kapitel abgelegt haben. Allerdings wird keiner der Links in index.html funktionieren, wenn die jeweiligen Zielseiten nicht existieren. Sie können die Seiten selbst anlegen oder den Beispielcode von der Seite zum Buch herunterladen (siehe »Codebeispiele verwenden« auf Seite XI). Wenn Sie die Dateien about.html, blog.html und consulting-clinic.html anlegen, haben Sie einige Links zum Spielen. Dazu müssen Sie einfach die Datei index.html einige Male duplizieren und danach umbenennen. Um den Effekt zu verstärken, können Sie die jeweiligen h2-Elemente verändern, damit sie zur Datei passen (zum Beispiel in der blog.html: Blog). Beispiel 3-3: Dieses bisschen JavaScript in der Datei iphone.js ändert jeden Link auf der Seite in eine Ajax-Anfrage $(document).ready(function(){ 1 loadPage(); }); function loadPage(url) {2 if (url == undefined) { $('#container').load('index.html #header ul', hijackLinks);3 } else { $('#container').load(url + ' #content', hijackLinks);4 } } function hijackLinks() {5 $('#container a').click(function(e){6 e.preventDefault();7 loadPage(e.target.href);8 }); }
1 Hier verwende ich die »document ready«-Funktion, damit der Browser die Funktion loadPage() aufruft, sobald das DOM komplett ist.
34 | Kapitel 3: Fortgeschrittenes iPhone-Styling
2 Die Funktion loadPage() akzeptiert einen einzigen Parameter namens url und prüft dann (in der nächsten Zeile), ob ein Wert gesendet wurde. 3 Wenn kein Wert in die Funktion gesendet wurde, wird url undefiniert sein, und diese Zeile wird ausgeführt. Diese und die folgenden Zeilen sind Beispiele für die Funktion load() von jQuery. Diese Funktion ist exzellent dazu geeignet, kurz und schmerzlos Ajax-Funktionalität zu einer Seite hinzuzufügen. Wenn die Zeile ins Deutsche übersetzt würde, stünde da: »Nimm alle ul-Elemente aus dem #header-Element der index.html und füge sie in das #container-Element der aktuellen Seite ein. Wenn du fertig bist, starte die Funktion hijackLinks().« Beachten Sie, dass index. html die Homepage der Website ist. Wenn Ihre Homepage anders heißt, verwenden Sie hier stattdessen deren Dateinamen. 4 Diese Zeile wird ausgeführt, wenn der url-Parameter einen Wert besitzt. Sie besagt: »Nimm das #content-Element der an die Funktion loadPages() übergebenen URL und füge sie in das #container-Element der aktuellen Seite ein. Wenn du damit fertig bist, rufe die Funktion hijackLinks() auf.« 5 Wenn die Funktion load() einmal fertig ist, wird das #container-Element der aktuellen Seite den HTML-Schnipsel enthalten, der empfangen wurde. Danach wird load() die Funktion hijackLinks() aufrufen. 6 In dieser Zeile wird hijackLinks() alle Links im neuen HTML-Dokument finden und mit den nächsten Zeilen einen Click-Handler daran binden. Diesen Click-Handlern wird automatisch ein Ereignisobjekt übergeben, das ich mit dem Funktionsparameter e (engl. event) auslese. Das Ereignisobjekt eines angeklickten Links enthält in e.target.href die URL der fremden Seite. 7 Normalerweise wird ein Webbrowser zu einer neuen Seite springen, sobald ein Link angeklickt wurde. Diese Navigationsweise ist das »Standardverhalten« eines Links. Da wir die Klicks und das Laden von Seiten selbst behandeln wollen, müssen wir dieses Standardverhalten unterbinden. In dieser Zeile habe ich das erledigt, indem ich die eingebaute Methode preventDefault() des Ereignisobjekts aufgerufen habe. Wenn ich diese Zeile ausgelassen hätte, wäre der Browser so pflichttreu gewesen, die aktuelle Seite zu verlassen und zur URL zu springen, die im Link hinterlegt ist. 8 Sobald der Anwender klickt, übergebe ich die URL der fremden Seite an die Funktion loadPage(), und der Zyklus startet erneut. Ich mag an JavaScript besonders, dass man einer Funktion als Parameter eine andere Funktion übergeben kann. Auch wenn das zuerst seltsam aussieht, ist es sehr mächtig und erlaubt es Ihnen, modularen und wiederverwertbaren Code zu schreiben. Wenn Sie mehr darüber wissen möchten, empfehle ich Das Beste an JavaScript von Douglas Crockford (O’Reilly). Tatsächlich sollten Sie sich das Gesamtwerk von Douglas Crockford ansehen, wenn Sie sich mit JavaScript beschäftigen; Sie werden später froh darüber sein.
Verkehrspolizist | 35
Wird die Seite erstmals geladen, werden Click-Handler nicht automatisch ausgeführt; sie werden ausgeführt, wenn der Anwender ein wenig auf der Seite gelesen und sich dann entschieden hat, auf einen Link zu klicken. Das Zuweisen von Click-Handlern ist ein wenig wie das Aufstellen von Sprengfallen; man baut etwas auf, das dann später ausgelöst wird – oder auch nicht. Es ist durchaus sinnvoll, sich ein paar Minuten Zeit zu nehmen, um die Eigenschaften des Ereignisobjekts nachzulesen, das JavaScript in Reaktion auf eine Anwenderaktion im Browser erzeugt. Eine gute Referenz ist unter http://de.selfhtml.org/javascript/objekte/event.htm zu finden.
Ein paar Extras Mit diesem kleinen bisschen HTML, CSS und JavaScript haben wir tatsächlich eine gesamte Website in eine Ein-Seiten-App verwandelt. Allerdings lässt sie noch einige Wünsche offen. Lassen Sie uns das Ganze ein wenig aufpeppen. Da wir dem Browser nicht erlauben, von Seite zu Seite zu springen, bekommt der Anwender keine Rückmeldung über den Fortschritt, während die Daten geladen werden. Wir sollten den Anwender aber irgendwie wissen lassen, dass tatsächlich etwas passiert. Ohne diese Rückmeldung würde sich der Anwender fragen, ob er den Link getroffen oder verfehlt hat, und er würde anfangen, frustriert in der Gegend herumzuklicken. Das kann zu erhöhtem Datentransfer führen und die App instabil werden lassen (bis hin zum Absturz). Wenn Sie diese Web-App in einem lokalen Netzwerk testen, kann die Netzwerkgeschwindigkeit so schnell sein, dass Sie niemals die Laderückmeldung zu Gesicht bekommen. Arbeiten Sie mit Mac OS X, können Sie den gesamten eingehenden Webverkehr verlangsamen, indem Sie ein paar ipfw-Befehle im Terminal eingeben. Diese Kommandos verlangsamen allen Webverkehr beispielsweise auf vier KByte pro Sekunde: sudo ipfw pipe 1 config bw 4KByte/s sudo ipfw add 100 pipe 1 tcp from any to me 80
Wenn Sie den Safari-Desktop-Browser zum Testen der Seiten verwenden, müssen Sie den Hostnamen oder die externe IP-Adresse des Mac in der URL verwenden (zum Beispiel meinmac.local anstelle von localhost). Sind Sie mit den Tests fertig, löschen Sie die Regel mit sudo ipfw delete 100 (Sie können auch alle benutzerdefinierten Regeln mit ipfw flush löschen).
Dank jQuery brauchen wir für diese Art von Rückmeldung nur zwei Zeilen Code. Wir werden einfach ein div-Element mit der Beschriftung »Lade…« in das body-Element einbinden, sobald die Funktion loadPage() aufgerufen wird, und entfernen es wieder, wenn hijackLinks() abgeschlossen ist. Beispiel 3-4 zeigt eine abgewandelte Version von Beispiel 3-3. Die Zeilen, die Sie der Datei iphone.js hinzufügen müssen, sind fett gedruckt.
36 | Kapitel 3: Fortgeschrittenes iPhone-Styling
Beispiel 3-4: Der Seite eine einfache Fortschrittsanzeige hinzufügen $(document).ready(function(){ loadPage(); }); function loadPage(url) { $('body').append('Lade...'); if (url == undefined) { $('#container').load('index.html #header ul', hijackLinks); } else { $('#container').load(url + ' #content', hijackLinks); } } function hijackLinks() { $('#container a').click(function(e){ e.preventDefault(); loadPage(e.target.href); }); $('#progress').remove(); }
Beispiel 3-5 zeigt die CSS-Regeln für das div-Element, die der Datei iphone.css hinzugefügt werden müssen. Das Ergebnis können Sie in Abbildung 3-1 sehen.
Abbildung 3-1: Ohne eine Fortschrittsanzeige irgendeiner Art würde die App so erscheinen, als würde sie nicht reagieren, und der Anwender wäre frustriert. Beispiel 3-5: Dieser CSS-Schnipsel wird der Datei iphone.css hinzugefügt, um die Fortschrittsanzeige zu stylen #progress { -webkit-border-radius: 10px; background-color: rgba(0,0,0,.7); color: white;
Ein paar Extras
| 37
Beispiel 3-5: Dieser CSS-Schnipsel wird der Datei iphone.css hinzugefügt, um die Fortschrittsanzeige zu stylen (Fortsetzung) font-size: 18px; font-weight: bold; height: 80px; left: 60px; line-height: 80px; margin: 0 auto; position: absolute; text-align: center; top: 120px; width: 200px; }
Wie Sie im HTML-Quelltext in Kapitel 2 sehen können, haben meine Seiten jeweils eine einzelne h2-Überschrift am Anfang jeder Seite, die einen schönen Seitentitel abgeben würden (Abbildung 3-2). Damit das ein wenig mehr nach iPhone aussieht, werde ich den Titel dort herausnehmen und in die Titelleiste einfügen (Abbildung 3-3). Wieder einmal eilt jQuery zu Hilfe: Sie können einfach drei Zeilen in die Funktion hijackLinks() einfügen, damit das funktioniert. Beispiel 3-6 zeigt die Funktion hijackLinks() mit diesen Änderungen.
Abbildung 3-2: Bevor die Seitenüberschrift in die Titelleiste verschoben wird …
38 | Kapitel 3: Fortgeschrittenes iPhone-Styling
Abbildung 3-3: … und nach dem Verschieben des Seitentitels in die Titelleiste. Beispiel 3-6: Wir verwenden die h2-Überschrift der Zielseite als Beschriftung der Titelleiste function hijackLinks() { $('#container a').click(function(e){ e.preventDefault(); loadPage(e.target.href); }); var title = $('h2').html() || 'Hallo!'; $('h1').html(title); $('h2').remove(); $('#progress').remove(); }
Beachten Sie, dass ich die Titelzeilen vor der Zeile eingefügt habe, die das »Lade…«-Element entfernt. Ich mag es, wenn die Fortschrittsanzeige ganz zuletzt entfernt wird, da sich die Anwendung dann so anfühlt, als würde sie besser reagieren.
Der doppelte senkrechte Strich (||) in der ersten Zeile des eingefügten Codes (fett gedruckt) ist der logisches-oder-Operator. In Deutsch würde sich die Zeile so lesen: »Setze die Variable title auf den HTML-Inhalt des h2-Elements oder auf die Zeichenkette ›Hallo!‹, wenn es kein h2-Element gibt.« Das ist wichtig, weil beim ersten Laden der Seite keine h2-Überschrift existiert, da wir uns nur die ul-Navigationselemente holen. Dieser Punkt sollte vielleicht verdeutlicht werden. Wenn die Anwender erstmals die URL iphone.html laden, sehen sie nur die Seitennavigationselemente anstelle von irgendeinem Seiteninhalt. Sie sehen erst Inhalte, wenn sie einen Link in dieser ersten Navigationsseite anklicken.
Ein paar Extras
| 39
Einige Seiten meiner Website haben Titel, die länger sind und nicht in die Titelleiste passen (Abbildung 3-4). Ich könnte den Text natürlich in mehrere Zeilen umbrechen lassen, aber das wäre nicht sehr iPhone-isch. Stattdessen habe ich das Layout für #header h1 so angepasst, dass lange Texte mit Auslassungspunkten (engl. ellipsis) am Ende abgekürzt werden (siehe Abbildung 3-5 und Beispiel 3-7). Das ist wohl mein CSS-Lieblingsgeheimtrick.
Abbildung 3-4: Zeilenumbrüche in der Titelleiste sind nicht sehr iPhone-isch ...
Abbildung 3-5: ... aber mit Hilfe von CSS-Auslassungspunkten (engl. ellipsis) können wir die Titelleiste besser aussehen lassen.
40 | Kapitel 3: Fortgeschrittenes iPhone-Styling
Beispiel 3-7: Hinzufügen von Auslassungspunkten zu einem Text, der zu lang für sein umschließendes Element ist #header h1 { color: #222; font-size: 20px; font-weight: bold; margin: 0 auto; padding: 10px 0; text-align: center; text-shadow: 0px 1px 0px #fff; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Hier kommt der Schnelldurchlauf: max-width: 160px weist den Browser an, dass das h1Element nicht breiter als 160px werden darf. Dann befiehlt overflow: hidden dem Browser, alle Inhalte abzuschneiden, die über die Ränder des Elements hinausragen würden. Als Nächstes hält white-space: nowrap den Browser davon ab, die Zeile in mehrere zu umbrechen. Ohne diese Zeile würde die h1-Überschrift einfach höher werden, um den Text in der vorgegebenen Breite aufnehmen zu können. Bleibt zum Schluss noch textoverflow: ellipsis, um die drei Auslassungspunkte an das Ende des zurechtgeschnittenen Texts zu hängen, um anzuzeigen, dass der Anwender nicht den gesamten Text sieht. Nehmen wir als nächstes einmal an, Sie haben eine »Über mich«-Seite, die länger ist als der sichtbare Bereich beim iPhone. Der Anwender besucht die Seite, scrollt nach unten ans Ende und klickt auf einen Link zur Kontaktseite. Wenn Sie dann eine Kontaktseite haben, die mehr als einen Bildschirm voll Inhalt hat, werden die neuen Daten im Fenster, das immer noch ganz nach unten gescrollt ist, angezeigt. Technisch gesehen, ist das sinnvoll, denn wir verlassen die aktuelle (heruntergescrollte) Seite nicht wirklich, allerdings ist das für den Anwender verwirrend. Um dieses Problem zu lösen, habe ich den Befehl scrollTo() in die Funktion loadPage() eingefügt (siehe Beispiel 3-8). Nun wird jedes Mal, wenn der Anwender auf einen Link klickt, die Seite zuerst nach oben springen. Das hat außerdem den nützlichen Nebeneffekt, dass die Ladegrafik auch dann sichtbar ist, wenn der Anwender einen Link weit unten auf der Seite anklickt. Beispiel 3-8: Es ist besser, wieder nach oben zu scrollen, wenn der Anwender zu einer neuen Seite navigiert function loadPage(url) { $('body').append('Lade...'); scrollTo(0,0); if (url == undefined) { $('#container').load('index.html #header ul', hijackLinks); } else {
Ein paar Extras
| 41
Beispiel 3-8: Es ist besser, wieder nach oben zu scrollen, wenn der Anwender zu einer neuen Seite navigiert (Fortsetzung) $('#container').load(url + ' #content', hijackLinks); } }
Wie die meisten anderen hat auch meine Website Links zu externen Seiten (d.h. Seiten, die auf anderen Domains liegen). Ich möchte diese externen Links nicht entführen, da es keinen Sinn ergibt, deren HTML in mein iPhone-spezifisches Layout zu zwängen. In Beispiel 3-9 habe ich eine Abfrage eingebaut, die die URL auf meinen Domainnamen überprüft. Wenn er gefunden wird, wird der Link entführt und der Inhalt in die aktuelle Seite geladen; da ist Ajax im Einsatz. Falls nicht, wird der Browser normal zur URL navigieren. Sie müssen jonathanstark.com in einen passenden Domain- oder Hostnamen Ihrer Website ändern, oder die Links auf Seiten Ihrer Website werden nicht entführt.
Beispiel 3-9: Man kann es externen Seiten erlauben, normal zu laden, indem man den Domainnamen überprüft function hijackLinks() { $('#container a').click(function(e){ var url = e.target.href; if (url.match(/jonathanstark.com/)) { e.preventDefault(); loadPage(url); } }); var title = $('h2').html() || 'Hallo!'; $('h1').html(title); $('h2').remove(); $('#progress').remove(); }
Die Funktion url.match() verwendet eine Sprache, nämlich reguläre Ausdrücke, die oft in anderen Programmiersprachen wie JavaScript, PHP und Perl eingebettet ist. Auch wenn dieser reguläre Ausdruck einfach ist, können komplexere Ausdrücke ein wenig respekteinflößend sein, es lohnt sich aber, sich mit ihnen vertraut zu machen. Hier finden Sie weitere Informationen dazu: http://de.selfhtml.org/javascript/objekte/regexp.htm.
Ihr eigener Zurück-Button Der größte Klops ist zu diesem Zeitpunkt noch, dass der Anwender keine Möglichkeit hat, zu vorherigen Seiten zurückzunavigieren (wie Sie sich erinnern, haben wir alle Links entführt, und der Verlauf von Safari funktioniert deshalb nicht). Gehen wir die Sache an,
42 | Kapitel 3: Fortgeschrittenes iPhone-Styling
indem wir eine Zurück-Schaltfläche oben links in die Titelleiste einfügen. Zuerst werde ich das JavaScript aktualisieren und mich dann um CSS kümmern. Das Hinzufügen eines normalen iPhone-isierten Zurück-Buttons zu einer App bedeutet, dass man die Klick-Historie des Users im Auge behält. Dafür müssen wir zum einen die URL der vorherigen Seite abspeichern, damit wir wissen, wohin wir zurückspringen sollen, und zum anderen den Titel der vorherigen Seite abspeichern, damit wir den ZurückButton beschriften können. Die Umsetzung dieser Funktionalität hat Auswirkungen auf den Großteil des JavaScripts, das wir bisher geschrieben haben. Deshalb werde ich die komplette neue Version Zeile für Zeile abhandeln (siehe Beispiel 3-10). Das Ergebnis sehen Sie in Abbildung 3-6.
Abbildung 3-6: Ohne glänzenden Pfeil-nach-links-Zurück-Button wäre es keine iPhone-App. Beispiel 3-10: Das existierende JavaScript-Beispiel wird erweitert, um einen Zurück-Button zu unterstützen var hist = [];1 var startUrl = 'index.html';2 $(document).ready(function(){3 loadPage(startUrl); }); function loadPage(url) { $('body').append('Lade...');4 scrollTo(0,0); if (url == startUrl) {5 var element = ' #header ul'; } else { var element = ' #content'; } $('#container').load(url + element, function(){6
Ihr eigener Zurück-Button | 43
Beispiel 3-10: Das existierende JavaScript-Beispiel wird erweitert, um einen Zurück-Button zu unterstützen (Fortsetzung) var title = $('h2').html() || 'Hallo!'; $('h1').html(title); $('h2').remove(); $('.leftButton').remove();7 hist.unshift({'url':url, 'title':title});8 if (hist.length > 1) {9 $('#header').append(''+hist[1].title+'');j $('#header .leftButton').click(function(){k var thisPage = hist.shift();l var previousPage = hist.shift(); loadPage(previousPage.url); }); } $('#container a').click(function(e){m var url = e.target.href; if (url.match(/jonathanstark.com/)) {n e.preventDefault(); loadPage(url); } }); $('#progress').remove(); }); }
1 In dieser Zeile initialisiere ich eine Variable namens hist als leeres Array. Da ich sie außerhalb von Funktionen definiert habe, existiert sie global und wird überall auf der Seite verfügbar sein. Bitte beachten Sie, dass ich nicht das komplette englische Wort history verwendet habe, da dieses eine vordefinierte Objekteigenschaft in JavaScript ist und in eigenem Code vermieden werden sollte. 2 Hier definiere ich die relative URL der zu ladenden Seite, wenn der Anwender iphone.html zum ersten Mal besucht. Sie haben vielleicht von früheren Beispielen noch im Hinterkopf, dass ich url == undefined geprüft habe, um das erste Laden zu behandeln, aber in diesem Beispiel werden wir an einigen Stellen die Startseite verwenden. Deshalb ist es sinnvoll, sie global zu definieren. 3 Diese und die nächste Zeile bilden die Definition der »document ready«-Funktion. Wie Sie sehen, reiche ich (anders als in früheren Beispielen) die Startseite an die Funktion loadPage() weiter. 4 Weiter geht es mit der Funktion loadPage(). Diese und die nächste Zeile sind unverändert den früheren Beispielen entnommen. 5 Dieser if…else-Ausdruck entscheidet, welches Element von der neuen Seite geladen werden muss. Wenn wir zum Beispiel die Startseite brauchen, nehmen wir die ulElemente aus dem #header-Element; andernfalls nehmen wir das #content-Element. 6 In dieser Zeile sind der URL-Parameter und das dazugehörige Quellelement miteinander zu dem ersten Parameter, der an die Funktion load() übergeben wird,
44 | Kapitel 3: Fortgeschrittenes iPhone-Styling
verknüpft. Als zweiten Parameter übergebe ich eine anonyme Funktion (eine unbenannte Funktion, die direkt an Ort und Stelle ausprogrammiert wird). Wenn wir uns durch diese anonyme Funktion arbeiten, werden Sie sicher eine starke Ähnlichkeit zur Funktion hijackLinks() erkennen, die durch diese anonyme Funktion ersetzt wurde. Die folgenden drei Zeilen sind beispielsweise identisch mit früheren Beispielen. 7 In dieser Zeile entferne ich das Objekt .leftButton von der Seite. (Das mag seltsam wirken, da ich es noch gar nicht eingefügt habe. Das kommt aber ein paar Schritte weiter unten.) 8 Hier verwende ich die in das JavaScript-Array eingebaute Methode unshift, um ein Objekt am Anfang des Arrays hist einzufügen. Das Objekt, das ich hinzufüge, hat zwei Eigenschaften (url und title), die die beiden Informationen wiedergeben, die wir für die Beschriftung und die Funktion des Zurück-Buttons brauchen. 9 In dieser Zeile verwende ich die in das JavaScript-Array eingebaute Methode length, um herauszufinden, wie viele Objekte sich im hist-Array befinden. Wenn es dort nur ein Objekt gibt, bedeutet das, dass sich der Anwender auf der ersten Seite befindet und wir deshalb keinen Zurück-Button anzeigen müssen. Wenn es allerdings mehr Objekte im hist-Array gibt, müssen wir den Button in der Titelleiste einblenden. j Als Nächstes füge ich das .leftButton-Objekt ein, das ich zuvor erwähnt habe. Die Beschriftung der Schaltfläche soll der Titel der vorherigen Seite sein, den ich mit hist[1].title auslese. JavaScript-Arrays sind nullbasiert, so dass das erste Element (die aktuelle Seite) als Index die 0 trägt. Mit anderen Worten ist Index 0 die aktuelle Seite, Index 1 die vorherige Seite, Index 2 die Seite vor der vorherigen Seite und so weiter. k In diesem Codeblock binde ich eine anonyme Funktion an den Click-Handler des Zurück-Buttons. Denken Sie daran, dass dieser Code ausgeführt wird, wenn der Anwender klickt, und nicht, wenn die Seite lädt. Nachdem also die Seite geladen wurde und der Anwender auf den Zurück-Button geklickt hat, wird dieser Code ausgeführt. l Diese und die nächste Zeile verwenden die Array-Methode shift, um die ersten beiden Elemente des hist-Arrays zu entfernen. Die letzte Zeile der Funktion gibt dann die URL der vorherigen Seite an die Funktion loadPage() weiter. m Die restlichen Zeilen stammen unverändert aus früheren Beispielen. Deshalb werde ich sie hier nicht wiederholen. n Dies ist der Code für die URL-Prüfung, den wir schon weiter oben in diesem Kapitel verwendet haben. Bitte denken Sie daran, jonathanstark.com durch Ihren Domainoder Hostnamen zu ersetzen, da sonst keine Ihrer lokalen Links entführt und in die Seite geladen werden.
Ihr eigener Zurück-Button | 45
Bitte besuchen Sie http://de.selfhtml.org/javascript/objekte/array.htm für eine komplette Liste mit Beschreibungen und Beispielen der Array-Funktionen in JavaScript.
Nun, da wir unseren Zurück-Button haben, bleibt nur noch, ihn mit CSS aufzupeppen (siehe Beispiel 3-11). Ich beginne, indem ich den Text mit font-weight, text-align, lineheight, color und text-shadow verschönere. Dann platziere ich das div-Element genau dort, wo ich es haben möchte, indem ich position, top und left verwende. Anschließend stelle ich sicher, dass zu lange Texte mit Auslassungspunkten abgekürzt werden (maxwidth, white-space, overflow und text-overflow). Zum Schluss füge ich eine Grafik mit border-width und -webkit-border-image hinzu. Anders als das frühere Beispiel hat diese Grafik unterschiedliche Randbreiten links und rechts, da das Bild einen Pfeil nach links darstellt und dadurch asymmetrisch ist. Vergessen Sie nicht, dass Sie eine Grafik für diese Schaltfläche brauchen. Sie müssen sie unter dem Namen back_button.png im Ordner images abspeichern, der im Ordner Ihrer HTML-Datei liegt. Schlagen Sie für Tipps zum Bezug oder der Erstellung der Button-Bilder im Kapitel »Elementares Verhalten mit jQuery hinzufügen« auf Seite 25 nach. Beispiel 3-11: Fügen Sie diese Zeilen der Datei iphone.css hinzu, um die Zurück-Schaltfläche mit einer Randgrafik zu verschönern #header div.leftButton { font-weight: bold; text-align: center; line-height: 28px; color: white; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; position: absolute; top: 7px; left: 6px; max-width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-width: 0 8px 0 14px; -webkit-border-image: url(images/back_button.png) 0 8 0 14; }
Standardmäßig zeigt der mobile Safari einen durchscheinenden Kasten über klickbaren Objekten an, die gerade angetippt wurden (Abbildung 3-7). Da unser Button nicht rechteckig ist, sieht dieser Effekt wenig vorteilhaft aus, aber es ist ganz einfach, ihn abzustellen, was die App gleich viel schöner macht. Der mobile Safari unterstützt eine Eigenschaft namens -webkit-tap-highlight-color, die es Ihnen erlaubt, die Standardfarbe in jede beliebige Farbe zu ändern. Ich möchte die Hervorhebung komplett entfer-
46 | Kapitel 3: Fortgeschrittenes iPhone-Styling
nen, was ich durch das Setzen des Alphawerts auf komplette Transparenz erreicht habe (Beispiel 3-12).
Abbildung 3-7: Standardmäßig zeigt der mobile Safari einen durchscheinenden Kasten über klickbaren Objekten an, die gerade angetippt wurden. Beispiel 3-12: Fügen Sie die fett gedruckte Zeile der Datei iphone.css hinzu, um die StandardAntipphervorhebung des mobilen Safari zu löschen. #header div.leftButton { font-weight: bold; text-align: center; line-height: 28px; color: white; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; position: absolute; top: 7px; left: 6px; max-width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-width: 0 8px 0 14px; -webkit-border-image: url(images/back_button.png) 0 8 0 14; -webkit-tap-highlight-color: rgba(0,0,0,0); }
Im Fall des Zurück-Buttons kann es eine oder zwei Sekunden dauern, bis der Inhalt der vorherigen Seite erscheint. Um Frustrationen vorzubeugen, möchte ich, dass der Button sofort nach dem Drücken angeklickt aussieht. Bei einem Desktop-Browser wäre das eine einfache Sache, denn Sie würden nur Ihrer CSS-Datei eine Definition der :active-Pseudoklasse hinzufügen, um ein alternatives Layout für den Fall anzugeben, dass auf das
Ihr eigener Zurück-Button | 47
Objekt geklickt wurde. Ich weiß nicht, ob es ein Fehler oder eine Sonderfunktion ist, aber diese Vorgehensweise funktioniert nicht beim iPhone, denn der :active-Stil wird ignoriert. Ich habe ein wenig mit :active und :hover herumgespielt, was für Nicht-Ajax-Apps teilweise erfolgreich war, allerdings ist der :hover-Status bei Ajax-Apps wie dieser hier eingeklemmt (der Button bleibt zum Beispiel scheinbar gedrückt, wenn der Finger schon wieder weggenommen wurde). Zum Glück gibt es eine einfache Lösung. Ich verwende jQuery, um die Klasse clicked dem Button hinzuzufügen, sobald der Anwender darauf klickt. Ich habe mich dazu entschieden, eine dunklere Version der Schaltfläche im Beispiel einzufügen (siehe Abbildung 3-8 und Beispiel 3-13). Sie müssen sicherstellen, dass Sie eine Grafik namens back_ button_clicked.png im images-Unterordner haben. Schlagen Sie für Tipps zum Bezug oder der Erstellung der Button-Bilder im Kapitel »Elementares Verhalten mit jQuery hinzufügen« auf Seite 25 nach.
Abbildung 3-8: Es ist nur ein leichter Unterschied, aber der angeklickte Zurück-Button ist ein wenig dunkler als der im Standardzustand. Beispiel 3-13: Fügen Sie die folgenden Zeilen in die Datei iphone.css ein, damit der Zurück-Button angeklickt aussieht, sobald der Anwender darauf tippt #header div.leftButton.clicked { -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14; }
Da ich ein Bild für den gedrückten Zustand verwende, wäre es geschickt, dieses Bild vorzuladen. Andernfalls würde die Grafik des ungedrückten Zustands verschwinden, wenn der Zurück-Button erstmals gedrückt wird, solange die Grafik nachlädt. Ich werde das Vorladen von Bildern im nächsten Kapitel behandeln.
48 | Kapitel 3: Fortgeschrittenes iPhone-Styling
Da die CSS-Datei nun startklar ist, kann ich den Teil der Datei iphone.js anpassen, der für das Zuweisen des Click-Handlers an den Zurück-Button zuständig ist. Zuerst füge ich die Variable e der anonymen Funktion hinzu, um das hereinkommende click-Ereignis aufzufangen. Dann umhülle ich e.target mit einem jQuery-Selektor und rufe die jQueryFunktion addClass() auf, um meine CSS-Klasse clicked der Schaltfläche zuzuweisen: $('#header .leftButton').click(function(e){ $(e.target).addClass('clicked'); var thisPage = hist.shift(); var previousPage = hist.shift(); loadPage(previousPage.url); });
Ein besonderer Hinweis an alle CSS-Gurus unter Ihnen: Die CSS-SpriteTechnik ist hier keine Option, da sie die Definition von Offsets für die Bilder benötigt. Bild-Offsets werden von der Eigenschaft -webkit-borderimage aber nicht unterstützt.
Ein Icon für den Home-Bildschirm hinzufügen Hoffentlich gefällt den Anwendern Ihre Web-App so gut, dass sie auf ihrem Home-Bildschirm ein Icon (auch »Webclip-Icon« genannt) für Ihre App ablegen. Das machen sie, indem sie auf das Pluszeichen unten im Safari-Fenster drücken (Abbildung 3-9), dann auf ZUM HOME-BILDSCHIRM drücken (Abbildung 3-10) und dann oben rechts auf HINZUFÜGEN klicken (Abbildung 3-11). Standardmäßig wird das iPhone ein Icon aus einem Vorschaubild der Seite (inklusive Position und Zoomfaktor) erstellen, dem es runde Ecken und einen Glanzeffekt hinzufügt (Abbildung 3-12).
Abbildung 3-9: Hinzufügen eines Webclip-Icons zum Home-Bildschirm. Schritt 1: Drücken Sie auf den Plus-Button unten im Safari-Fenster.
Ein Icon für den Home-Bildschirm hinzufügen | 49
Abbildung 3-10: Schritt 2: Klicken Sie im Dialog auf »Zum Home-Bildschirm«.
Abbildung 3-11: Schritt 3: Klicken Sie oben rechts auf »Hinzufügen«.
Abbildung 3-12: Schritt 4: Ein 57 x 57 Pixel großes Bild erscheint im Home-Bildschirm.
Um das Icon für den Home-Bildschirm anzupassen, liefern coole Programmierer ein benutzerdefiniertes Webclip-Icon mit. Dafür ist es am einfachsten, ein einziges Icon für die gesamte Website zu definieren, indem man eine Datei namens apple-touch-icon.png in das Stammverzeichnis des Webservers legt. Die Datei sollte 57 x 57 Pixel groß sein und sowohl ohne abgerundete Ecken als auch ohne Glanzeffekt angelegt sein, da das iPhone
50 | Kapitel 3: Fortgeschrittenes iPhone-Styling
diese Effekte automatisch hinzufügt. Wenn Sie das iPhone daran hindern möchten, die Effekte anzuwenden, ändern Sie den Dateinamen einfach in apple-touch-icon-precomposed.png. In manchen Fällen werden Sie ein Webclip-Icon für eine Seite haben möchten, das sich von dem der gesamten Website unterscheidet. Sie können das erreichen, indem Sie eine der beiden folgenden Zeilen in den head-Bereich der »Verkehrspolizist«-HTML-Datei iphone.html ablegen (und gegebenenfalls MYCUSTOMICON.PNG durch einen absoluten oder relativen Pfad zum Bild ersetzen):
Möchten Sie vorgerenderte Bilder nutzen, verwenden Sie einen Eckradius von 10px oder mehr, da das iPhone die Ecken sonst mit einem Radius von 10px abschneiden wird. Auf jeden Fall wird bei vorgerenderten Bildern aber der Glanzeffekt weggelassen.
Vollbildmodus Sie möchten gern ein Viertel des vertikalen Platzes (104px, um genau zu sein) vom mobilen Safari zurückgewinnen? Dann fügen Sie einfach die folgende Zeile in den head-Bereich der »Verkehrspolizist«-HTML-Datei iphone.html ein, und Ihre Web-App wird sich im Vollbildmodus öffnen, nachdem Sie vom Webclip-Icon aus gestartet wurde. <meta name="apple-mobile-web-app-capable" content="yes" />
Ich hätte Ihnen schon früher von dieser Funktion erzählt, aber sie ist erst sinnvoll, wenn alle Links mit Ajax entführt wurden. Sobald der Anwender auf einen nicht entführten Link klickt – einen, der auf eine fremde Seite verweist –, wird sich der mobile SafariBrowser starten und die Seite ganz normal laden. Dieses Verhalten ist perfekt für das Beispiel, an dem wir gearbeitet haben, denn externe Links (Amazon, Twitter, Facebook usw.) werden sich in Safari öffnen.
Die Statusleiste verändern Haben Sie einmal das Metatag apple-mobile-web-app-capable hinzugefügt, haben Sie die Möglichkeit, die Farbe der 20px hohen Statusleiste ganz oben am Bildschirm mit dem Metatag apple-mobile-web-app-status-bar-style zu verändern. Die normale, graue Safari-Statuszeile ist der Standard (default), allerdings kann man sie auch auf Schwarz (black) setzen (siehe Abbildung 3-13). Wenn Sie als Wert black-translucent verwenden, wird sie halb transparent und außerdem vom Dokumentenfluss abgekoppelt. Das heißt, dass die Web-App beim ersten Laden um 20px nach oben (also hinter die Statusleiste) geschoben wird. Deshalb werden Sie gegebenenfalls die Position Ihrer Titelleiste anpassen müssen, um das zu kompensieren. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
Vollbildmodus | 51
Veränderungen an der Farbe der Statusleiste werden erst wirksam, wenn die Web-App im Vollbildmodus gestartet wurde.
Abbildung 3-13: Der Vollbildmodus bringt etwa 25% mehr Platz und erlaubt es Ihnen, die Farbe der Statusleiste zu verändern.
Eine eigene Startgrafik hinzufügen Wenn eine Web-App im Vollbildmodus startet, wird dem Anwender ein Bildschirmfoto der App präsentiert, während die erste Seite lädt. Ich bin kein Freund dieser Lösung, denn es sieht so aus, als könne man die App bereits bedienen. Klickt man allerdings irgendwo, passiert nichts. Außerdem ist es ein Screenshot von der Stelle, an der der Anwender die Web-App zuletzt verlassen hat (inklusive Scrollposition) – nicht sehr attraktiv. Glücklicherweise erlaubt uns der mobile Safari, eine eigene Startgrafik zu definieren, die während des Ladens der Web-App angezeigt wird. Wenn Sie eine solche Startgrafik hinzufügen möchten, erstellen Sie eine 320 x 460 Pixel große PNG-Datei und speichern diese in denselben Ordner, in dem auch die HTML-Datei liegt. Als Nächstes fügen Sie die folgende Zeile in den head-Bereich der Datei iphone.html ein (ersetzen Sie dabei myCustomStartupGraphic.png durch einen absoluten oder relativen Pfad zu Ihrer Grafik):
Beim nächsten Start der App über das Webclip-Icon wird zuerst noch das alte Verhalten ausgelöst, bis die neue Startgrafik geladen wurde. Bei späteren Starts wird direkt Ihre Startgrafik gezeigt (Abbildung 3-14).
52 | Kapitel 3: Fortgeschrittenes iPhone-Styling
Abbildung 3-14: Eine App, die im Vollbildmodus startet, kann über eine eigene Startgrafik verfügen.
Was Sie gelernt haben In diesem Kapitel haben Sie gelernt, wie Sie eine normale Website in eine Vollbild-AjaxApp umwandeln, komplett mit Fortschrittsindikator, einem nativ aussehenden ZurückButton und einem eigenen Webclip-Icon. Im nächsten Kapitel werden Sie erfahren, wie Sie Ihre App zum Leben erwecken, indem Sie native Benutzeroberflächenanimationen hinzufügen. Ja – jetzt kommen die Themen, die richtig Spaß machen!
Was Sie gelernt haben | 53
Kapitel 4
KAPITEL 4
Animation
iPhone-Apps haben eine Menge markanter Animationscharakteristiken, die für den Anwender eine Bedeutung haben und ihn Zusammenhänge erschließen lassen. Es schieben sich zum Beispiel Seiten nach links, wenn Sie per Link auf Detailseiten gehen, und wieder nach rechts, wenn Sie zurückgehen. In diesem Kapitel werden Sie lernen, wie Sie Ihrer App charakteristische Verhaltensweisen, wie das Schieben, den Seiten-umblätternEffekt und mehr, beibringen. Durch diese Änderungen, in Kombination mit Ajax und dem Vollbildmodus, ist Ihre Web-App dann von einer nativen App fast nicht mehr zu unterscheiden.
Mit ein wenig Hilfe von unserem Freund Ich bin ganz ehrlich: Eine Webseite so zu animieren wie eine native iPhone-App, ist mühsam. Glücklicherweise hat ein unternehmungslustiger Typ aus Philadelphia namens David Kaneda eine JavaScript-Bibliothek namens jQTouch geschrieben, die die mobile Webentwicklung ein ganzes Stück einfacher macht. jQTouch ist ein Open SourcejQuery-Plug-in, das alles behandelt, was wir im letzten Kapitel gelernt haben, und zusätzlich eine ganze Bootsladung von komplexem Zeug, das man nur mit großem Aufwand von null an selbst programmieren könnte. Sie können die aktuelle Version von jQTouch unter http://jqtouch.com/ herunterladen.
Zur Hauptseite gleiten Wir werden eine einfache App zum Zählen von Kalorien entwickeln, die Kilo heißen soll und dem Anwender ermöglicht, Essenseinträge für ein bestimmtes Datum hinzuzufügen und zu löschen. Alles in allem wird es sechs Bedienfelder geben: HAUPTSEITE, EINSTEL-
| 55
LUNGEN, DATEN, DATUM, NEUER EINTRAG und ÜBER KILO. Wir werden mit zwei Bedienfeldern starten und uns dann weiter vorarbeiten.
Ich werde einigen HTML-Elementen (toolbar, edgetoedge, arrow, button, back usw.) CSS-Klassen zuordnen. Diese Klassen beziehen sich immer auf vordefinierte CSS-Klassen-Selektoren aus dem Standard-jQTouch-Layout. Behalten Sie bitte im Hinterkopf, dass Sie Ihre eigenen Klassen verwenden können, indem Sie das existierende jQTouch-Layout anpassen oder Ihr eigenes ganz neu erstellen; ich nutze hier die Standardversion.
Legen wir los, indem wir eine Datei namens index.html erstellen und den HTML-Code für die Hauptseite und das ÜBER KILO-Bedienfeld aus Beispiel 4-1 einfügen.
Abbildung 4-1: Kilo vor der Einbindung von jQTouch … Beispiel 4-1: Der HTML-Code für die Hauptseite und das Über Kilo-Bedienfeld Kilo 1 2 Kilo
3
Über Kilo
4
Über Kilo Zurück5
56 | Kapitel 4: Animation
Beispiel 4-1: Der HTML-Code für die Hauptseite und das Über Kilo-Bedienfeld (Fortsetzung)
Mit Kilo können Sie über Ihr Essen Tagebuch führen.
Dieser HTML-Code besteht hauptsächlich aus einem head-Bereich mit einem Titel und einem body-Bereich mit zwei Kindern, beides div-Elemente: 1 Dieses div-Element wird (genauso wie das div-Element about, das ein paar Zeilen tiefer definiert wird) ein Bedienfeld der Applikation, da es ein direkter Abkömmling des body-Elements ist. 2 In jedem dieser Bedienfeld-div-Elemente gibt es ein div-Element mit der Klasse toolbar. Diese toolbar-Klasse ist im jQTouch-Layout speziell vordefiniert, um ein Element zu einer klassischen iPhone-Titelleiste umzustylen. 3 Diese ungeordnete Liste hat die Klasse edgetoedge, die jQTouch anweist, die Liste im sichtbaren Bereich von ganz links bis ganz nach rechts auszudehnen. 4 In dieser Zeile gibt es ein Listenelement, das einen Link beinhaltet, dessen href auf das ÜBER KILO-Bedienfeld zeigt. Das Einfügen der arrow-Klasse in das li-Element ist optional; damit wird ein Pfeil nach rechts am rechten Rand des Elements eingefügt. 5 Jedes toolbar-Element beinhaltet ein einzelnes h1-Element, das den Titel des Bedienfelds angibt. In dieser Zeile gibt es einen Link mit den Klassen button und back, die jQTouch befehlen, die Schaltfläche wie einen Zurück-Button aussehen zu lassen. Beachten Sie, dass die Eigenschaft href des Buttons auf # gesetzt ist. Normalerweise würde das dem Browser sagen, dass er zum Anfang der Seite zurückkehren soll. Wenn man allerdings jQTouch verwendet, navigiert es stattdessen zum vorherigen Bedienfeld zurück. In fortgeschritteneren Szenarien werden Sie eventuell lieber einen Anker verwenden (zum Beispiel #home), der dem Zurück-Button sagt, dass er zu einem bestimmten Bedienfeld springen soll, ohne auf die vorherige Seite zu achten.
Da die einfache HTML-Datei fertig ist, wird es nun Zeit, jQTouch zur Party einzuladen. Wenn Sie jQTouch einmal heruntergeladen und im Verzeichnis der HTML-Datei ausgepackt haben, müssen Sie lediglich ein paar Zeilen Code in den head-Bereich Ihrer Seite einfügen (Beispiel 4-2). Für dieses und andere Beispiele in diesem Buch müssen Sie jQTouch von der Seite http://jqtouch.com herunterladen, auspacken und die Verzeichnisse jqtouch und themes in denselben Ordner verschieben, in dem auch die HTML-Datei liegt. Außerdem müssen Sie im Ordner jqtouch die JavaScript-Datei (zum Beispiel jquery.1.3.2.min.js) in jquery.js umbenennen.
Zur Hauptseite gleiten | 57
Beispiel 4-2: Das Hinzufügen dieser Zeilen in den head-Bereich Ihres HTML-Dokuments aktiviert jQTouch 1 2 <script type="text/javascript" src="jqtouch/jquery.js">3 <script type="text/javascript" src="jqtouch/jqtouch.js">4 <script type="text/javascript">5 var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' });
1 Ich binde die Datei jqtouch.css ein. Diese Datei definiert einige grundlegende strukturelle Designregeln, die sehr spezifisch für die Behandlung von Animationen, Ausrichtung und andere iPhone-typische Details sind. Diese Datei wird zwingend benötigt, und es sollte keinen Grund für Sie geben, sie zu verändern. 2 Ich binde die CSS-Datei für mein ausgewähltes Layout ein, in diesem Fall das »jqt«Layout, das mit jQTouch ausgeliefert wird. Die Klassen, die ich in meiner HTMLDatei verwendet habe, passen zu den Selektoren in diesem CSS-Dokument. jQTouch wird standardmäßig mit zwei Layouts ausgeliefert. Sie können aber auch Ihr eigenes Design erstellen, indem Sie entweder ein vorhandenes Layout duplizieren und verändern oder es ganz neu aufsetzen. 3 Da jQTouch jQuery benötigt, binde ich das hier ein. jQTouch bringt bereits eine Kopie von jQuery mit, aber Sie können auch auf eine andere Version verweisen, wenn Sie möchten. 4 Hier binde ich jQTouch selbst ein. Bitte beachten Sie, dass Sie jQTouch nach jQuery einbinden, da sonst nichts funktionieren wird. 5 So kommen wir zum script-Block, in dem ich das jQTouch-Objekt initialisiere und zwei Eigenschaften Werte zuweise: icon und statusBar. jQTouch bietet einige Eigenschaften an, mit denen man das Verhalten und das Erscheinungsbild der App steuern kann. Sie werden in diesem Buch einige Beispiele dafür finden, sie sind alle optional. Allerdings werden Sie fast immer wenigstens ein paar von ihnen anwenden. In diesem Fall sagt icon jQTouch, wo das Webclip-Icon zu finden ist, und statusBar stellt die Farbe der 20px-Statuszeile am oberen Bildrand für den Vollbildmodus ein. Übrigens geht jQTouch davon aus, dass man den Vollbildmodus verwenden möchte, denn … na eben. Sollten Sie wider Erwarten doch einmal keinen Vollbildmodus wünschen, fügen Sie der Eigenschaftenliste einfach fullScreen: false hinzu.
Der Unterschied zwischen der App vor jQTouch (Abbildung 4-1) und danach (Abbildung 4-2) ist dramatisch, aber das wirklich Erstaunliche ist, dass Sie mit zehn Zeilen
58 | Kapitel 4: Animation
Code den großartigen links/rechts-Schiebeeffekt eingebaut haben. Außerdem haben Sie den Vollbildmodus aktiviert, die Farbe der Statusleiste gesetzt und Ihr eigenes WebclipIcon hinzugefügt. jQTouch ist echt krass, und wir haben gerade einmal angefangen.
Abbildung 4-2: … und Kilo nach jQTouch.
Das Daten-Bedienfeld hinzufügen Lassen Sie uns nun das DATEN-Bedienfeld hinzufügen. Es wird eine Liste relativer Daten beinhalten, die aktuell beginnen und fünf Tage zurückreichen (Abbildung 4-3). Fügen Sie den HTML-Code für das DATEN-Bedienfeld (wie in Beispiel 4-3 gezeigt) direkt nach dem ÜBER KILO-Bedienfeld und noch vor dem schließenden ein. Beispiel 4-3: Der HTML-Code für das Daten-Bedienfeld Daten Zurück
heute
gestern
vor zwei Tagen
vor drei Tagen
vor vier Tagen
vor fünf Tagen
Wie das ÜBER KILO-Bedienfeld hat auch das DATEN-Bedienfeld eine Titelleiste mit Titel und Zurück-Button. Nach der Titelleiste gibt es eine ungeordnete edgetoedge-Liste mit Links. Beachten Sie, dass alle Links eindeutige IDs (0 bis 5), aber dasselbe href-Ziel (#date) haben – dazu später mehr.
Das Daten-Bedienfeld hinzufügen | 59
Abbildung 4-3: Das Daten-Bedienfeld verfügt über eine Titelleiste mit einem Zurück-Button und eine Liste anklickbarer Daten.
Als Nächstes müssen Sie die Hauptseite mit einem Link auf das DATEN-Bedienfeld versehen. Fügen Sie die im Folgenden fett gedruckte Zeile dem div-Element mit der ID home in der Datei index.html hinzu: Kilo
Daten
Über Kilo
Abbildung 4-4: Die Hauptseite besitzt nun einen Link zum Daten-Bedienfeld.
60 | Kapitel 4: Animation
Und schon haben wir der App ein neues Bedienfeld hinzugefügt (siehe Abbildung 4-4). Wenn man auf ein Element im DATEN-Bedienfeld klickt, passiert allerdings noch nichts. Lassen Sie uns das beheben, indem wir das DATUM-Bedienfeld einfügen.
Das Datum-Bedienfeld hinzufügen Das DATUM-Bedienfeld sieht den anderen Bedienfeldern sehr ähnlich, hat aber einige Erweiterungen (siehe Beispiel 4-4). Fügen Sie den HTML-Code für das DATUM-Bedienfeld direkt nach dem DATEN-Bedienfeld, aber noch vor dem schließenden ein. Beispiel 4-4: Der HTML-Code für das Datum-Bedienfeld Datum Zurück +1
2 <span >Beschreibung <span >000 <span >Löschen
1 Die Titelleiste des DATUM-Bedienfelds hat einen weiteren Button. Wenn er angeklickt wird, soll das NEUER EINTRAG-Bedienfeld (das wir noch nicht eingebaut haben) angezeigt werden. Ich habe dem Link die Klasse slideup gegeben, die jQTouch sagt, dass das Zielbedienfeld von unten nach oben auf den Bildschirm geschoben werden soll (anders als beim normalen Navigationsverhalten horizontal von rechts nach links). 2 Der nächste untypische Aspekt dieses Bedienfelds ist, dass ich ein Listenelement definiert habe, für das ich die Eigenschaft style auf display:none gesetzt habe, wodurch es unsichtbar wird. Wie Sie gleich sehen können, werde ich diesen Listeneintrag als Vorlage für neue Einträge verwenden, sobald sie erstellt worden sind. Zu diesem Zeitpunkt gibt es noch keine Einträge, und das Bedienfeld wird bis auf die Titelleiste leer sein. Da Sie nun das DATUM-Bedienfeld eingefügt haben, wird nach einem Klick auf einen Eintrag im DATEN-Bedienfeld das leere DATUM-Bedienfeld (Abbildung 4-5) hineingeschoben.
Das Datum-Bedienfeld hinzufügen | 61
Abbildung 4-5: Bis auf die Titelleiste ist das Datum-Bedienfeld anfangs leer.
Das Neuer Eintrag-Bedienfeld hinzufügen Beispiel 4-5 zeigt den Quelltext für das NEUER EINTRAG-Bedienfeld. Fügen Sie ihn in die Datei index.html direkt vor ein. Beispiel 4-5: Der HTML-Code für das Neuer Eintrag-Bedienfeld Neuer Eintrag Abbrechen1 2
3
1 Das Erste, das man beim NEUER EINTRAG-Bedienfeld hervorheben muss, ist, dass es keinen Zurück-Button mehr hat, sondern stattdessen eine Abbrechen-Schaltfläche. Abbrechen-Buttons verhalten sich in jQTouch genauso wie Zurück-Buttons, indem sie die aktuelle Seite in umgekehrter Weise aus dem Bild heraus animieren, in der sie hineinanimiert wurde. Allerdings sieht der Abbrechen-Button im Gegensatz zum Zurück-Button nicht wie ein Pfeil nach links aus.
62 | Kapitel 4: Animation
Ich habe hier einen Abbrechen-Button verwendet, da sich das NEUER EINTRAG-Bedienfeld von unten ins Bild schiebt und deshalb auch wieder nach unten verschwindet. Es wäre verwirrend, wenn der Button nach links zeigt, beim Drücken das Bedienfeld aber nach unten animiert wird.
2 Dieses HTML-Formular beinhaltet eine ungeordnete Liste mit drei Einträgen: zwei Textfeldern und einer Absenden-Schaltfläche. Das Einbetten eines Formulars in Listenelemente erlaubt es dem jQTouch-Layout, das Formular wie in Abbildung 4-6 zu stylen. Jedes Texteingabefeld besitzt ein paar definierte Attribute: type
Definiert das Formularelement als einzeiliges Eingabefeld. placeholder
Ein Text, der im Eingabefeld angezeigt werden soll, solange es noch leer ist. name
Der Name, dem der vom Anwender eingegebene Wert zugeordnet wird, sobald das Formular abgeschickt wurde. id
Eine im Kontext der gesamten Seite eindeutige ID für das Element. autocapitalize
Eine spezielle Einstellung für den mobilen Safari-Browser, die es Ihnen erlaubt, die voreingestellte automatische Großschreibefunktion zu deaktivieren. autocorrect
Eine spezielle Einstellung für den mobilen Safari, die es Ihnen erlaubt, die voreingestellte automatische Rechtschreibkorrektur zu deaktivieren. autocomplete
Diese Einstellung erlaubt das Abschalten der automatischen Vervollständigungsfunktion des mobilen Safari. 3 Das class-Attribut der EINTRAG SPEICHERN-Schaltfläche erfordert ein paar erklärende Worte. Das iPhone zeigt die Tastatur an, sobald sich der Cursor in einem Eingabefeld befindet. Diese Tastatur hat unten rechts eine GO-Taste, die das Formular absendet, sobald sie gedrückt wurde. Wenn Sie die Absendefunktion entführen, wie wir es hier tun, wird der Cursor nicht aus dem Eingabefeld entfernt, und die Tastatur bleibt im Bild. Um das zu beheben, bietet jQTouch eine bequeme Methode, die automatisch den Cursor aus dem aktiven Eingabefeld nimmt, sobald ein Formular abgesendet wurde. Um von dieser Funktionalität zu profitieren, müssen Sie dem Absende-Button des Formulars lediglich die submit-Klasse hinzufügen. Abbildung 4-7 zeigt das NEUER EINTRAG-Bedienfeld in Aktion. Bis jetzt habe ich noch nichts unternommen, damit der Eintrag wirklich abgespeichert wird, wenn der Anwender auf EINTRAG SPEICHERN klickt. Das werden wir aber in Kapitel 5 behandeln.
Das Neuer Eintrag-Bedienfeld hinzufügen
| 63
Abbildung 4-6: Das jqt-Layout leistet beim Formatieren von Formularen gute Dienste.
Abbildung 4-7: Tastatureingabe beim Neuer Eintrag-Formular.
Das Einstellungen-Bedienfeld Wir haben bislang noch keinen Button definiert, der den Anwender in das EINSTELLUNGEN-Bedienfeld navigieren lässt, also fügen wir einen in die Titelleiste der Hauptseite ein (Abbildung 4-8). Alles was wir dazu brauchen, ist die fett gedruckte Zeile in folgendem Code: Kilo Einstellungen1
64 | Kapitel 4: Animation
Daten
Über Kilo
1 In dieser Zeile wird der Button eingefügt. Beachten Sie, dass ich dem Link die Klasse flip zugewiesen habe. Sie weist jQTouch an, dass die Animation von der Hauptseite zum EINSTELLUNGEN-Bedienfeld eine Rotation um die vertikale Achse sein soll. Um das noch ein wenig echter aussehen zu lassen, wird die Seite während der Animation ein wenig nach hinten verschoben, genau so wie es die auf dem iPhone vorinstallierte Wetter-App macht. Schick, oder?
Abbildung 4-8: Der Einstellungen-Button wurde der Titelleiste auf der Hauptseite hinzugefügt.
Im Vergleich mit dem NEUER EINTRAG-Bedienfeld sieht der HTML-Code des EINSTELLUNGEN-Bedienfelds sehr vertraut aus (Beispiel 4-6). Es gibt ein weiteres Texteingabefeld,
und einige Attribute sind weggefallen oder haben andere Werte, aber im Prinzip sind sie gleich. Fügen Sie den Code auf die gleiche Weise wie bei den anderen Bedienfeldern in Ihre HTML-Datei ein. Wenn Sie fertig sind, sollte das EINSTELLUNGEN-Bedienfeld wie in Abbildung 4-9 aussehen. Genauso wie das NEUER EINTRAG-Formular speichert auch das EINSTELLUNGEN-Formular noch keine Informationen ab. Das steht, wie bereits gesagt, im nächsten Kapitel auf dem Plan. Beispiel 4-6: Der HTML-Code für das Einstellungen-Bedienfeld Einstellungen Abbrechen
Das Einstellungen-Bedienfeld | 65
Beispiel 4-6: Der HTML-Code für das Einstellungen-Bedienfeld (Fortsetzung)
Abbildung 4-9: Das Einstellungen-Bedienfeld.
Alles zusammenfügen Damit haben wir es! Mit weniger als 100 Zeilen Code haben wir eine iPhone-isierte Benutzeroberfläche für eine Applikation mit sechs Bedienfeldern inklusive Animationen für die Seitenübergänge erstellt. Beispiel 4-7 zeigt den gesamten fertigen HTML-Code. Beispiel 4-7: Der fertige HTML-Code für die App mit sechs Bedienfeldern Kilo <script type="text/javascript" src="jqtouch/jquery.js"> <script type="text/javascript" src="jqtouch/jqtouch.js">
66 | Kapitel 4: Animation
Beispiel 4-7: Der fertige HTML-Code für die App mit sechs Bedienfeldern (Fortsetzung) <script type="text/javascript"> var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' }); Kilo Einstellungen
Daten
Über Kilo
Über Kilo Zurück
Mit Kilo können Sie über Ihr Essen Tagebuch führen.
Daten Zurück
heute
gestern
vor zwei Tagen
vor drei Tagen
vor vier Tagen
vor fünf Tagen
Datum Zurück +
<span >Beschreibung <span >000
Alles zusammenfügen | 67
Beispiel 4-7: Der fertige HTML-Code für die App mit sechs Bedienfeldern (Fortsetzung) <span >Löschen
Neuer Eintrag Abbrechen
Einstellungen Abbrechen
jQTouch anpassen Durch eine Vielzahl von Eigenschaften, die man im Konstruktor von jQTouch einstellen kann, erlaubt jQTouch es Ihnen, sein Standardverhalten einzustellen. Wir haben das bereits bei icon und statusBar gesehen, aber es gibt noch einige weitere Eigenschaften, die Sie kennen sollten (siehe Tabelle 4-1).
68 | Kapitel 4: Animation
Tabelle 4-1: jQTouch-Einstellungen Eigenschaft
Standardwert
Erwartet
Bemerkung
addGlossToIcon
true
true oder false.
Wenn true gesetzt ist, wird dem iPhone erlaubt, dem Webclip-Icon den Glanz-Effekt hinzuzufügen.
backSelector
'.back, .cancel, .goback'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die das »Zurück«Verhalten von jQTouch auslösen, wenn sie angeklickt werden. Dieses Verhalten lässt das aktuelle Bedienfeld auf die umgekehrte Weise aus dem Bild animieren, wie es hereinanimiert wurde.
cacheGetRequests
true
true oder false.
Wenn true gesetzt ist, werden GETAnfragen automatisch zwischengespeichert, sodass darauffolgende Klicks auf die bereits geladenen Daten verweisen.
cubeSelector
'.cube'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die eine Würfelanimation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.
dissolveSelector
'.dissolve'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die eine Überblendanimation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.
fadeSelector
'.fade'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die eine Ausblendanimation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.
fixedViewport
true
true oder false.
Wenn true gesetzt ist, wird der Anwender daran gehindert, die Seite größer oder kleiner zu zoomen.
flipSelector
'.flip'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die eine Umdrehanimation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.
formSelector
'form'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die vom CSS-Layout wie ein Formular angezeigt werden sollen.
fullScreen
true
true oder false.
Wenn true gesetzt ist, wird die Seite im Vollbildmodus gestartet, wenn der Anwender sie vom Home-Bildschirm gestartet hat. Hat keinen Effekt, wenn die App im mobilen Safari läuft.
fullScreenClass
'fullscreen'
String.
Klassenname, der dem body-Element hinzugefügt wird, wenn die App im Vollbildmodus läuft. Erlaubt es Ihnen, CSS-Regeln zu definieren, die nur den Vollbildmodus betreffen.
icon
null
null oder ein relativer oder
Das Webclip-Icon für die App. Das ist das Bild, das angezeigt wird, wenn der Anwender die App auf dem Home-Bildschirm abspeichert.
absoluter Pfad zur 57px × 57px großen PNG-Bilddatei.
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die eine horizontale Schiebeanimation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.
slideupSelector
'.slideup'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die eine vertikale Schiebeanimation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.
startupScreen
null
null oder ein relativer oder
Übergeben Sie einen relativen oder absoluten Pfad zu einem 320px × 460px großen Startbild für Vollbildmodus-Apps. Wenn Sie statusBar auf black-translucent setzen, verwenden Sie bitte ein 320px × 480px großes Startbild.
absoluter Pfad zu einer Bilddatei.
statusBar
'default'
default, black-translucent, black
Definiert das Erscheinungsbild der 20px-Statusleiste am oberen Rand einer Vollbild-App.
submitSelector
'.submit'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Selektor, der, wenn er angeklickt wird, sein Elternformular absendet (und die Tastatur ausblendet).
swapSelector
'.swap'
Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.
Definiert Elemente, die eine Austauschanimation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.
useAnimations
true
true oder false
Auf false setzen, um alle Animationen zu deaktivieren.
Was Sie gelernt haben In diesem Kapitel haben Sie gelernt, wie man einer Web-App nativ aussehende Animationen mit jQTouch hinzufügt. Im nächsten Kapitel erfahren Sie, wie Sie die neuen lokalen Speicherfunktionen und die clientseitigen Datenbankfunktionen von HTML5 verwenden, um die Daten der App dauerhaft zu speichern.
70 | Kapitel 4: Animation
Kapitel 5
KAPITEL 5
Clientseitige Datenspeicherung
Die meisten Softwareapplikationen müssen irgendeine Art von dauerhafter Datenspeicherung unterstützen, um nützlich zu sein. Wenn es um Web-Apps ging, wurde diese Aufgabe früher meist über eine serverseitige Datenbank oder das Setzen von Cookies im Browser gelöst. Seit dem Aufkommen von HTML5 haben Webentwickler ein paar mehr Optionen: localStorage, sessionStorage und clientseitige Datenbanken.
localStorage und sessionStorage localStorage und sessionStorage (zusammen auch als »key/value storage«, d.h. Schlüs-
sel/Wert-Speicherung bezeichnet) sind Cookies sehr ähnlich, da sie es JavaScript erlauben, Paare von Namen und Werten so abzuspeichern, dass sie auch nach mehrmaligen neuen Seitenaufrufen wieder auslesbar sind. Allerdings werden die Daten bei localStorage und sessionStorage (anders als bei Cookies) nicht per Browseranfrage über die Leitung geschickt – sie leben ausschließlich im Client. Deshalb ist es durchaus möglich, deutlich mehr Daten abzuspeichern, als es bei Cookies wünschenswert wäre. Während ich dieses Buch schreibe, sind die Größenbeschränkungen der Browser für localStorage und sessionStorage noch im Fluss.
localStorage und sessionStorage funktionieren auf die gleiche Weise. Sie unterscheiden sich nur in der Dauer der Speicherung und im Gültigkeitsbereich: localStorage
Daten werden sogar über das Schließen des Fensters hinaus gespeichert und sind für alle Fenster (oder Tabs) zugänglich, die von derselben Datenquelle geladen werden (Domainname, Protokoll und Port müssen gleich sein). Das ist zum Beispiel für die Einstellungen einer App sinnvoll.
| 71
sessionStorage
Die Daten werden mit dem Fensterobjekt gespeichert. Andere Fenster und Tabs kennen die Daten nicht. Außerdem werden die Daten beim Schließen des Fensters verworfen. Das ist für fensterspezifische Zustände (zum Beispiel das Hervorheben des aktiven Tabs oder die Sortierung einer Tabelle) interessant. In allen folgenden Beispielen können Sie überall dort, wo Sie localStorage sehen, stattdessen auch sessionStorage einsetzen.
Das Setzen eines Werts ist ganz einfach: localStorage.setItem('age', 40);
Das Zugreifen auf gespeicherte Werte ist genauso einfach: var age = localStorage.getItem('age');
Mit diesem Befehl können Sie ein spezielles Schlüssel/Wert-Paar löschen: localStorage.removeItem('age');
Oder Sie löschen gleich alle Schlüssel/Wert-Paare: localStorage.clear();
Vorausgesetzt, dass Ihre Schlüsselnamen gültige JavaScript-Bezeichner sind (keine Leerzeichen, keine Sonderzeichen außer dem Unterstrich usw.), können Sie auch folgende alternative Syntax verwenden: localStorage.age = 40 // Wert für age setzen var age = localStorage.age; // Wert für age auslesen delete localStorage.age; // age aus dem Speicher löschen
Die Schlüssel von localStorage und sessionStorage werden getrennt verwaltet. Wenn Sie für beide die gleichen Schlüsselnamen verwenden, geraten diese nicht in Konflikt miteinander.
Die Benutzereinstellungen in localStorage speichern Lassen Sie uns das anhand eines praktischen Beispiels ausprobieren. Wie wäre es, wenn wir die Formularwerte aus dem EINSTELLUNGEN-Bedienfeld der Beispiel-App, die wir in Kapitel 4 erstellt haben, abspeicherten? Wir werden in diesem Kapitel eine Menge JavaScript schreiben, und ich möchte damit nicht den head-Bereich der HTML-Datei überladen. Damit der Code ordentlich organisiert bleibt, werde ich eine Datei namens kilo.js anlegen und das HTML-Dokument im head-Bereich anpassen, um sie einzubinden:
72 | Kapitel 5: Clientseitige Datenspeicherung
Kilo <script type="text/javascript" src="jqtouch/jquery.js"> <script type="text/javascript" src="jqtouch/jqtouch.js"> <script type="text/javascript" src="kilo.js">
Aufmerksamen Lesern wird aufgefallen sein, dass ich zusätzlich den jQTouch-Konstruktor aus dem head-Element des HTML-Dokuments entfernt habe. Er ist allerdings nicht verschwunden, sondern ich habe ihn nur in die Datei kilo.js verschoben. Stellen Sie also bitte sicher, dass Sie ihn aus der HTML-Datei gelöscht haben, legen Sie die Datei kilo.js im selben Ordner an und fügen Sie dort den folgenden Code ein. Laden Sie das HTMLDokument danach im Browser neu und schauen Sie nach, ob es noch funktioniert. var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' });
Nun müssen wir die Absendefunktionalität des EINSTELLUNGEN-Formulars mit einer eigenen Funktion namens saveSettings() überschreiben. Dank jQTouch kann ich das mit einer einzigen Codezeile erledigen, die ich in der »document ready«-Funktion einfüge. Der folgende Code gehört mit in die Datei kilo.js: $(document).ready(function(){ $('#settings form').submit(saveSettings); });
Das Endergebnis dieser Umbauarbeiten ist, dass die Funktion saveSettings() aufgerufen wird, wenn der Anwender das Formular abschickt, und das dass Formular nicht auf die herkömmliche Weise abgesendet wird. Wenn die Funktion saveSettings() aufgerufen wird, liest es die Werte der drei Formulareingabefelder aus, indem es die jQuery-Funktion val() verwendet. Jeder Wert wird in einer localStorage-Variable mit dem gleichen Namen abgespeichert. Fügen Sie dazu bitte die folgende Funktion Ihrer Datei kilo.js hinzu: function saveSettings() { localStorage.age = $('#age').val(); localStorage.budget = $('#budget').val(); localStorage.weight = $('#weight').val(); jQT.goBack(); return false; }
Sobald die Werte gesichert sind, nutze ich die jQuery-Funktion goBack() (in der vorletzten Zeile), um das Bedienfeld zu verwerfen und zur vorherigen Seite zurückzukehren. Danach gebe ich false zurück, um die Standardfunktionalität des Formular-Absendens
localStorage und sessionStorage | 73
zu umgehen. Würde ich diese Zeile weglassen, würde die Seite neu laden, und das ist hier nicht gewünscht. Zu diesem Zeitpunkt kann der Anwender nun die App starten, zum EINSTELLUNGENBedienfeld wechseln und das Formular absenden, um die eingegebenen Werte in localStorage zu speichern. Da wir die Eingabefelder nicht löschen, nachdem der Anwender das Formular abgeschickt hat, sind die Werte noch eingetragen, wenn der Anwender zum EINSTELLUNGENBedienfeld zurückkehrt. Allerdings liegt das nicht daran, dass wir die Werte in localStorage abgespeichert haben, sie sind lediglich dort immer noch eingetippt. Deshalb werden sie beim nächsten Start der App leer sein, wenn der Anwender zum EINSTELLUNGENBedienfeld zurückkehrt, obwohl die Werte gespeichert wurden. Um das zu berichtigen, ergänzen wir in kilo.js eine Funktion namens loadSettings(), die alle Einstellungswerte laden soll: function loadSettings() { $('#age').val(localStorage.age); $('#budget').val(localStorage.budget); $('#weight').val(localStorage.weight); }
Die Funktion loadSettings() ist das Gegenstück zur Funktion saveSettings(): Sie schreibt die mit val() aus localStorage ausgelesenen Werte in die entsprechenden Eingabefelder des EINSTELLUNGEN-Formulars. Nun, da wir eine Funktion loadSettings() haben, müssen wir diese nur noch aufrufen. Der sinnvollste Zeitpunkt dazu ist, sobald die App startet. Damit das passiert, ist eine weitere einzelne Zeile in die Datei kilo.js notwendig: $(document).ready(function(){ $('#settings form').submit(saveSettings); loadSettings(); });
Leider gibt es durch das Laden der Einstellungen beim Start der App ein Schlupfloch, das auftritt, wenn der Anwender das EINSTELLUNGEN-Bedienfeld öffnet, dort Werte verändert und dann den Abbrechen-Button drückt, ohne das Formular abzusenden. In diesem Fall sind die geänderten Werte immer noch eingetragen, wenn der Anwender das EINSTELLUNGEN-Bedienfeld neu aufruft, obwohl sie nicht gespeichert wurden. Wenn der Anwender allerdings die App neu startet und dann in das EINSTELLUNGEN-Bedienfeld wechselt, werden die gespeicherten Werte angezeigt, da die Funktion loadSettings() beim Start aufgerufen wurde. Es gibt mehrere Möglichkeiten, diese Situation zu bereinigen, aber ich denke, dass die beste Variante die Aktualisierung der Anzeige ist, sobald das EINSTELLUNGEN-Bedienfeld damit beginnt, sich hinein- oder herauszubewegen.
74 | Kapitel 5: Clientseitige Datenspeicherung
Dank jQTouch ist das ein einfacher Fall für die Funktion pageAnimationStart(), an die wir unsere Funktion loadSettings() anbinden können. Ersetzen Sie einfach die gerade eingefügte Zeile durch die im Folgenden fett gedruckte Codezeile: $(document).ready(function(){ $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); });
Der JavaScript-Code, der sich jetzt in der Datei kilo.js befindet, bietet nun eine dauerhafte Datenspeicherung des EINSTELLUNGEN-Bedienfelds. Wenn Sie sich den Code dafür ansehen, ist das eigentlich keine große Sache. Hier ist die komplette Version der Datei kilo.js zum jetzigen Zeitpunkt: var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' }); $(document).ready(function(){ $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); }); function loadSettings() { $('#age').val(localStorage.age); $('#budget').val(localStorage.budget); $('#weight').val(localStorage.weight); } function saveSettings() { localStorage.age = $('#age').val(); localStorage.budget = $('#budget').val(); localStorage.weight = $('#weight').val(); jQT.goBack(); return false; }
Das ausgewählte Datum in sessionStorage speichern Mein Ziel ist es, das DATUM-Bedienfeld so umgebaut zu haben, dass es, wenn es angezeigt wird, die Datenbank nach Einträgen für das ausgewählte Datum durchsucht und diese in einer edgetoedge-Liste anzeigt. Dafür müssen wir allerdings wissen, welches Datum im DATEN-Bedienfeld ausgewählt wurde. Außerdem möchte ich dem Anwender erlauben, Einträge in der Datenbank zu speichern und sie wieder zu löschen. Dazu muss ich die Unterstützung des Plussymbols, das schon oben im DATUM-Bedienfeld existiert, und des Löschen-Buttons in der Datum-Listeneintragvorlage (mehr dazu später) einbauen. Der erste Schritt ist, das DATUM-Bedienfeld wissen zu lassen, welcher Eintrag angeklickt wurde, um es vom DATEN-Bedienfeld aus aufzurufen. Mit dieser Information kann man
localStorage und sessionStorage | 75
den passenden Datumszusammenhang berechnen. Dazu füge ich einige Zeilen zur »document ready«-Funktion in der Datei kilo.js ein: $(document).ready(function(){ $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); $('#dates li a').click(function(){1 var dayOffset = this.id;2 var date = new Date();3 date.setDate(date.getDate() - dayOffset); sessionStorage.currentDate = date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear();4 refreshEntries();5 }); });
1 In dieser Zeile verwende ich die jQuery-Funktion click(), um meinen eigenen Code an das click-Event der Links im DATEN-Bedienfeld anzubinden. 2 Hier lese ich die ID des angeklickten Objekts aus und speichere sie in der Variablen dayOffset. Wie Sie sich erinnern werden, haben die Links IDs von 0 bis 5, so dass die ID des angeklickten Links zur Zahl der Tage passen wird, die wir zur Berechnung des angeklickten Datums brauchen (null Tage in der Vergangenheit entspricht heute, ein Tag in der Vergangenheit ist gestern, zwei Tage in der Vergangenheit entspricht vorgestern usw.). In diesem Zusammenhang wird das Schlüsselwort this eine Referenz auf das Objekt enthalten, das Ziel des click-Ereignisses war.
3 In dieser Zeile erzeuge ich ein neues JavaScript-Date-Objekt und speichere es in einer Variablen namens date ab. Anfangs zeigt dieses Datum auf den Zeitpunkt, an dem das Objekt erstellt wurde. Deshalb subtrahiere ich in der nächsten Zeile den Wert von dayOffset vom Ergebnis der Funktion getDate() und verwende setDate, um das Datum abzuspeichern. 4 Hier erstelle ich einen Datums-String im Format DD.MM.YYYY und speichere ihn in sessionStorage unter currentDate ab. Die Methode getMonth() des date-Objekts liefert Werte zwischen 0 und 11 zurück, wobei 0 für Januar steht. Deshalb muss ich 1 hinzuaddieren, damit der formatierte String den richtigen Wert hat.
5 Abschließend rufe ich die Funktion refreshEntries() auf. Die Aufgabe dieser Funktion ist es, das hereinkommende DATUM-Bedienfeld aufgrund des Datums, das im DATEN-Bedienfeld angeklickt wurde, zu aktualisieren. Vorerst aktualisiere ich hier nur die Beschriftung der Titelleiste mit dem ausgewählten Datum, damit Sie sehen
76 | Kapitel 5: Clientseitige Datenspeicherung
können, dass es funktioniert. Ohne diese Anpassung würden Sie nur das Wort »Datum« sehen, wie in Abbildung 5-1 gezeigt wird. Abbildung 5-2 zeigt die Funktion refreshEntries() in Aktion. Hier der Code für die Funktion refreshEntries(): function refreshEntries() { var currentDate = sessionStorage.currentDate; $('#date h1').text(currentDate); }
Abbildung 5-1: Vor der Einbindung der Funktion refreshEntries() steht im Titel einfach nur Datum.
Abbildung 5-2: Nach der Einbindung der Funktion refreshEntries() gibt der Titel das ausgewählte Datum wieder.
localStorage und sessionStorage | 77
Als Nächstes kommen wir zu einer mächtigeren und komplexeren Datensicherungsmethode, die wir verwenden werden, um die Essenseinträge des Anwenders im DATUMBedienfeld abzuspeichern.
Clientseitige Datenbank Von allen existierenden HTML5-Funktionen ist die clientseitige Datenbankunterstützung diejenige, die meinen Zwecken am meisten dient. Sie erlaubt den Entwicklern, eine einfache, aber mächtige JavaScript-Datenbank-API zu nutzen, um Daten dauerhaft in einem relationalen Format zu speichern. Entwickler können Standard-SQL-Ausdrücke verwenden, um Tabellen anzulegen, Zeilen einzufügen, zu bearbeiten, auszuwählen und zu löschen und vieles mehr. Die JavaScriptDatenbank-API unterstützt sogar Transaktionen. Wir reden hier über SQL, also über ein relativ komplexes Thema. Allerdings ist das eine derart revolutionäre Funktion, dass die Zeit, die Sie in dieses Thema investieren, sich wieder auszahlen wird.
Eine Datenbank erstellen Nun, da unser DATUM-Bedienfeld weiß, welches Datum vom Anwender ausgewählt wurde, haben wir alle nötigen Informationen, um den Anwender Einträge erstellen zu lassen. Bevor wir die Funktion createEntry() schreiben können, müssen wir eine Datenbanktabelle einrichten, um die erfassten Daten zu speichern. Dazu fügen wir einige Zeile in die Datei kilo.js ein: var db;1 $(document).ready(function(){ $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); $('#dates li a').click(function(){ var dayOffset = this.id; var date = new Date(); date.setDate(date.getDate() - dayOffset); sessionStorage.currentDate = date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear(); refreshEntries(); }); var shortName = 'Kilo';2 var version = '1.0'; var displayName = 'Kilo'; var maxSize = 65536; db = openDatabase(shortName, version, displayName, maxSize);3 db.transaction(4 function(transaction) {5 transaction.executeSql(6 'CREATE TABLE IF NOT EXISTS entries ' + ' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
78 | Kapitel 5: Clientseitige Datenspeicherung
' date DATE NOT NULL, food TEXT NOT NULL, ' + ' calories INTEGER NOT NULL );' ); } ); });
1 Zuerst fällt auf, dass ich eine Variable namens db mit globaler Sichtbarkeit in die Applikation eingefügt habe. Sie wird dazu genutzt, auf die Verbindung zur Datenbank zu verweisen, sobald sie einmal aufgebaut wurde. Ich habe absichtlich eine globale Variable verwendet, da wir von überall darauf zugreifen müssen. 2 In diesen vier Zeilen definiere ich einige Variablen für den Aufruf von openDatabase: shortName
Ein String, der verwendet wird, um auf die Datenbankdatei auf der »Festplatte« zu verweisen. version
Eine Zahl, die Sie für Updates und Abwärtskompatibilität verwenden können, wenn Sie einmal das Datenmodell verändern müssen. displayName
Ein String, der dem Anwender in der Benutzeroberfläche angezeigt wird. Dieser Anzeigename wird zum Beispiel in den Anwendungseinstellungen auf dem iPhone angezeigt, wenn Sie EINSTELLUNGEN → SAFARI → DATENBANKEN öffnen. maxSize
Die maximale Zahl von Kilobytes, von der Sie denken, dass Ihre Datenbank sie belegen könnte. Die Datenbank-Größenbeschränkungen werden zurzeit von den Browserherstellern noch umgesetzt, deshalb ist ein wenig Ausprobieren während der Tests Ihrer App angesagt. Die aktuelle Voreinstellung ist beim iPhone 5 MByte. Wenn Ihre Datenbank größer wird, wird der Anwender gefragt, ob er den Größenzuwachs erlauben möchte. Sollte er die Vergrößerung erlauben, wird die Grenze auf 10 MByte angehoben. Lehnt er die Erweiterung ab, wird der Fehler QUOTA_ERR zurückgegeben. Tabelle 5-1 zeigt eine Liste von Datenbank-Fehlercodes.
3 Da ich nun die Parameter vorbereitet habe, kann ich in dieser Zeile openDatabase aufrufen und die Verbindung in der Variablen db abspeichern. Eine Datenbankverbindung haben wir jetzt, nun müssen wir noch eine Tabelle namens entries anlegen, falls sie noch nicht existiert. 4 Alle Datenbankabfragen müssen im Kontext einer Transaktion stattfinden. Deshalb starte ich hier eine, indem ich die Methode transaction im db-Objekt aufrufe. Die restlichen Zeilen beinhalten eine Funktion, die der Transaktion als einziger Parameter übergeben wird.
Clientseitige Datenbank | 79
5 Hier beginne ich eine anonyme Funktion und übergebe ihr die Transaktion. Um ehrlich zu sein, ergibt es für mich keinen Sinn, die Transaktion an ihre eigene CallbackFunktion zu übergeben, aber genau das müssen Sie hier tun. 6 In der Funktion angekommen, rufe ich die Methode executeSQL des Objekts transaction auf, um eine normale CREATE TABLE-Anfrage auszuführen. Wenn Sie die App nun so ausführen würden, würde sie eine Datenbank namens KILO auf Ihrem iPhone anlegen. Sie können das sehen, indem Sie EINSTELLUNGEN → SAFARI → DATENBANKEN → KILO aufrufen. Abbildung 5-3 zeigt die Datenbankeinstellungen.
Abbildung 5-3: Das Datenbank-Bedienfeld des iPhone
In der Desktop-Version von Safari können Sie sogar die clientseitige Datenbank ansehen und mit ihr interagieren, indem Sie im Menü ENTWICKLER → WEBINFORMATIONEN EINBLENDEN wählen und dann in der Leiste den Punkt DATENBANKEN auswählen. (Wenn das ENTWICKLER-Menü nicht angezeigt wird, gehen Sie bitte in die Einstellungen von Safari und aktivieren das ENTWICKLER-Menü in den erweiterten Einstellungen.) Der Punkt DATENBANKEN heißt im WebKit STORAGE (also Speicher). Ich denke, dass dieser Begriff besser passt als »Datenbanken«, daher wäre ich nicht überrascht, wenn er in einer späteren Version von Safari übernommen würde.
Die Webinformationen von Safari sind sehr hilfreich, wenn man auf Fehlersuche ist. Standardmäßig erscheinen sie unten im Browserfenster. Wenn Sie auf die Schaltfläche IN EINEM SEPARATEN FENSTER ÖFFNEN unten links klicken, erscheinen die Webinformationen in einem eigenen Fenster, wie es in Abbildung 5-4 zu sehen ist. Dieses Fenster erlaubt Ihnen sogar, beliebige SQL-Anfragen an die Datenbank zu senden, indem Sie auf den Namen der Datenbank klicken (siehe Abbildung 5-5).
80 | Kapitel 5: Clientseitige Datenspeicherung
Abbildung 5-4: Die Datenbankrubrik der Webinformationen von Safari, in der einige Beispieleinträge angezeigt werden.
Zeilen einfügen Nun, da wir eine Datenbank so weit eingerichtet haben, dass sie einige Einträge empfangen kann, können wir damit beginnen, die Funktion createEntry() zu bauen. Zuerst müssen Sie das submit-Ereignis des #createEntry-Formulars überschreiben. Das können Sie erledigen, indem Sie die Funktion createEvent() in der »document ready«-Funktion an das submit-Event binden. (Hier zeige ich nur die ersten paar Zeilen der Datei kilo.js mit der fett gedruckten neu hinzugefügten Zeile): $(document).ready(function(){ $('#createEntry form').submit(createEntry); $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); ...
Wenn jetzt ein Anwender das #createEntry-Formular absendet, wird die Funktion createEntry() ausgeführt. Fügen Sie als Nächstes die folgenden Zeilen Ihrer Datei kilo.js hinzu, um einen Eintrag in der Datenbank anzulegen: function createEntry() { var date = sessionStorage.currentDate;1 var calories = $('#calories').val(); var food = $('#food').val(); db.transaction(2 function(transaction) { transaction.executeSql(
Clientseitige Datenbank | 81
Abbildung 5-5: Im Datenbankbereich der Webinformationen kann man beliebige SQL-Ausdrücke in der Datenbank ausführen. 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);', [date, calories, food], function(){ refreshEntries(); jQT.goBack(); }, errorHandler ); } ); return false; }
1 Ich definiere hier einige Variablen, die ich in der SQL-Abfrage verwenden werde. Wie Sie bestimmt noch wissen, wird das Datum, auf das der Anwender im DATENBedienfeld geklickt hat, in sessionStorage.currentDate gespeichert. Die anderen beiden Werte (calories und food) werden aus dem NEUER EINTRAG-Formular ausgelesen. Das geschieht auf die gleiche Weise, die wir zuvor schon beim EINSTELLUNGENFormular gesehen haben. 2 Danach öffne ich eine Datenbanktransaktion und führe einen Aufruf von executeSql() aus. Ich übergebe der Methode vier Parameter: 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);'
Das ist die Anweisung, die ausgeführt werden soll. Die Fragezeichen sind Daten-Platzhalter.
82 | Kapitel 5: Clientseitige Datenspeicherung
[date, calories, food]
Dies ist ein Array mit Werten, die an die Datenbank gesendet werden. Die Positionen passen zu den Fragezeichen-Platzhaltern im SQL-Ausdruck. function(){refreshEntries();jQT.goBack();}
Diese anonyme Funktion wird ausgeführt, wenn die Ausführung der SQLAnweisung erfolgreich ist. errorHandler
Dies ist der Name der Funktion, die ausgeführt wird, wenn die SQL-Anfrage fehlschlägt.
Fehlerbehandlung Wenn wir annehmen, dass das Einfügen erfolgreich war, wird die anonyme Funktion, die als dritter Parameter übergeben wurde, ausgeführt. Sie ruft die Funktion refreshEntries() auf (die im Moment nur den Titel des DATUM-Bedienfelds ändert, aber bald noch die Werte anzeigen wird, die Sie eingegeben haben), und sie ruft die jQTouchFunktion goBack() auf, die das NEUER EINTRAG-Bedienfeld ausblendet und zum DATUMBedienfeld zurückkehrt. Wenn das Einfügen nicht erfolgreich ist, soll die Funktion errorHandler() ausgeführt werden. Fügen Sie hierfür folgende Zeilen der Datei kilo.js hinzu: function errorHandler(transaction, error) { alert('Ups. Der Fehler war '+error.message+' (Code '+error.code+')'); return true; }
Dem Error-Handler werden zwei Parameter übergeben: das Transaktionsobjekt und das Fehlerobjekt. Hier verwende ich das Fehlerobjekt, um dem Anwender eine Alarmmeldung mit der Nachricht und dem Fehlercode zu zeigen. Error-Handler müssen true oder false zurückgeben. Wenn ein Error-Handler true zurückgibt (zum Beispiel »Ja, dies ist ein fataler Fehler«), wird die Ausführung angehalten und ein sogenanntes »Rollback« angestoßen, d.h. die komplette Transaktion wird rückgängig gemacht. Gibt ein Error-Handler aber false zurück (zum Beispiel »Nein, dies ist kein fataler Fehler«), wird die Ausführung fortgesetzt. In manchen Fällen werden Sie sich anhand der Art des Fehlers entscheiden wollen, ob Sie true oder false zurückgeben. Tabelle 5-1 zeigt die aktuell möglichen Fehlercodes, die
den Spezifikationen der W3C-Webdatenbank-Arbeitspapiere entsprechen: Tabelle 5-1: Webdatenbankfehlercodes Konstante
Code
Situation
UNKNOWN_ERR
0
Die Transaktion ist aus Gründen fehlgeschlagen, die nicht auf die Datenbank selbst zurückzuführen sind und von keinem anderen Fehlercode abgedeckt werden.
DATABASE_ERR
1
Die Anweisung ist aus Datenbankgründen fehlgeschlagen, die von keinem anderen Fehlercode abgedeckt werden.
Die Operation ist fehlgeschlagen, weil die aktuelle Datenbankversion nicht die war, die sie sein sollte. Zum Beispiel: Eine Anweisung hat herausgefunden, dass die aktuelle Versionsnummer nicht mehr mit der des Database- oder des DatabaseSync-Objekts übereinstimmt. Oder den Methoden Database.changeVersion() oder DatabaseSync.changeVersion() wurde eine Version übergeben, die nicht mit der aktuellen Version übereinstimmt.
TOO_LARGE_ERR
3
Die Anweisung ist fehlgeschlagen, weil die Daten, die von der Datenbank zurückgeliefert wurden, zu groß waren. SQL_LIMIT könnte hilfreich sein, um die Größe des Ergebnisses zu verringern.
QUOTA_ERR
4
Die Anweisung ist fehlgeschlagen, da nicht genug Speicherplatz übrig war, oder die Speicherquota wurde überschritten, und der Anwender hat der Datenbank nicht mehr Speicher erlaubt.
SYNTAX_ERR
5
Die Anweisung ist wegen eines Syntaxfehlers fehlgeschlagen, oder die Anzahl der Argumente passte nicht zur Anzahl der Fragezeichen-Platzhalter in der Anweisung, oder die Anweisung hat versucht, eine unerlaubte Anweisung zu verwenden, wie zum Beispiel BEGIN, COMMIT oder ROLLBACK, oder die Anweisung hat versucht, ein Verb zu verwenden, das die Datenbank verändern würde, aber die Transaktion hatte nur Lesezugriff.
CONSTRAINT_ERR
6
Eine INSERT-, UPDATE- oder REPLACE-Anweisung ist wegen eines Randbedingungsfehlers fehlgeschlagen. Beispielsweise wurde eine Zeile eingefügt, und der Wert für den Primärschlüssel wurde bereits in einer vorhandenen Zeile vergeben.
TIMEOUT_ERR
7
Die Transaktion konnte nicht in einer vernünftigen Zeitspanne abgeschlossen werden.
Vielleicht ist Ihnen aufgefallen, dass die Error-Handler-Funktion ein Transaktionsobjekt zusätzlich zum Fehlerobjekt akzeptiert. Es ist für manche Fälle denkbar, dass Sie eine SQL-Anweisung innerhalb des Error-Handlers ausführen möchten, eventuell um den Fehler zu protokollieren oder einige Metadaten zur Fehleranalyse abzuspeichern. Der Transaktionsobjekt-Parameter erlaubt Ihnen, weitere Aufrufe von executeSql() aus dem Error-Handler heraus zu starten, wie hier: function errorHandler(transaction, error) { alert('Ups. Der Fehler war '+error.message+' (Code '+error.code+')'); transaction.executeSql('INSERT INTO errors (code, message) VALUES (?, ?);', [error.code, error.message]); return false; }
Bitte beachten Sie hier besonders, dass man false vom Error-Handler zurückgeben muss, damit der executeSql()-Aufruf funktioniert. Wenn true zurückgegeben wird (oder auch einfach nichts), wird die gesamte Transaktion – inklusive dieser SQL-Anweisung – zurückgespult, wodurch das gewünschte Ergebnis nicht erreicht wird.
84 | Kapitel 5: Clientseitige Datenspeicherung
Transaktions-Callback-Handler Auch wenn ich das nicht in meinen Beispielen mache, sollten Sie wissen, dass Sie auch für die Methode transaction() selbst Success- und Error-Handler definieren können. Das gibt Ihnen einen geeigneten Ort, um Code nach der Ausführung langer Serien von executeSql()-Anweisungen zu platzieren. Seltsamerweise ist die definierte Reihenfolge für die Callbacks der transaction-Methode error und dann success (die umgekehrte Reihenfolge von executeSql()). Hier ist eine Version der Funktion createEntry() mit den Transaktions-Callbacks am Ende: function createEntry() { var date = sessionStorage.currentDate; var calories = $('#calories').val(); var food = $('#food').val(); db.transaction( function(transaction) { transaction.executeSql( 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);', [date, calories, food], function(){ refreshEntries(); jQT.goBack(); }, errorHandler ); }, transactionErrorHandler, transactionSuccessHandler ); return false; }
Zeilen auswählen und Ergebnissätze behandeln Der nächste Schritt ist der Ausbau der Funktion refreshEntries(), damit sie mehr macht, als nur die Titelleiste mit dem ausgewählten Datum zu versehen. Ich möchte insbesondere die Datenbank nach Einträgen für das Datum durchsuchen und sie an das #date ul-Element anfügen, indem ich die versteckte entryTemplate-HTML-Vorlage für die Strukturierung verwende. Es ist schon etwas länger her, dass wir uns mit dem Code beschäftigt haben, also sehen Sie hier das DATUM-Bedienfeld nochmals: Datum Zurück +
Clientseitige Datenbank | 85
1 <span >Beschreibung <span >000 <span >Löschen
1 Erinnern Sie sich daran, dass ich das style-Attribut des li-Elements auf display: none gesetzt habe, was dazu führt, dass es auf der Seite nicht angezeigt wird. Ich habe das gemacht, damit ich den HTML-Schnipsel als Vorlage für die Datenbankzeilen verwenden kann. Hier kommt die gesamte Funktion refreshEntries(), die Sie verwenden müssen, um die existierende refresh-Entries()-Funktion zu ersetzen: function refreshEntries() { var currentDate = sessionStorage.currentDate;1 $('#date h1').text(currentDate); $('#date ul li:gt(0)').remove();2 db.transaction(3 function(transaction) { transaction.executeSql( 'SELECT * FROM entries WHERE date = ? ORDER BY food;',4 [currentDate], 5 function (transaction, result) {6 for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i);7 var newEntryRow = $('#entryTemplate').clone();8 newEntryRow.removeAttr('id'); newEntryRow.removeAttr('style'); newEntryRow.data('entryId', row.id);9 newEntryRow.appendTo('#date ul');j newEntryRow.find('.label').text(row.food); newEntryRow.find('.calories').text(row.calories); } }, errorHandler ); } ); }
1 Diese beiden Zeilen setzen die Beschriftung der Titelleiste des DATUM-Bedienfelds auf den Wert von currentDate, der in sessionStorage gespeichert ist. 2 In dieser Zeile verwende ich die jQuery-Funktion gt() (gt steht für größer als, engl. greater than), um alle li-Elemente mit einem Index größer als 0 auszuwählen und zu löschen. Beim ersten Mal wird sich nichts tun, denn das einzige li-Element wird das sein, das die id von entryTemplate hat, also den Index 0. Allerdings müssen wir bei späteren Besuchen alle zusätzlichen li-Elemente entfernen, bevor wir wieder Zeilen
86 | Kapitel 5: Clientseitige Datenspeicherung
aus der Datenbank hinzufügen. Ansonsten würden die Elemente mehrfach in der Liste auftauchen. 3 In diesen drei Zeilen bereite ich die Datenbanktransaktion und den executeSql-Aufruf vor. 4 Diese Zeile beinhaltet den ersten Parameter der executeSQL-Anweisung. Es ist eine einfache SELECT-Anweisung mit einem Fragezeichen als Daten-Platzhalter. 5 Dies ist ein Array mit einem Element, das das zurzeit ausgewählte Datum enthält. Es wird das Fragezeichen in der SQL-Anweisung ersetzen. Beachten Sie, dass die Anführungszeichen um das Fragezeichen nicht zwingend notwendig sind – das Escapen und Markieren als Strings von Daten geschieht automatisch. 6 Diese anonyme Funktion wird bei erfolgreicher Ausführung der Anfrage aufgerufen. Sie akzeptiert zwei Parameter: transaction und result. Das Objekt transaction kann innerhalb des Success-Handlers verwendet werden, um neue Anfragen an die Datenbank zu senden, wie wir es beim Error-Handler zuvor schon gesehen haben. Allerdings gibt es dafür in diesem Fall keinen Grund, deshalb verwenden wir es hier nicht. Das Objekt result ist es, wofür wir uns hier am meisten interessieren. Es hat drei Eigenschaften, die nur ausgelesen werden können: rowsAffected, mit der Sie bestimmen können, wie viele Zeilen von einer INSERT-, UPDATE- oder DELETE-Anweisung betroffen waren, insertId, die den Primärschlüssel der zuletzt erstellten Zeile bei einer INSERT-Anweisung zurückliefert, und rows, worin sich die gefundenen Einträge befinden. Das Objekt rows beinhaltet 0 oder weitere rows-Objekte und besitzt eine lengthEigenschaft, die ich in der for-Schleife in der nächsten Zeile verwende. 7 In dieser Zeile verwende ich die Methode item() des Objekts rows, um die Variable row mit dem Inhalt der aktuellen Zeile zu füllen. 8 In dieser Zeile klone ich per clone() das Vorlagen-li-Element und entferne dessen Attribute id und style in den nächsten beiden Zeilen. Das Entfernen von style macht das li-Element sichtbar, aber auch das Entfernen von id ist wichtig, damit wir auf der Seite nicht mehrere Elemente mit derselben ID erhalten. 9 In dieser Zeile speichere ich den Wert der id-Eigenschaft von row als Wert für das liElement selbst (wir werden das später brauchen, wenn sich der Anwender entscheidet, einen Eintrag zu löschen). j Hier füge ich das li-Element zum Eltern-ul-Element hinzu. In den nächsten beiden Zeilen aktualisiere ich die span-Elemente label und calories, die Kinder des li-Elements sind, mit den entsprechenden Werten aus dem row-Objekt. Nach diesen Änderungen zeigt unser DATUM-Bedienfeld nun ein li-Element für jede Zeile der Datenbank an, die zum ausgewählten Datum passt. Jede Zeile wird eine Beschriftung haben, die Kalorien anzeigen und über einen Löschen-Button verfügen.
Clientseitige Datenbank | 87
Wenn Sie ein paar Zeilen eingegeben haben, werden Sie feststellen, dass wir noch etwas CSS brauchen, um das Ganze besser aussehen zu lassen (Abbildung 5-6). Speichern Sie die folgenden Zeilen in eine Datei namens kilo.css: #date ul li { position: relative; } #date ul li span { color: #FFFFFF; text-shadow: rgba(0,0,0,.7) 0 1px 2px; } #date ul li .delete { position: absolute; top: 5px; right: 6px; font-size: 12px; line-height: 30px; padding: 0 3px; border-width: 0 5px; -webkit-border-image: url(themes/jqt/img/button.png) 0 5 0 5; }
Binden Sie nun die Datei kilo.css ein, indem Sie die folgende Zeile dem head-Bereich der Datei index.html hinzufügen:
Abbildung 5-6: Die Einträge werden nun angezeigt, aber sie müssen mit etwas CSS aufgepeppt werden.
Obwohl die Löschen-Buttons nun wie ebensolche aussehen (siehe Abbildung 5-7), passiert noch nichts, wenn man darauf klickt, und zwar deshalb, weil ich das span-Tag verwendet habe, um sie zu definieren, und das ist per se kein interaktives Element einer HTML-Seite.
88 | Kapitel 5: Clientseitige Datenspeicherung
Abbildung 5-7: Die Einträge bei hinzugefügtem CSS.
Zeilen löschen Damit meine Löschen-Buttons auch tatsächlich etwas machen, wenn man darauf klickt, muss ich mit jQuery einen click-Event-Handler an sie binden. Ich habe das Gleiche zuvor mit den Elementen im DATUM-Bedienfeld gemacht, indem ich die jQuery-Methode click() verwendete. Leider wird diese Vorgehensweise in diesem Fall nicht funktionieren. Anders als die Elemente des DATEN-Bedienfelds sind die Elemente des DATUM-Bedienfelds nicht statisch – sie werden während des Ablaufs einer Anwendersitzung hinzugefügt und entfernt. Tatsächlich sind beim Start nicht einmal Einträge im DATUM-Bedienfeld sichtbar. Deshalb können wir beim Start der App den click-Event-Handler an nichts binden. Die Lösung ist, die click-Events an die Löschen-Buttons zu binden, wenn sie durch die Funktion refreshEntries() erzeugt werden. Fügen Sie dazu die folgenden Zeilen an das Ende der for-Schleife an: newEntryRow.find('.delete').click(function(){1 var clickedEntry = $(this).parent();2 var clickedEntryId = clickedEntry.data('entryId');3 deleteEntryById(clickedEntryId);4 clickedEntry.slideUp(); });
1 Die Funktion beginnt, indem wir angeben, dass wir nach allen Elementen suchen, die zum Selektor #date .delete passen, und die Methode click() in den Elementen aufrufen. Die click()-Methode akzeptiert die anonyme Funktion als einzigen Parameter, die wir verwenden werden, um das Ereignis zu behandeln.
Clientseitige Datenbank | 89
2 Wenn der click-Handler ausgelöst wird, wird das Elternelement des Löschen-Buttons (zum Beispiel das li-Element) bestimmt und in der Variablen clickedEntry abgespeichert. 3 In dieser Zeile setze ich die Variable clickedEntry auf den Wert der entryId, die ich im li-Element gespeichert habe, als es durch die Funktion createEntries() erzeugt wurde. 4 In dieser Zeile leite ich die ID des angeklickten Elements an die Funktion deleteEntryById() weiter und verwende in der nächsten Zeile die jQuery-Methode slideUp(), um das li-Element anmutig von der Seite zu entfernen. Die JavaScript-Gurus unter den Lesern fragen sich vielleicht, warum ich nicht die jQuery-Funktion live() verwendet habe, um den delete-Handler an die Löschen-Buttons zu binden. Leider funktioniert die Funktion live() nicht mit click auf dem iPhone, da click kein Ereignis ist, das durch das DOM nach oben gereicht wird. Für weitere Informationen zur jQueryFunktion live() schauen Sie bitte unter http://docs.jquery.com/Events/ live#typefn nach.
Fügen Sie nun die folgende deleteEntryById()-Funktion in Ihre kilo.js-Datei ein, um einen Eintrag aus der Datenbank löschen zu können: function deleteEntryById(id) { db.transaction( function(transaction) { transaction.executeSql('DELETE FROM entries WHERE id=?;', [id], null, errorHandler); } ); }
Wie wir es schon in vorherigen Beispielen gesehen haben, öffne ich hier eine Transaktion, übergebe ihr eine Callback-Funktion mit dem Transaktionsobjekt als Parameter und rufe die Methode executeSql() auf. Ich übergebe die SQL-Abfrage und die ID des angeklickten Eintrags als die ersten beiden Argumente. Das dritte Argument ist die Stelle, an die der Success-Handler gehört, den ich aber nicht brauche und deshalb einfach null angebe. Als viertes Argument gebe ich den Standard-Error-Handler an, den wir schon überall verwendet haben. Und schon haben wir es geschafft! Es waren sicher einige Erläuterungen notwendig, um an diesen Punkt zu gelangen, aber in Wirklichkeit haben wir gar nicht viel Code schreiben müssen. Tatsächlich beinhaltet die komplette kilo.js-Datei (Beispiel 5-1) nur 108 Zeilen JavaScript. Beispiel 5-1: Das komplette JavaScript für die Datenbankinteraktionen der Kilo-App var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black'
90 | Kapitel 5: Clientseitige Datenspeicherung
Beispiel 5-1: Das komplette JavaScript für die Datenbankinteraktionen der Kilo-App (Fortsetzung) }); var db; $(document).ready(function(){ $('#createEntry form').submit(createEntry); $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); $('#dates li a').click(function(){ var dayOffset = this.id; var date = new Date(); date.setDate(date.getDate() - dayOffset); sessionStorage.currentDate = date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear(); refreshEntries(); }); var shortName = 'Kilo'; var version = '1.0'; var displayName = 'Kilo'; var maxSize = 65536; db = openDatabase(shortName, version, displayName, maxSize); db.transaction( function(transaction) { transaction.executeSql( 'CREATE TABLE IF NOT EXISTS entries ' + ' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' + ' date DATE NOT NULL, food TEXT NOT NULL, ' + ' calories INTEGER NOT NULL);' ); } ); }); function loadSettings() { $('#age').val(localStorage.age); $('#budget').val(localStorage.budget); $('#weight').val(localStorage.weight); } function saveSettings() { localStorage.age = $('#age').val(); localStorage.budget = $('#budget').val(); localStorage.weight = $('#weight').val(); jQT.goBack(); return false; } function createEntry() { var date = sessionStorage.currentDate; var calories = $('#calories').val(); var food = $('#food').val(); db.transaction( function(transaction) { transaction.executeSql( 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',
Clientseitige Datenbank | 91
Beispiel 5-1: Das komplette JavaScript für die Datenbankinteraktionen der Kilo-App (Fortsetzung) [date, calories, food], function(){ refreshEntries(); jQT.goBack(); }, errorHandler ); } ); return false; } function refreshEntries() { var currentDate = sessionStorage.currentDate; $('#date h1').text(currentDate); $('#date ul li:gt(0)').remove(); db.transaction( function(transaction) { transaction.executeSql( 'SELECT * FROM entries WHERE date = ? ORDER BY food;', [currentDate], function (transaction, result) { for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i); var newEntryRow = $('#entryTemplate').clone(); newEntryRow.removeAttr('id'); newEntryRow.removeAttr('style'); newEntryRow.data('entryId', row.id); newEntryRow.appendTo('#date ul'); newEntryRow.find('.label').text(row.food); newEntryRow.find('.calories').text(row.calories); newEntryRow.find('.delete').click(function(){ var clickedEntry = $(this).parent(); var clickedEntryId = clickedEntry.data('entryId'); deleteEntryById(clickedEntryId); clickedEntry.slideUp(); }); } }, errorHandler ); } ); } function deleteEntryById(id) { db.transaction( function(transaction) { transaction.executeSql('DELETE FROM entries WHERE id=?;', [id], null, errorHandler); } ); }
92 | Kapitel 5: Clientseitige Datenspeicherung
Beispiel 5-1: Das komplette JavaScript für die Datenbankinteraktionen der Kilo-App (Fortsetzung) function errorHandler(transaction, error) { alert('Ups. Der Fehler war '+error.message+' (Code '+error.code+')'); return true; }
Was Sie gelernt haben In diesem Kapitel haben Sie zwei Arten der clientseitigen Datenspeicherung kennengelernt: Schlüssel/Wert-Speicherung und die clientseitige SQL-Datenbank. Besonders die clientseitige Datenbank eröffnet eine ganze Welt neuer Möglichkeiten für den Web-AppEntwickler. Das Einzige, was uns daran hindert, die App im Offlinemodus zu betreiben, ist, dass wir uns bei jedem Start der App anfangs mit dem Webserver verbinden müssen, um die HTML-Seite mit den ganzen Ressourcen aufzurufen. Wäre es nicht eine feine Sache, wenn wir den ganzen Kram auf dem Gerät abspeichern könnten? Ja, das wäre es. Auf zum nächsten Kapitel!
Was Sie gelernt haben | 93
Kapitel 6
KAPITEL 6
Der Weg zur Offline-App
Es gibt ein Feature in HTML5, das Offline Application Cache heißt und Anwendern erlaubt, Web-Apps auszuführen, auch wenn sie nicht mit dem Internet verbunden sind. Das funktioniert so: Wenn ein Anwender zu Ihrer Website navigiert, lädt er alle für die Anzeige der Seite benötigten Dateien (HTML, CSS, JavaScript, Bilder und so weiter) herunter und speichert sie ab. Surft der Anwender nun ein weiteres Mal die Seite an, erkennt der Browser das anhand der URL und lädt die Seite aus dem lokalen Anwendungsspeicher, statt sie wieder komplett über das Internet zu ziehen.
Die Grundlagen des Offline Application Cache Die Hauptkomponente des Offline Application Cache ist die Cache-Manifest-Datei, die Sie auf Ihrem Webserver ablegen können. Ich werde ein einfaches Beispiel verwenden, um die verwendeten Konzepte zu erklären. Danach werde ich demonstrieren, wie man das Gelernte auf die Kilo-App anwendet, an der wir bisher gearbeitet haben. Ein Manifest ist eine einfache Textdatei, die auf Ihrem Webserver liegt und an das Gerät des Anwenders mit dem Inhaltstyp cache-manifest gesendet wird. Das Manifest beinhaltet eine Liste von Dateien, die das Gerät des Anwenders herunterladen und speichern muss, damit die Web-App funktioniert. Stellen wir uns ein Webverzeichnis mit folgenden Dateien vor: index.html logo.jpg scripts/demo.js styles/screen.css
In diesem Fall ist index.html die Seite, die in den Browser geladen wird, wenn der Anwender Ihre App besucht. Auf die anderen Dateien wird in der HTML-Datei verwiesen. Um die Dateien offline nutzbar zu machen, erstellen Sie eine Datei namens demo.manifest im selben Verzeichnis. Die Dateiliste sieht danach so aus:
Fügen Sie als Nächstes die folgenden Zeilen in die Datei demo.manifest ein: CACHE MANIFEST index.html logo.jpg scripts/demo.js styles/screen.css
Die Pfade im Manifest sind relativ zum Speicherort der Manifestdatei. Sie können auch absolute URLs nutzen: CACHE MANIFEST http://www.beispiel.de/index.html http://www.beispiel.de/logo.jpg http://www.beispiel.de/scripts/demo.js http://www.beispiel.de/styles/screen.css
Nun, da Sie die Manifestdatei erstellt haben, müssen Sie darauf aus der HTML-Datei verweisen, indem Sie das manifest-Attribut in das html-Tag der Datei index.html integrieren:
Sie müssen die Datei mit dem Inhaltstyp text/cache-manifest ausliefern, da der Browser es sonst nicht erkennen wird. Sollten Sie einen Apache-Webserver oder einen kompatiblen Server verwenden, können Sie das erreichen, indem Sie die folgende Zeile in die Datei .htaccess in Ihrem Webverzeichnis einfügen: AddType text/cache-manifest .manifest
Wenn die .htaccess-Datei bei Ihnen nicht funktioniert, schlagen Sie bitte in Ihrer Webserver-Dokumentation in dem Bereich nach, der sich mit MIMETypen befasst. Sie müssen die Dateiendung .manifest mit dem MIME-Typ text/cache-manifest verknüpfen. Wenn Ihre Website bei einem Internetprovider abgelegt ist, bietet dieser eventuell eine Konfigurationsseite, auf der Sie diese Einstellungen vornehmen können. Ich werde Ihnen etwas später in diesem Kapitel noch ein Beispiel zeigen, das ein PHP-Skript anstelle der .htaccess-Datei nutzt.
Unser Offline Application Cache ist nun arbeitsbereit. Surft ein Anwender das nächste Mal zur Webseite http://www.beispiel.de/index.html, werden die Seite und die zusätzlichen Ressourcen normal über das Netzwerk geladen. Im Hintergrund werden alle Dateien, die im Manifest aufgelistet sind, auf die lokale Festplatte (beziehungsweise in den Flash-Speicher im iPhone) heruntergeladen. Wenn der Download einmal abgeschlossen ist und der Anwender die Seite neu lädt, werden nur die lokalen Daten verwendet. Er kann nun die Internetverbindung trennen und trotzdem mit der Web-App weiterarbeiten.
96 | Kapitel 6: Der Weg zur Offline-App
Mac OS X und die .htaccess-Datei Wenn Sie eine Website in Ihrem lokalen Netzwerk betreiben, indem Sie den in Mac OS X eingebauten Apache-Webserver nutzen, werden in Ihrem persönlichen Webordner (der Ordner namens WEBSITES in Ihrem Home-Verzeichnis) sämtliche .htaccess-Dateien ignoriert. Sie können aber die Unterstützung der .htaccess-Datei aktivieren, indem Sie PROGRAMME → DIENSTPROGRAMME → TERMINAL öffnen und die folgenden Befehle eingeben (Sie müssen auch Ihr Passwort eingeben, wenn Sie danach gefragt werden): cd /etc/apache2/users sudo pico $USER.conf
Dadurch wird Ihre persönliche Apache-Konfigurationsdatei im Pico-Editor geöffnet. (Sie können eine Liste der Editor-Befehle am unteren Fensterrand sehen; das ^-Symbol steht für die Ctrl-Taste.) Verwenden Sie die Pfeiltasten, um bis zur Zeile AllowOverride None zu gelangen. Ersetzen Sie hier das Wort None durch das Wort All. Drücken Sie dann Ctrl-X, um den Editor zu verlassen, und antworten Sie mit Y und der Eingabetaste, um die Änderungen zu speichern. Öffnen Sie dann die Systemeinstellungen, wechseln Sie zum Bereich FREIGABEN und öffnen Sie gegebenenfalls unten links das Schlosssymbol, indem Sie darauf klicken und nach der Aufforderung Ihr Passwort eintragen. Entfernen Sie links in der Liste das Häkchen für die Webfreigabe und setzen Sie es erneut. Dadurch wird der Webserver neu gestartet, und Ihr Mac sollte nun die Einstellungen in .htaccess-Dateien berücksichtigen, die in Ihrem Web-Verzeichnis und dessen Unterordnern liegen.
Da der Anwender die Daten lokal auf dem Gerät abgelegt hat, haben wir ein neues Problem: Wie erhält er Updates, wenn die Website verändert wurde? Wenn der Anwender auf unsere Website geht, wird zuerst das Manifest daraufhin geprüft, ob es noch mit der lokal abgelegten Kopie übereinstimmt. Wenn sich das Manifest auf dem Webserver verändert hat, werden alle darin aufgelisteten Dateien im Hintergrund neu geladen und in einem temporären Zwischenspeicher abgelegt. Die Vergleichsmethode zwischen dem lokalen und dem entfernten Manifest ist ein Byte-für-Byte-Vergleich des Dateiinhalts (inklusive Kommentaren und Leerzeilen). Der Zeitstempel der Dateien und die Veränderung der Inhalte der Ressourcen sind bei der Prüfung, ob etwas verändert wurde, irrelevant.
Wenn beim Herunterladen etwas schiefläuft (beispielsweise der Anwender seine Internetverbindung verliert), wird der teilweise heruntergeladene Zwischenspeicher verworfen, und die alten Daten bleiben im Dienst. Wenn der Download geglückt ist, werden beim nächsten Start der Web-App die neuen Daten verwendet.
Die Grundlagen des Offline Application Cache
| 97
Das Download-Verhalten des Application Cache Bedenken Sie, dass, wenn das Manifest aktualisiert wurde, die Daten im Hintergrund nachgeladen werden, nachdem die App gestartet wurde. Das bedeutet, dass der Anwender auch nach der Fertigstellung des Downloads noch mit den alten Daten arbeitet. Mit anderen Worten: Die App wird nicht automatisch nach der Fertigstellung des Downloads neu geladen. Die neuen Dateien werden erst angewendet, wenn der Anwender die App neu startet. Das ist dem Update-Verhalten von normalen Desktop-Apps sehr ähnlich: Sie starten eine App. Die sagt Ihnen, dass Updates verfügbar sind. Sie klicken auf UPDATES HERUNTERLADEN. Der Download ist fertig. Dann werden Sie gebeten, die App neu zu starten, damit das Update aktiv wird.
Online-Whitelist und Fallback-Optionen Es ist möglich, den Browser zu zwingen, bestimmte Dateien immer über das Internet zu laden. Das bedeutet, dass der Browser diese Dateien nicht zwischenspeichern wird und sie deshalb nicht verfügbar sind, wenn der Anwender offline geht. Sie können eine Ressource als »nur online« definieren, indem Sie das Schlüsselwort NETWORK: (der abschließende Doppelpunkt ist zwingend erforderlich) in Ihrer Manifestdatei auf diese Weise nutzen: CACHE MANIFEST index.html scripts/demo.js styles/screen.css NETWORK: logo.jpg
Hier habe ich die Datei logo.jpg »gewhitelistet«, indem ich sie in den NETWORK-Abschnitt der Manifestdatei verschoben haben. Wenn der Anwender offline ist, wird das Bild als ungültiger Grafiklink angezeigt (Abbildung 6-1). Wenn er online ist, erscheint es normal (Abbildung 6-2). Wenn Sie nicht möchten, dass die Anwender die ungültigen Grafiklinks sehen, können Sie das Schlüsselwort FALLBACK: verwenden, um eine Ausweichressource anzugeben: CACHE MANIFEST index.html scripts/demo.js styles/screen.css FALLBACK: logo.jpg offline.jpg
Ist der Anwender nun offline, sieht er die Grafik offline.jpg (Abbildung 6-3), ist er online, die Grafik logo.jpg (Abbildung 6-4).
98 | Kapitel 6: Der Weg zur Offline-App
Abbildung 6-1: »Gewhitelistete« Bilder erscheinen als ungültige Grafiklinks, wenn der Anwender offline ist.
Abbildung 6-2: »Gewhitelistete« Bilder erscheinen normal, wenn der Anwender online ist.
Online-Whitelist und Fallback-Optionen | 99
Das ist vor allem dann nützlich, wenn Sie berücksichtigen, dass man ein einziges Ausweichbild für mehrere Ressourcen angeben kann, indem man einen Teilpfad angibt. Nehmen wir einmal an, ich füge meiner Website einen images-Ordner hinzu und lege dort einige Dateien ab: /demo.manifest /index.html /images/logo.jpg /images/logo2.jpg /images/offline.jpg /scripts/demo.js /styles/screen.css
Abbildung 6-3: Wenn der Anwender offline ist, wird ein Ausweichbild angezeigt.
Ich kann jetzt dem Browser sagen, dass er für alle Dateien im Ordner images auf die Datei offline.jpg ausweichen soll: CACHE MANIFEST index.html scripts/demo.js styles/screen.css FALLBACK: images/ images/offline.jpg
Ist der Anwender nun offline, sieht er die Datei offline.jpg (Abbildung 6-5), und online sieht er logo.jpg und logo2.jpg (Abbildung 6-6). Es hängt von der Art Ihrer App ab, ob Sie Ressourcen in den Bereichen NETWORK und FALLBACK Ihres Manifests aufführen sollten. Bedenken Sie, dass der Offline Application Cache
100 | Kapitel 6: Der Weg zur Offline-App
Abbildung 6-4: Sobald der Anwender online ist, werden wieder die normalen Bilder auf dem Webserver angezeigt.
in erster Linie Apps lokal auf dem Gerät speichern soll. Er ist nicht dazu gedacht, einen Server zu entlasten oder die Leistung zu erhöhen oder Ähnliches. In den meisten Fällen sollten Sie alle für das Ausführen der App benötigten Dateien in Ihrer Manifestdatei auflisten. Wenn Sie eine Menge dynamischer Inhalte haben und sich nicht sicher sind, wie Sie diese im Manifest darstellen sollen, ist Ihre App wahrscheinlich kein guter Kandidat für den Offline Application Cache, und Sie sollten sich vielleicht eine andere Herangehensweise überlegen (eventuell eine clientseitige Datenbank).
Eine dynamische Manifestdatei erstellen Jetzt sind wir mit der Funktionsweise des Offline Application Cache vertraut und können ihn auf die Beispiel-App Kilo anwenden, die wir erstellt haben. Kilo besitzt einige Dateien, und es würde einen großen Aufwand bedeuten, diese Dateien alle manuell in einer Manifestdatei aufzulisten. Darüber hinaus würde ein einziger Tippfehler das gesamte Manifest unbrauchbar machen, und die App würde nicht offline funktionieren. Um diese Angelegenheit anzugehen, werden wir eine kleine PHP-Datei schreiben, die alle Inhalte des App-Verzeichnisses (und dessen Unterordner) ausliest und für uns die Dateiliste anfertigt. Erstellen Sie eine neue Datei in Ihrem Kilo-Verzeichnis und nennen Sie sie manifest.php. Fügen Sie dann folgenden Code darin ein:
Eine dynamische Manifestdatei erstellen
| 101
Abbildung 6-5: Dieselbe Ausweichgrafik erscheint anstelle mehrerer Bilder, wenn der Anwender offline ist.
1 Ich verwende die PHP-Funktion header(), um diese Datei mit dem Inhaltstyp cachemanifest auszuliefern. Das ist eine Alternative zur Verwendung der .htaccess-Datei für die Definition des Inhaltstyps der Manifestdatei. Sie könnten nun die .htaccessDatei, die Sie im Abschnitt »Die Grundlagen des Offline Application Cache« auf Seite 95 erstellt haben, tatsächlich löschen, wenn Sie diese nicht noch für andere Zwecke brauchen.
102 | Kapitel 6: Der Weg zur Offline-App
Abbildung 6-6: Sobald der Anwender online ist, werden wieder die normalen Bilder auf dem Webserver angezeigt.
2 Wie Sie schon weiter oben in diesem Kapitel gesehen haben, muss die erste Zeile des Manifests CACHE MANIFEST lauten. Soweit es den Browser angeht, ist es die erste Zeile des Dokuments; die PHP-Datei wird auf dem Server ausgeführt, und der Browser sieht nur die Textausgabe, wie sie zum Beispiel durch die Funktion echo() erzeugt wird. 3 Diese Zeile erzeugt ein Objekt namens $dir, das alle Dateien im aktuellen Verzeichnis aufzählt. Das passiert rekursiv, so dass auch die Dateien in Unterordnern gefunden werden. 4 Jedes Mal, wenn das Programm durch diese Schleife läuft, wird die Variable $file auf ein Objekt gesetzt, das eine Datei des aktuellen Verzeichnisses repräsentiert. Übersetzt, würde die Zeile etwa so lauten: »Setze jedes Mal die Variable $file auf die nächste Datei, die du in diesem Ordner oder einem der Unterordner findest.« 5 Diese if-Abrage stellt sicher, dass es sich wirklich um eine Datei (und nicht etwa einen Ordner oder einen symbolischen Link) handelt. Dateinamen, die mit einem Punkt anfangen (zum Beispiel .htaccess), und die Datei manifest.php werden ignoriert.
Eine dynamische Manifestdatei erstellen
| 103
PHP-Skripten auf Ihrem Server ausführen PHP ist eine vielseitige Web-Scripting-Sprache und wird von den meisten Internetprovidern unterstützt. Das bedeutet, Sie können eine Datei erstellen, deren Name auf .php endet, ein wenig PHP-Code hineinschreiben, sie mit Ihrem Webbrowser aufrufen, und sie wird direkt funktionieren. Wenn Sie einen Webserver auf Ihrem lokalen Computer verwenden, um die Seiten auf Ihr iPhone zu übertragen, werden Sie ihn für PHP konfigurieren müssen. Nutzen Sie einen Webserver unter Windows, schauen Sie einmal unter http:// php.net/manual/de/install.windows.php nach, um einen Download und weitere Informationen zu finden. Die Installation von PHP unter Linux ist einfach (so können beispielsweise Ubuntu-Anwender sudo aptitude install apache2 php5 in der Shell-Eingabeaufforderung eingeben). Auf Macs ist PHP vorinstalliert, aber Sie müssen einen Schritt ausführen, um es zu aktivieren. Analog zu dem, was Sie unter »Mac OS X und die .htaccess-Datei« auf Seite 97 gemacht haben, öffnen Sie PROGRAMME → DIENSTPROGRAMME → TERMINAL und tippen folgende Befehle ein (geben Sie auch Ihr Passwort ein, sobald Sie dazu aufgefordert werden): cd /etc/apache2 sudo pico httpd.conf
Drücken Sie als Nächstes Ctrl-W. Damit rufen Sie die eingebaute Funktion auf, die Datei zu durchsuchen. Tippen Sie »php5« ein und drücken Sie die Eingabetaste. Es erscheint eine Zeile, die so aussehen sollte: #LoadModule php5_module
libexec/apache2/libphp5.so
Verwenden Sie die Pfeiltasten, um zum Anfang der Zeile zu gelangen, und löschen Sie dort das #-Kommentarzeichen, das das Auslesen und Wirksamwerden der Zeile verhindert. Drücken Sie dann Ctrl-X, um den Editor zu beenden, antworten Sie mit Y und der Eingabetaste, um die Datei abzuspeichern. Öffnen Sie dann die Systemeinstellungen, wechseln Sie zum Bereich FREIGABEN und öffnen Sie gegebenenfalls unten links das Schlosssymbol, indem Sie darauf klicken und nach der Aufforderung Ihr Passwort eintragen. Entfernen Sie dann links in der Liste das Häkchen für die Webfreigabe und setzen Sie es erneut. Dadurch wird der Webserver neu gestartet und sollte von nun an PHP unterstützen. Erstellen Sie schließlich eine Datei in Ihrem Websites-Unterordner Ihres Home-Verzeichnisses, die Sie test.php nennen und mit folgenden Zeilen füllen:
Besuchen Sie die folgende URL in Ihrem Browser: http://localhost/~IHRBENUTZERNAME/ test.php. Ersetzen Sie IHRBENUTZERNAME durch Ihren Benutzernamen, aber löschen Sie nicht das ~-Zeichen. (Sie können Ihren Benutzernamen herausfinden, indem Sie im Terminal echo $USER eintippen und die Eingabetaste drücken.) Wenn PHP funktioniert, sehen Sie eine Tabelle mit der PHP-Versionsnummer und einer Menge weiterer Informationen über Ihre PHP-Version. Funktioniert PHP nicht, sehen Sie nichts außer einer leeren Seite. Besuchen Sie http://www.php.net/support.php für Dokumentationen und Hilfe für die Nutzung von PHP.
104 | Kapitel 6: Der Weg zur Offline-App
Die Zeichenkombination ./ ist Teil des gesamten Dateipfads; der Punkt deutet auf das aktuelle Verzeichnis, und das /-Zeichen trennt die Elemente des Pfads. Deshalb erscheint in der Ausgabe immer ein ./ vor dem Dateinamen. Wenn ich allerdings nach dem Punkt vor dem Dateinamen suche, verwende ich die Funktion getFilename, die nur den Dateinamen ohne den vorangehenden Pfad zurückgibt. Auf diese Weise kann ich Dateien finden, die mit einem Punkt beginnen, selbst wenn sie in einem Unterverzeichnis vergraben sind.
6 Hier gebe ich den Namen jeder Datei aus. Für den Browser sieht die manifest.php so aus: CACHE MANIFEST ./index.html ./jqtouch/jqtouch.css ./jqtouch/jqtouch.js ./jqtouch/jqtouch.transitions.js ./jqtouch/jquery.js ./kilo.css ./kilo.js ./themes/apple/img/backButton.png ./themes/apple/img/blueButton.png ./themes/apple/img/cancel.png ./themes/apple/img/chevron.png ./themes/apple/img/grayButton.png ./themes/apple/img/listArrowSel.png ./themes/apple/img/listGroup.png ./themes/apple/img/loading.gif ./themes/apple/img/on_off.png ./themes/apple/img/pinstripes.png ./themes/apple/img/selection.png ./themes/apple/img/thumb.png ./themes/apple/img/toggle.png ./themes/apple/img/toggleOn.png ./themes/apple/img/toolbar.png ./themes/apple/img/toolButton.png ./themes/apple/img/whiteButton.png ./themes/apple/theme.css ./themes/jqt/img/back_button.png ./themes/jqt/img/back_button_clicked.png ./themes/jqt/img/button.png ./themes/jqt/img/button_clicked.png ./themes/jqt/img/chevron.png ./themes/jqt/img/chevron_circle.png ./themes/jqt/img/grayButton.png ./themes/jqt/img/loading.gif ./themes/jqt/img/on_off.png ./themes/jqt/img/rowhead.png ./themes/jqt/img/toggle.png ./themes/jqt/img/toggleOn.png ./themes/jqt/img/toolbar.png
Versuchen Sie einmal, die Seite selbst in einem Browser zu öffnen (Sie müssen sie dazu mit einer http-URL öffnen, wie zum Beispiel http://localhost/ ~IHRBENUTZERNAME/manifest.php). Wenn Sie mehr Dateien in Ihrer Liste sehen, sind das wahrscheinlich zusätzliche Dateien der jQTouch-Distribution. Die Dateien LICENSE.txt, README.txt und sample.htaccess können Sie ruhigen Gewissens löschen, genauso wie die Ordner demo und extensions. Wenn Sie einige Ordner namens .svn sehen, können Sie diese ebenfalls löschen (auch wenn Sie sie im Mac OS X Finder nicht sehen, können Sie im Terminal mit ihnen arbeiten).
Öffnen Sie jetzt die Datei index.html und verweisen Sie so auf die Datei manifest.php:
Nun, da das Manifest dynamisch generiert wird, können wir es so anpassen, dass es sich ändert, wenn einzelne Dateien im Verzeichnis verändert werden (wie Sie sich erinnern werden, lädt der Client die Dateien nur neu herunter, wenn sich der Inhalt des Manifests geändert hat). Hier sehen Sie die geänderte Version der Datei manifest.php:
1 An dieser Stelle initialisiere ich einen String, der die Prüfsummen der Dateien enthalten soll. 2 In dieser Zeile berechne ich die Prüfsumme jeder Datei mit der PHP-Funktion md5_ file (Message-Digest algorithm 5) und hänge sie an das Ende des $hash-Strings an. Jede Änderung an der Datei (und sei sie noch so klein) wird das Ergebnis der Funktion md5_file verändern. Die Prüfsumme ist ein 32-Zeichen-String, zum Beispiel »4ac3c9c004cac7785fa6b132b4f18efc«. 3 Hier nehme ich den großen Prüfsummen-String (der alle 32-Zeichen-Strings der Dateien enthält) und berechne für ihn selbst die Prüfsumme. Dadurch erhalten wir einen kurzen String (32 Zeichen anstelle von 32 Zeichen mal Anzahl der Dateien), der als Kommentar ausgegeben wird (beginnend mit dem Kommentarsymbol #).
106 | Kapitel 6: Der Weg zur Offline-App
Aus der Sicht des Clientbrowsers hat diese Zeile nichts zu bedeuten. Sie ist ein Kommentar und wird vom Browser ignoriert. Wenn allerdings eine der Dateien verändert wird, verändert sich diese Zeile ebenfalls und damit hat sich dann auch das Manifest geändert. Hier ist ein Beispiel dafür, wie das Manifest nach dieser Änderung aussehen kann (einige Zeilen habe ich weggekürzt): CACHE MANIFEST ./index.html ./jqtouch/jqtouch.css ./jqtouch/jqtouch.js ... ./themes/jqt/img/toolbar.png ./themes/jqt/img/whiteButton.png ./themes/jqt/theme.css # Hash: ddaf5ebda18991c4a9da16c10f4e474a
Das Endergebnis dieser Arbeit ist, dass, sobald ein einziges Zeichen innerhalb einer Datei des gesamten Verzeichnisbaums verändert wird, ein neuer Prüfsummenkommentar im Manifest erscheint. Jede Änderung an einer Kilo-Datei verändert also gleichzeitig das Manifest, wodurch ein neuer Download angestoßen wird, wenn ein Anwender das nächste Mal die App startet. Ganz schön raffiniert, oder?
Fehlerbehebung Es kann ziemlich hart sein, Fehler in Apps zu beheben, die den Offline Application Cache nutzen, da vieles doch recht undurchsichtig ist. Sie werden sich selbst dabei ertappen, dass Sie sich fragen, ob Ihre Dateien hochgeladen wurden und ob Sie gerade Netz- oder lokale Ressourcen sehen. Dazu kommt, dass das Hin-und Herschalten zwischen Onlineund Offlinemodus nicht die flotteste Prozedur ist und Ihren Entwicklungsprozess drastisch verlangsamt. Es gibt zwei Dinge, die Sie tun können, wenn Sie herausbekommen wollen, was gerade schiefläuft: das Konsolenprotokoll in JavaScript aktivieren und die App-Cache-Datenbank ansehen. Möchten Sie aus der Webserver-Perspektive heraus sehen, was passiert, können Sie seine Protokolldateien (Logfiles) überwachen. Wenn Sie beispielsweise einen Webserver auf Ihrem Mac betreiben, können Sie ein Terminalfenster öffnen (PROGRAMME → DIENSTPROGRAMME → TERMINAL) und folgende Befehle ausführen (das $-Zeichen ist die Shell-Eingabeaufforderung und darf nicht eingetippt werden): $ cd /var/log/apache2/ $ tail -f access_log
Dadurch werden die Protokolleinträge des Webservers angezeigt, die zum Beispiel aussagen, an welchem Datum und zu welcher Uhrzeit auf welche Datei zugegriffen wurde. Wenn Sie fertig sind, drücken Sie einfach auf Ctrl-C, um dem Protokoll nicht weiter zu folgen.
Fehlerbehebung | 107
Die JavaScript-Konsole Wenn Sie das folgende JavaScript Ihrer App in der Entwicklungsphase hinzufügen, wird Ihr Leben deutlich einfacher, denn Sie können einfacher nachvollziehen, was gerade vor sich geht. Das folgende Skript gibt Rückmeldungen an die Konsole und befreit Sie davon, ständig das Browserfenster neu laden zu müssen (Sie können das Skript in einer .js-Datei ablegen, auf die Ihr HTML-Dokument über das src-Attribut eines script-Tags verweist): // Einfaches Array mit den Statuswerten (Umlaute werden nicht unterstützt)1 var cacheStatusValues = []; cacheStatusValues[0] = 'nicht zwischengespeichert'; cacheStatusValues[1] = 'untaetig'; cacheStatusValues[2] = 'pruefe'; cacheStatusValues[3] = 'lade herunter'; cacheStatusValues[4] = 'Update abgeschlossen'; cacheStatusValues[5] = 'veraltet'; // Listener für alle möglichen Ereignisse 2 var cache = window.applicationCache; cache.addEventListener('cached', logEvent, false); cache.addEventListener('checking', logEvent, false); cache.addEventListener('downloading', logEvent, false); cache.addEventListener('error', logEvent, false); cache.addEventListener('noupdate', logEvent, false); cache.addEventListener('obsolete', logEvent, false); cache.addEventListener('progress', logEvent, false); cache.addEventListener('updateready', logEvent, false); // Jedes Ereignis auf der Konsole protokollieren function logEvent(e) {3 var online, status, type, message; online = (navigator.onLine) ? 'ja' : 'nein'; status = cacheStatusValues[cache.status]; type = e.type; message = 'Online: ' + online; message+= ', Ereignis: ' + type; message+= ', Status: ' + status; if (type == 'error' && navigator.onLine) { message+= ' (Wahrscheinlich Syntaxfehler im Manifest)'; } console.log(message);4 } // Austausch der neu heruntergeladenen Dateien, wenn das Update abgeschlossen wurde window.applicationCache.addEventListener( 'updateready', function(){ window.applicationCache.swapCache(); console.log('Austausch des Zwischenspeichers wurde begonnen.'); }, false ); // Alle 10 Sekunden auf Änderungen am Manifest prüfen setInterval(function(){cache.update()}, 10000);
108 | Kapitel 6: Der Weg zur Offline-App
Das mag nach einer Menge Code aussehen, aber so viel passiert hier gar nicht: 1 In den ersten sieben Zeilen konfiguriere ich ein Array mit Statuswerten für das Application-Cache-Objekt. Laut den HTML5-Spezifikationen gibt es sechs mögliche Werte, für deren numerische Werte ich hier eine kurze Beschreibung angebe (Status 3 bedeutet beispielsweise »lade herunter«). Ich habe sie eingefügt, damit das Protokoll unten in der Funktion logEvent etwas lesbarer wird. 2 Im nächsten Codeabschnitt definiere ich mehrere Event-Listener für jedes mögliche Ereignis, das in den Spezifikationen definiert ist, die jeweils die Funktion logEvent() aufrufen. 3 Die Funktion logEvent nimmt das Ereignis als Eingabe an und führt ein paar einfache Berechnungen durch, um eine aussagekräftige Protokollmeldung zu generieren. Beachten Sie: Wenn der Ereignistyp error ist und der Anwender online ist, handelt es sich wahrscheinlich um einen Syntaxfehler im Manifest. Im Manifest können sich sehr schnell Syntaxfehler einschleichen, da alle Pfade gültig sein müssen. Wenn Sie eine Datei löschen oder umbenennen und vergessen, das Manifest anzupassen, werden zukünftige Updates fehlschlagen. 4 Sobald ich die Nachricht generiert habe, sende ich sie an die Konsole. Sie können die Konsolenmeldungen einblenden, indem Sie bei einem Desktop-Safari das Menü ENTWICKLER → FEHLERKONSOLE einblenden wählen. Im iPhone-Simulator wählen Sie dazu EINSTELLUNGEN → SAFARI → ENTWICKLER und schalten dort die Debug-Konsole ein. Wenn die Konsole eingeschaltet ist, zeigt der mobile Safari eine zusätzliche Leiste unterhalb der Adressleiste an (Abbildung 6-7), die es Ihnen erlaubt, in die DebugKonsole zu navigieren (Abbildung 6-8).
Abbildung 6-7: Der mobile Safari mit eingeschalteter Debug-Konsole.
Fehlerbehebung | 109
Abbildung 6-8: Die Debug-Konsole des mobilen Safari. Sollte das ENTWICKLER-Menü nicht angezeigt werden, gehen Sie bitte in die Einstellungen von Safari und aktivieren das ENTWICKLER-Menü in den erweiterten Einstellungen.
Wenn Sie die Webseite in Ihrem Desktop-Browser laden und die Konsole öffnen, werden Sie sehen, dass alle zehn Sekunden neue Meldungen erscheinen (Abbildung 6-9). Sollten Sie nichts sehen, aktualisieren Sie die Versionsnummer Ihrer Manifestdatei demo.manifest und laden die Seite im Browser zweimal neu. Ich möchte Sie ermutigen, damit ein wenig zu spielen, damit Sie ein Gefühl dafür bekommen, was dort vor sich geht. Basteln Sie ruhig etwas an der Manifestdatei herum (benennen Sie Dateien um, verändern Sie Inhalte, verschieben Sie Dateien in andere Ordner und so weiter) und beobachten Sie in der Konsole, wie dort auf magische Weise Ihre Aktionen erscheinen.
Die Application-Cache-Datenbank Geraten Sie bei der Fehlersuche in Ihrer Offline-Web-App in Schwierigkeiten, gibt es eine Methode, um unter die Haube zu schauen und nachzusehen, was passiert. Wenn Sie Ihre App im iPhone Simulator öffnen, werden die zwischengespeicherten Ressourcen in einer SQLite-Datenbank abgelegt, die Sie mit dem sqlite3-Kommandozeilen-Interface einsehen können. Natürlich ist etwas Wissen über SQL hier sehr nützlich, aber Sie können schon weit kommen, wenn Sie die Beispiele aus diesem Abschnitt nachvollziehen.
110 | Kapitel 6: Der Weg zur Offline-App
Abbildung 6-9: Die Funktion console.log() kann dazu verwendet werden, Meldungen an die JavaScriptKonsole zu senden. Sie benötigen ein installiertes iPhone SDK von Apple, um den iPhone Simulator auf Ihrem System zu finden. Sie können das SDK unter http:// developer.apple.com/iphone/ herunterladen, wenn Sie sich dort als iPhone-Entwickler kostenlos registriert haben. Möchten Sie allerdings auch auf einem realen iPhone testen oder Apps im App Store verkaufen, müssen Sie dem iPhone Developer Program für derzeit jährlich 79 € beitreten (beachten Sie, dass ein Apple Developer etwas anderes ist als ein iPhone Developer).
Auf meiner Maschine liegt die Application-Cache-Datenbank des iPhone Simulator hier: /Users/jstark/Library/Application Support/iPhone Simulator/User/Library/Caches/com.apple.WebAppCache/ApplicationCache.db
Fehlerbehebung | 111
Das Verzeichnis com.apple.WebAppCache und die Datenbank ApplicationCache.db werden erst existieren, wenn Sie mindestens einmal Ihre Web-App im iPhone Simulator geladen haben.
Mit dem sqlite3-Kommandozeilen-Interface können Sie in der Datenbank herumstöbern, um einen Eindruck davon zu bekommen, was passiert. Zuerst müssen Sie sich mit der Datenbank verbinden. Öffnen Sie das Terminal (PROGRAMME → DIENSTPROGRAMME → TERMINAL) und tippen Sie die folgenden Kommandos ein (das $-Zeichen ist die ShellEingabeaufforderung und darf nicht eingetippt werden): $ cd "$HOME/Library/Application Support/iPhone Simulator" $ cd User/Library/Caches/com.apple.WebAppCache/ $ sqlite3 ApplicationCache.db
Auf dem Mac liegt der Application-Cache vom Desktop-Safari in einem Nachbarverzeichnis Ihres temporären Verzeichnisses. Sie gelangen mit dem Terminal so dorthin: $ cd $TMPDIR/../-Caches-/com.apple.Safari/ $ sqlite3 ApplicationCache.db
Wenn Sie einmal verbunden sind, sehen Sie etwas in der Art: SQLite version 3.6.17 Enter ".help" for instructions Enter SQL statements terminated with a ";" sqlite>
Nun können Sie SQLite-Kontrollbefehle und beliebige SQL-Kommandos in die sqlite>Eingabeaufforderung eingeben. Wenn Sie .help eingeben, erhalten Sie eine Liste der SQLite-Kontrollbefehle. Die Liste ist recht lang, darum hier die wichtigsten Befehle für unsere Zwecke: .exit .header(s) ON|OFF .help .mode MODE ?TABLE?
.quit .tables ?PATTERN?
Exit this program Turn display of headers on or off Show this message Set output mode where MODE is one of: csv Comma-separated values column Left-aligned columns. (See .width) html HTML
code insert SQL insert statements for TABLE line One value per line list Values delimited by .separator string tabs Tab-separated values tcl TCL list elements Exit this program List names of tables matching a LIKE pattern
Möchten Sie eine Liste der Tabellen sehen, die in der Cache-Manifest-Datenbank vorhanden sind, verwenden Sie das Kommando .tables:
112 | Kapitel 6: Der Weg zur Offline-App
sqlite> .tables CacheEntries CacheGroups
CacheResourceData CacheResources
CacheWhitelistURLs Caches
FallbackURLs
Bevor ich anfange, die Tabellen auszulesen, schalte ich .headers ein, wodurch die Feldnamen mit ausgegeben werden. Außerdem setze ich .mode auf line, damit man die Ausgabe besser lesen kann. Tippen Sie die fett gedruckten Kommandos ein (sqlite> ist die Eingabeaufforderung von SQLite): sqlite> .headers on sqlite> .mode line
Die oberste Ebene des Datenmodells ist CacheGroups. Sie besitzt eine Zeile für jede Version des Manifests. Tippen Sie das fett gedruckte Kommando ein (und vergessen Sie das Semikolon nicht): sqlite> select * id manifestHostHash manifestURL newestCache
from CacheGroups; = 1 = 2669513278 = http://jonathanstark.com/labs/kilo10/kilo.manifest = 7
Wie Sie sehen können, habe ich vier Cache-Gruppen auf meiner Maschine. Sie haben zu diesem Zeitpunkt möglicherweise nur eine. Die Felder lösen sich so auf: id
Eine eindeutige, automatisch hochzählende Seriennummer, die der Zeile zugeordnet ist. Jedes Mal, wenn der mobile Safari eine Zeile dieser Tabelle hinzufügt, wird diese Zahl um eins erhöht. Wird ein Eintrag gelöscht, sehen Sie Lücken in der Aufzählung. manifestHostHash Wird mit manifestURL genutzt, um den Cache eindeutig zu identifizieren. manifestURL
Der Speicherort der entfernten Manifestdatei. newestCache
Dies ist die Zeilen-ID eines Caches (zum Beispiel ein Fremdschlüssel der CachesTabelle), die angibt, welcher Cache genutzt werden soll.
Fehlerbehebung | 113
Eine Spalte in einer Datenbank wird Schlüssel (key) genannt, wenn sie etwas identifiziert. Ein eindeutiger Schlüssel (unique key) identifiziert eine Zeile unverwechselbar. Ein Primärschlüssel (primary key) ist ein eindeutiger Schlüssel, der von Ihnen auserkoren wurde, um für die Identifikation von Zeilen zu sorgen. Zum Beispiel sind hier zwei Spalten potenzielle eindeutige Schlüssel, da es jeweils nur eine mögliche Zeile für jeden denkbaren Wert der entsprechenden Spalte in der Tabelle CacheGroups gibt: id und manifestURL. Allerdings ist id ein einfacher Zahlenschlüssel, der sehr leicht und vor allem schnell verglichen werden kann (und es wird weniger Speicher verbraucht, wenn andere Tabellen darauf verweisen). Damit ist id sowohl ein eindeutiger Schlüssel als auch der Primärschlüssel für die Tabelle CacheGroups. Ein Fremdschlüssel (foreign key) ist ein Link von einer Tabelle zu einer anderen. Die Spalte cacheGroup in der Tabelle Caches (die wir als Nächstes betrachten) identifiziert eine Zeile in der Tabelle CachedGroups, wodurch eine Verbindung von der Zeile einer Tabelle zu einer anderen hergestellt wird.
Schalten Sie nun in den Spaltenmodus um und wählen Sie alle Zeilen der Tabelle Caches aus: sqlite> .mode column sqlite> select * from Caches; id cacheGroup ---------- ---------6 2 7 1 13 5 14 6
Die Tabelle Caches besitzt nur zwei Felder: id (Primärschlüssel für die Caches-Zeile) und cacheGroup (Fremdschlüssel, der die Caches-id mit einer Zeile der Tabelle CacheGroups verknüpft). Wenn Safari gerade dabei wäre, einen neuen Cache herunterzuladen, gäbe es zwei Cache-Zeilen für die CacheGroup (eine aktuelle und eine temporäre). In allen anderen Fällen gibt es nur eine Cache-Zeile pro CacheGroup. Lassen Sie uns nun alle Zeilen der Tabelle ChacheEntries auswählen: sqlite> select * from CacheEntries; cache type resource ---------- ---------- ---------6 1 67 6 4 68 6 2 69 7 4 70 7 4 71 7 4 72 7 4 73 7 2 74 7 4 75
Hier gibt es nicht viel zu sehen. Es gibt lediglich zwei Fremdschlüssel (cache, der ein Fremdschlüssel zur Spalte Caches.id ist, und resource, der Fremdschlüssel für CacheResources.id) sowie ein type-Feld. Ich werde diese Anfrage noch einmal wiederholen und sie mit der Tabelle CacheResources verbinden, damit Sie sehen können, wie type mit den echten Dateien korrespondiert. Beachten Sie, dass ich zuerst die Spaltenbreite setze, damit die URLs nicht abgeschnitten werden (die Zeichenfolge …> bedeutet, dass ich zuerst die Eingabetaste gedrückt habe, bevor ich den Befehl mit dem Semikolon abgeschlossen habe): sqlite> .width 5 4 8 24 80 sqlite> select cache, type, resource, mimetype, url ...> from CacheEntries,CacheResources where resource=id order by type; -- -- --- ----------- -------------------------------------------------------------6 1 67 text/htm... http://jonathanstark.com/labs/cache-manifest-bug/ 7 1 78 text/htm... http://jonathanstark.com/labs/kilo10/#home 13 1 169 text/htm... http://jonathanstark.com/labs/kilo11/#home 14 1 179 text/htm... http://jonathanstark.com/labs/app-cache-3/ 6 2 69 text/cac... http://jonathanstark.com/labs/cache-manifest-bug/test.manifest 7 2 74 text/cac... http://jonathanstark.com/labs/kilo10/kilo.manifest 13 2 164 text/cac... http://jonathanstark.com/labs/kilo11/kilo.manifest 14 2 181 text/cac... http://jonathanstark.com/labs/app-cache-3/demo.manifest 6 4 68 image/pn... http://jonathanstark.com/labs/kilo10/icon.png 7 4 70 text/css... http://jonathanstark.com/labs/kilo10/jqtouch/jqtouch.css 7 4 71 image/pn... http://jonathanstark.com/labs/kilo10/icon.png 7 4 72 text/css... http://jonathanstark.com/labs/kilo10/themes/jqt/theme.css
Wenn wir uns diese Liste betrachten, wird klar, dass Typ 1 eine Web-App-Startdatei, Typ 2 eine Manifestdatei, Typ 4 eine statische Ressource und Typ 16 eine Ausweichressource ist. Schalten wir wieder in den Zeilenmodus zurück und ziehen wir uns einige Daten aus der Tabelle CacheResources, um zu sehen, was dort passiert. Hier ist die Ressourcenzeile 73 (wenn Sie das bei sich ausprobieren möchten, ersetzen Sie die 73 durch einen gültigen idWert aus der Ergebnisliste der vorherigen CacheResources-Abfrage): sqlite> .mode line sqlite> select * from CacheResources where id=73; id = 73 url = http://jonathanstark.com/labs/kilo10/startupScreen.png statusCode = 200 responseURL = http://jonathanstark.com/labs/kilo10/startupScreen.png mimeType = image/png textEncodingName = headers = Date:Thu, 24 Sep 2009 19:16:09 GMT X-Pad:avoid browser bug Connection:close Content-Length:12303 Last-Modified:Fri, 18 Sep 2009 05:02:26 GMT Server:Apache/2.2.8 (Fedora) Etag:"52c88b-300f-473d309c45c80" Content-Type:image/png
116 | Kapitel 6: Der Weg zur Offline-App
Accept-Ranges:bytes data = 73
Wenn Sie damit vertraut sind, wie HTTP-Anfragen funktionieren, werden Sie feststellen, dass dies genau die Daten sind, um eine Netzwerkantwort zu simulieren. Hier hat der mobile Safari alle Informationen, die er benötigt, um eine PNG-Datei an den Browser auszuliefern (in diesem Fall an sich selbst; er speichert alle benötigten Informationen, um das Verhalten des Webservers zu simulieren, der ursprünglich die Dateien ausgeliefert hat). Nun, tatsächlich hat er alle Informationen mit Ausnahme der eigentlichen Bildinformationen. Diese Bilddaten werden in einer BLOB-Datei in CacheResourceData gespeichert. Ich würde sie ja hier abdrucken, aber es ist eine Binärdatei, und man würde außer Buchstabensalat nicht viel sehen. Es ist interessant zu erkennen, dass sogar Textdateien (HTML, CSS, JavaScript usw.) ebenfalls als Binärdaten im blob-Feld von CacheResourceData abgespeichert werden. Lassen Sie uns einen Blick auf die Tabelle CacheWhitelistURL werfen, die alle Elemente enthält, die im NETWORK-Abschnitt des Manifests angegeben wurden: sqlite> .width 80 5 sqlite> .mode column sqlite> select * from CacheWhitelistURLs; url cache ---------------------------------------------------------------------------- -----http://jonathanstark.com/labs/kilo10/themes/jqt/img/back_button.png 7 http://jonathanstark.com/labs/kilo10/themes/jqt/img/back_button_clicked.png 7 http://jonathanstark.com/labs/kilo10/themes/jqt/img/button.png 7 http://jonathanstark.com/labs/kilo10/themes/jqt/img/button_clicked.png 7 http://jonathanstark.com/labs/kilo10/themes/jqt/img/chevron.png 7 http://jonathanstark.com/labs/kilo10/themes/jqt/img/toolbar.png 7
Hier haben wir nur die Cache-ID und die URL der Onlineressource. Wenn die Cache-ID 7 vom Browser angefragt wird, werden die sechs Bilder von ihrem entfernten Speicherort abgerufen, falls der Anwender online ist. Ist der Anwender offline, werden sie als ungültiger Grafiklink angezeigt, da sie nicht lokal zwischengespeichert wurden. Man beachte, dass die URLs vollständig zu absoluten URLs ausgeweitet wurden, auch wenn sie im Manifest als relative URLs angegeben wurden. Lassen Sie uns abschließend einen Blick auf die Tabelle FallbackURLs werfen (alles aus dem FALLBACK-Abschnitt des Manifests): sqlite> .mode line sqlite> select * from FallbackURLs; namespace = http://jonathanstark.com/labs/app-cache-3/images/ fallbackURL = http://jonathanstark.com/labs/app-cache-3/images/offline.jpg cache = 14
Wie Sie sehen können, habe ich nur eine Zeile in der Tabelle FallbackURLs. Wenn die Cache-ID 14 vom Browser angefragt wird und irgendeine URL, die mit http://jonathanstark.com/labs/app-chache-3/images/ anfängt, aus welchem Grund auch immer fehl-
Fehlerbehebung | 117
schlägt (Anwender ist offline, Bilddatei fehlt oder Ähnliches), wird stattdessen die fallbackURL genutzt. Ich entschuldige mich, falls dieser Abschnitt ein wenig komplex ist, aber an dieser Stelle ist das alles, was wir haben. Möglicherweise bauen die Browserhersteller in Zukunft irgendwelche Benutzeroberflächen ein, die es uns erlauben, den Application Cache zu betrachten – analog zu denen für localStorage, sessionStorage und die clientseitige Datenbank –, aber bis dahin ist dies unsere einzige Möglichkeit, in den Tiefen der clientseitigen Speicherung herumzustöbern.
Was Sie gelernt haben In diesem Kapitel haben Sie gelernt, wie Sie dem Anwender Zugang zu einer Web-App geben, auch wenn er keine Verbindung zum Internet hat. Dieser Offlinemodus gilt sowohl für Apps, die im mobilen Safari geladen werden, als auch für solche, die im Vollbildmodus von einem Webclip-Icon aus gestartet werden. Mit dieser Erweiterung Ihres Programmierer-Handwerkszeugs haben Sie nun die Möglichkeit, eine VollbildmodusOffline-App zu erstellen, die fast nicht mehr von einer nativen App aus dem App Store zu unterscheiden ist. Natürlich ist eine reine Web-App wie diese noch durch die Sicherheitsrichtlinien, die für alle Web-Apps gelten, eingeschränkt. So kann eine Web-App beispielsweise nicht auf das Adressbuch, die Kamera, die Beschleunigungssensoren oder die Vibrationsfunktion des iPhone zugreifen. Im nächsten Kapitel werde ich dieses Thema – und noch weitere – mit einem Open Source-Projekt namens PhoneGap angehen.
118 | Kapitel 6: Der Weg zur Offline-App
Kapitel 7
KAPITEL 7
Der Weg zur nativen App
Unsere Web-App kann nun vieles, das auch native Apps können: vom Home-Screen starten, im Vollbildmodus laufen, Daten lokal auf dem iPhone speichern und im Offlinemodus arbeiten. Wir haben es für das Gerät ansprechend formatiert und Animationen eingerichtet, die sehr nativ aussehen, um dem Anwender Rückmeldung und Kontextgefühl zu geben. Allerdings gibt es noch zwei Dinge, die unsere App nicht kann: Sie kann weder Gerätefunktionen noch Hardware ansprechen (zum Beispiel Ortung, Beschleunigungssensoren, Sound und Vibration), und sie kann nicht im App Store veröffentlicht werden. In diesem Kapitel lernen Sie, wie Sie diese Lücke mit PhoneGap schließen können.
Einführung in PhoneGap PhoneGap ist ein Open Source-Entwicklertool, das von Nitobi (http://www.nitobi.com/) entwickelt wurde, um als Brücke zwischen Webapplikationen und mobilen Geräten zu dienen. iPhone-, Google-Android- und BlackBerry-Betriebssysteme werden aktuell unterstützt. Nokia und Windows Mobile sind gerade in der Entwicklung. Trotz seines hohen Bekanntheitsgrads ist das iPhone noch weit davon entfernt, das am weitesten verbreitete mobile Gerät zu sein. Die mobile Landschaft ist von verschiedenen Geräten, Plattformen und Betriebssystemen übersät. Wenn Sie Webentwickler sind, kennen Sie sich ja wahrscheinlich mit der Mühe aus, etwa zehn verschiedene Browser auf ca. zehn unterschiedlichen Betriebssystemen auszutesten. Multiplizieren Sie das mit 100, und Sie sind in der Mobilwelt. Es gibt einfach keine kostengünstige Möglichkeit, diese ganzen möglichen Kombinationen zu entwickeln und zu testen. Dank Apple ist es nun klar, dass es einen Markt für Geräte gibt, die eine vollumfängliche Websurferfahrung bieten. Da immer mehr Hersteller hoch qualitative Webbrowser in ihre Telefone einbauen, wird die Arbeit, die wir bisher geleistet haben, noch wertvoller. Indem wir eine Web-App gebaut haben, haben wir effektiv einen Großteil der Komplexi-
| 119
tät der Mobilentwicklung umschifft. Wir können einen Quelltext an verschiedene Geräte und Plattformen ausliefern. Selbstverständlich haben unterschiedliche Geräte auch unterschiedliche Funktionen. Möglicherweise unterstützt ein spezielles Telefon kein Multi-Touch oder hat keine Beschleunigungssensoren. Selbst wenn Geräte die gleichen Funktionen haben, kann jedes Gerät diese dem Entwickler auf unterschiedlichen Wegen zur Verfügung stellen. PhoneGap abstrahiert die APIs für die am meisten verbreiteten Handyfunktionen, damit Entwickler von mobilen Applikationen denselben Quelltext überall verwenden können. Sie müssen Ihre App zwar immer noch manuell mit dem entsprechenden SDK des Herstellers ausliefern, aber sie brauchen an der Programmierung nichts mehr zu ändern. Es gibt noch einige andere Projekte und Produkte, die die gleiche Absicht verfolgen wie PhoneGap. Das sind beispielsweise RhoMobile (http://rhomobile.com/) und Titanium Mobile (http://www.appcelerator.com/). Ich kenne mich mit beiden nicht gut genug aus, um sie gegenüberzustellen und zu vergleichen, aber vielleicht wollen Sie ein Auge darauf werfen, um zu sehen, ob sie Ihren Bedürfnissen besser entsprechen als PhoneGap.
Da dies ja ein iPhone-Buch ist, werde ich mich auf den iPhone-Teil von PhoneGap konzentrieren. Behalten Sie einfach im Hinterkopf, dass Sie Ihre Anwendungen auch für Android, BlackBerry und Windows Mobile-Geräte mit keinem oder einem sehr geringen Aufwand ausliefern können. Im Fall des iPhone bedeutet diese SDK-Anforderung, dass Sie einen Mac mit installiertem Xcode benötigen und für die Registrierung im iPhone Developer Program, so leid es mir tut, Geld bezahlen müssen. Sie können das SDK erhalten, indem Sie sich als Apple Developer unter http://developer.apple.com/iphone/ registrieren. Diese Registrierung kostet nichts, aber Sie werden dem iPhone Developer Program beitreten müssen, wenn Sie Ihre Apps in den App Store stellen möchten oder sie auch nur auf Ihrem iPhone testen wollen. Sie können das kostenlose SDK allerdings dazu verwenden, Ihre Apps vorab im iPhone Simulator, der zum iPhone SDK gehört, zu testen. Wenn Sie also als iPhone-Entwickler registriert sind, kehren Sie zur Seite http://developer.apple.com/iphone/ zurück, melden sich an und laden das iPhone SDK herunter. Das iPhone SDK beinhaltet Xcode, das ist die Entwicklungsumgebung, die Sie verwenden werden, um Ihre Apps im Simulator zu testen, auf Ihrem iPhone zu starten und sie im App Store zu veröffentlichen.
Um mit PhoneGap durchstarten zu können, müssen Sie es zuerst herunterladen. Das können Sie, indem Sie http://github.com/phonegap/phonegap aufrufen und auf DOWNLOAD SOURCE klicken (Abbildung 7-1). Vorausgesetzt, dass Sie an einem Mac arbeiten, werden Sie die ZIP-Version herunterladen wollen. Sobald der Download abgeschlossen ist, entpacken Sie die Datei auf Ihrem Schreibtisch (Abbildung 7-2).
120 | Kapitel 7: Der Weg zur nativen App
Abbildung 7-1: Laden Sie die aktuellste Version von PhoneGap bei GitHub herunter. Wir gehen im Folgenden von Version 0.8.0 aus, die bei Entstehung des Buchs am stabilsten lief.
Abbildung 7-2: Entpacken Sie das PhoneGap-Archiv auf Ihrem Schreibtisch.
Einführung in PhoneGap | 121
Das PhoneGap-Archiv enthält einige gerätespezifische Verzeichnisse (zum Beispiel android, iphone, blackberry) und einige Bibliothek- und Werkzeugdateien und -verzeichnisse (Abbildung 7-3). Wir werden uns ausschließlich mit dem iphone-Verzeichnis beschäftigen.
Abbildung 7-3: Das PhoneGap-Stammverzeichnis enthält mehrere Unterordner für verschiedene mobile Plattformen.
Der Ordner iphone enthält die Startdateien für ein Xcode-Projekt (Abbildung 7-4). Diese Dateien haben nichts Magisches an sich, außer dass sie für Sie und nicht von Ihnen geschrieben wurden; es sind die ganz gewöhnlichen Arten von Dateien, die Sie in jedem Xcode-Projekt finden können. Im Ordner iphone gibt es einen Unterordner namens www. Den können Sie sich als Webstammverzeichnis der Applikation vorstellen. Er enthält standardmäßig zwei Dateien namens index.html und master.css. Sie werden von der PhoneGap-Demoanwendung genutzt. Wir brauchen sie nicht, so dass Sie beide Dateien löschen können (Abbildung 7-5). Als Nächstes kopieren Sie alle Dateien der Kilo-App, die wir bereits erstellt haben, in den www-Ordner (halten Sie bei einem Mac die Option-Taste gedrückt, um eine Kopie zu erzeugen). Ändern Sie bitte nichts an der Dateistruktur oder an den Namen; kopieren Sie einfach alles so, wie es ist (Abbildung 7-6).
122 | Kapitel 7: Der Weg zur nativen App
Abbildung 7-4: Der iphone-Unterordner von PhoneGap enthält die Startdateien für ein Xcode-Projekt.
Abbildung 7-5: Löschen Sie die beiden Standarddateien aus dem www-Ordner.
Einführung in PhoneGap | 123
Wenn Sie im HTML-Tag der index.html einen Manifestlink eingefügt haben, wie es in Kapitel 6 beschrieben wurde, müssen Sie ihn entfernen. Er ist überflüssig, wenn Sie PhoneGap nutzen, und kann für Leistungsprobleme verantwortlich sein.
Abbildung 7-6: Kopieren Sie Ihre gesamte Web-App in das www-Verzeichnis.
Öffnen Sie schließlich Ihre index.html-Datei, fügen Sie die folgende Zeile in den headBereich ein und speichern Sie die Datei danach. <script type="text/javascript" src="phonegap.js" charset="utf-8">
Sie brauchen die Datei phonegap.js nicht in Ihr www-Verzeichnis zu kopieren. Wenn Sie die App kompilieren, kümmert sich Xcode für Sie darum. Stellen Sie sicher, dass Ihre Hauptseite index.html heißt; andernfalls weiß PhoneGap nicht, welches File gestartet werden muss.
Jetzt sind wir startklar und können unsere App testen. Öffnen Sie das Projekt in Xcode, indem Sie auf die Datei PhoneGap.xcodeproj im Finder doppelklicken. Sobald das Projektfenster geöffnet ist, stellen Sie sicher, dass Sie die aktuellste Version des iPhone-Simu-
124 | Kapitel 7: Der Weg zur nativen App
lators (3.1.3, während ich schreibe) als aktives SDK ausgewählt haben, und klicken Sie auf die Schaltfläche BUILD AND RUN (Abbildung 7-7). Nach etwa zehn Sekunden sollte der iPhone Simulator erscheinen und Ihre App starten. Falls der Simulator nicht startet, bedeutet das, dass es einen Fehler im Projekt gibt. Suchen Sie nach einer roten Nummer in der unteren rechten Ecke des Xcode-Fensters; das ist die Anzahl der Fehler, die aufgetreten sind. Klicken Sie auf die Zahl, um genauere Informationen über den Fehler aufzurufen. Schauen Sie nach, wo irgendetwas schiefgelaufen ist. Wenn es sich um ein Problem handelt, das Sie nicht selbst lösen können, besuchen Sie die PhoneGap-Community-Seite http://phonegap.com/community. Durchsuchen Sie das Wiki und die Google-Group nach Lösungen zu Ihrem Problem. Wenn Sie eine Frage veröffentlichen, geben Sie so viele Informationen wie möglich über den Fehler weiter.
Abbildung 7-7: Wählen Sie den iPhone-Simulator 3.1.3 als Ihr aktives SDK aus.
Nun sollte Ihre Anwendung im iPhone-Simulator als native App laufen. Das scheint nicht so erstaunlich zu sein, da die App ja ganz genauso aussieht und sich auch genauso verhält wie die Vollbild-Web-App, die wir schon in Kapitel 6 gestartet haben. Allerdings gibt es einen gravierenden Unterschied: Wir können nun damit beginnen, Gerätefunktionen zu nutzen, die vorher unerreichbar waren. Bevor wir dazu kommen, müssen wir allerdings noch ein wenig aufräumen.
Einführung in PhoneGap | 125
Die gesamte Bildschirmhöhe nutzen Sie werden feststellen, dass es eine 40px-Lücke unten im Fenster gibt (Abbildung 7-8). Das passiert, weil jQTouch nicht erkennt, dass wir uns im Vollbildmodus befinden. Deshalb reserviert es Platz für die Safari-Werkzeugleiste. Das mag aus Sicht von jQTouch sinnvoll sein, denn die App läuft technisch gesehen nicht als Vollbild-Web-App. Allerdings läuft sie als native App und hat deshalb Zugriff auf den gesamten Bildschirm. Glücklicherweise lässt sich das ganz einfach beheben. Öffnen Sie die kilo.js und fügen Sie den folgenden Quelltext in die »document ready«-Funktion ein. if (typeof(PhoneGap) != 'undefined') { $('body > *').css({minHeight: '460px !important'}); }
Nachdem Sie nun das PhoneGap-Projekt in Xcode geöffnet haben, möchten Sie vielleicht auch den Xcode-Editor ausprobieren. Um die Datei kilo.js in Xcode zu bearbeiten, stellen Sie sicher, dass die PhoneGap-Gruppe im Bedienfeld GROUPS & FILES auf der linken Seite des Xcode-Fensters geöffnet ist. Klappen Sie den www-Ordner auf und klicken Sie auf kilo.js, um die Datei im Xcode-Editor zu öffnen.
Abbildung 7-8: Sie sehen hier eine 40px-Lücke am unteren Bildschirmrand.
Dieser Code verwendet den typeof-Operator, um sicherzugehen, dass ein PhoneGapObjekt definiert wurde. Wenn der Code innerhalb von PhoneGap läuft, wird diese Bedingung true ergeben. Läuft der Code in einer Web-App, ist das PhoneGap-Objekt undefiniert, und die Bedingung ergibt false. Wenn die App mit PhoneGap gestartet wird, erhalten die direkten Kinder des HTMLbody-Elements eine Minimalhöhe von 460px. Um sicherzugehen, dass diese Deklaration auch wirklich wirkt, habe ich die !important-Direktive hinzugefügt, um jede Anweisung 126 | Kapitel 7: Der Weg zur nativen App
im Stylesheet zu überschreiben, die mit dieser in Konflikt steht. Nun wird die App das Fenster komplett ausfüllen, sobald sie gestartet wurde (Abbildung 7-9).
Abbildung 7-9: Nachdem die Höhe im body von 420px auf 460px geändert wurde, nimmt die App den gesamten Bildschirm ein.
Den Titel und das Programmsymbol anpassen Als Nächstes sollten wir den Titel und das Programmsymbol der App ändern. Standardmäßig heißen PhoneGap-Apps »PhoneGap« und haben ein blaues Icon mit einer Leiter (Abbildung 7-10).
Abbildung 7-10: Der Standardname und das Standardsymbol für unsere App.
Einführung in PhoneGap | 127
Um den Namen der App auf dem Home-Bildschirm zu ändern, öffnen Sie (falls noch nicht geschehen) das Projekt in Xcode, indem Sie auf die Datei PhoneGap.xcodeproj im Finder doppelklicken. Sobald es geöffnet ist, navigieren Sie im GROUPS & FILES-Bedienfeld nach PHONEGAP → CONFIG → INFO.PLIST. Nun erscheint unten rechts im XcodeFenster die Datei Info.plist. Wie Sie sehen, ist der Anzeigename der Anwendung (bundle display name) als PhoneGap angegeben (Abbildung 7-11). Doppelklicken Sie auf PHONEGAP und ändern Sie ihn in KILO (Abbildung 7-12). Speichern Sie die Datei danach und säubern Sie das Projekt (indem Sie auf BUILD → CLEAN klicken). Klicken Sie danach auf BUILD AND RUN, um die App zu kompilieren und im iPhone Simulator zu starten. Klicken Sie im Simulator unten auf den Home-Button, um zum Home-Bildschirm zurückzukehren. Wie Sie sehen, wurde der Name der App von PHONEGAP in KILO geändert (Abbildung 7-13).
Abbildung 7-11: Der Name der App ist noch PhoneGap.
Als Nächstes ändern wir das Programmsymbol von der PhoneGap-Vorgabe (das Leiterbild aus Abbildung 7-10) in unser eigenes Icon. Das Dateiformat ist für das App-Icon und das Webclip-Icon gleichermaßen ein 57-x-57px-PNG-Bild. Deshalb können Sie hier wieder das Symbol verwenden, das Sie in »Ein Icon für den Home-Bildschirm hinzufügen« auf Seite 49 erstellt haben.
128 | Kapitel 7: Der Weg zur nativen App
Abbildung 7-12: Der Name der App ist nun passender gewählt (Kilo).
Abbildung 7-13: Der neue App-Name erscheint jetzt auf dem Home-Bildschirm des iPhone.
Einführung in PhoneGap | 129
Der einzige Unterschied besteht darin, dass wir beim Webclip-Icon das iPhone daran hindern konnten, zusätzlichen Schimmer über die Grafik zu legen, indem wir die Einstellung addGlossToIcon in jQTouch verändert hatten; diese Einstellung hat keinen Effekt auf PhoneGap. Um PhoneGap daran zu hindern, das Schimmern einzufügen, müssen Sie wieder die Info.plist öffnen (Config/Info.plist im GROUPS & FILES-Bedienfeld) und dort das Häkchen neben UIPrerenderedIcon setzen (eventuell müssen Sie diese Einstellung erst der Info.plist hinzufügen; siehe »Einstellungen zur Info.plist hinzufügen« auf Seite 130).
Einstellungen zur Info.plist hinzufügen Sollten Sie die Einstellung UIPrerenderedIcon nicht in Ihrer Info.plist finden, können Sie sie einfügen, indem Sie diesen Schritten folgen: 1. Wählen Sie CONFIG/INFO.PLIST im GROUPS & FILES-Bedienfeld rechts im Xcode-Fenster (Abbildung 7-14). 2. Klicken Sie mit rechts auf das letzte Element der Info.plist, um das Kontextmenü anzuzeigen. 3. Wählen Sie ADD ROW aus dem Kontextmenü aus (Abbildung 7-15). 4. Tippen Sie UIPrerenderedIcon in das Feld KEY ein (Abbildung 7-16). 5. Drücken Sie die Eingabetaste, um Ihren Eintrag zu speichern. Die Zeile sollte nun blau hinterlegt sein (Abbildung 7-17). 6. Klicken Sie erneut mit rechts auf die blau hervorgehobene Zeile, um das Kontextmenü anzuzeigen. Wählen Sie hier BOOLEAN aus dem VALUE TYPE-Untermenü aus (Abbildung 7-18). Es sollte eine Checkbox in der VALUE-Spalte erscheinen. 7. Setzen Sie das Häkchen in der Checkbox, um Xcode anzuweisen, keinen Glanz über das Icon zu legen (Abbildung 7-19). Säubern Sie das Projekt (indem Sie auf BUILD → CLEAN klicken). Klicken Sie danach auf BUILD AND RUN, und Sie werden sehen, dass das Programmsymbol nun ohne Glanz erscheint.
Das PhoneGap-Standardprogrammsymbol heißt icon.png und liegt im iphone-Verzeichnis von PhoneGap (Abbildung 7-20). Ersetzen Sie die Datei durch Ihr eigenes Programmsymbol (Abbildung 7-21 und Abbildung 7-22), säubern Sie das Projekt (auf BUILD → CLEAN klicken) und klicken Sie anschließend auf BUILD AND RUN. Der iPhone-Simulator sollte sich öffnen und die App starten. Klicken Sie auf den Home-Button, um zum HomeBildschirm zu wechseln. Sie werden feststellen, dass das Programmsymbol nun einen mit Schokolade überzogenen Donut mit bunten Streuseln vor einem pinkfarbenen Hintergrund zeigt (Abbildung 7-23).
130 | Kapitel 7: Der Weg zur nativen App
Abbildung 7-14: Wählen Sie Config/Info.plist im Groups & Files-Bedienfeld im Xcode-Hauptfenster.
Abbildung 7-15: Wählen Sie anschließend »Add Row« aus dem Kontextmenü.
Einführung in PhoneGap | 131
Abbildung 7-16: Tippen Sie UIPrerenderedIcon in das Key-Feld.
Abbildung 7-17: Drücken Sie die Eingabetaste, um Ihren Eintrag im »Key«-Feld abzuspeichern. 132 | Kapitel 7: Der Weg zur nativen App
Abbildung 7-18: Wählen Sie Boolean aus dem »Value Type«-Untermenü aus.
Abbildung 7-19: Setzen Sie das Häkchen, um Xcode zu sagen, dass kein Glanz auf dem Icon gewünscht ist.
Einführung in PhoneGap | 133
Abbildung 7-20: Das Standardprogrammsymbol ist eine weiße Leiter auf blauem Grund.
Abbildung 7-21: Unser eigenes Icon ist ein Schokoladendonut mit Streuseln auf pinkfarbenem Grund.
134 | Kapitel 7: Der Weg zur nativen App
Abbildung 7-22: Ersetzen Sie die Datei icon.png im iphone-Verzeichnis durch Ihre eigene 57-x-57pxPNG-Grafik.
Abbildung 7-23: Nun erscheint unser eigenes Programmsymbol auf dem Home-Bildschirm.
Einen Startbildschirm erstellen Als Nächstes müssen wir den Startbildschirm vom PhoneGap-Standard (Abbildung 7-24) in unseren eigenen Startbildschirm ändern. Im Kapitel »Eine eigene Startgrafik hinzufügen« auf Seite 52 haben Sie bereits einen Startbildschirm entworfen, wenn die Web-App im Vollbildmodus von einem Webclip-Icon vom Home-Bildschirm aus gestartet wird. Für Vollbild-Web-Apps, die eine graue oder schwarze Statusleiste verwenden, muss diese Grafik 320px x 460px groß sein, und für Apps, die eine schwarz-durchsichtige Statusleiste nutzen, muss sie 320px x 480px groß (also 20px größer) sein. Für PhoneGap muss das Startbild immer 320px x 480px groß sein, egal welcher Statuszeilentyp verwendet wird. Sollten Sie zuvor also eine 320px x 460px große Grafik erstellt haben, fügen Sie bitte 20px in der Höhe hinzu.
Einführung in PhoneGap | 135
Abbildung 7-24: Wir müssen den Standard-Startbildschirm der App grafisch anpassen.
Die Standard-Startgrafik von PhoneGap heißt Default.png und befindet sich im iphoneOrdner von PhoneGap (Abbildung 7-25). Ersetzen Sie die Startgrafik durch Ihre eigene Grafik (Abbildung 7-26 und Abbildung 7-27). Säubern Sie danach das Projekt und klicken Sie auf BUILD & RUN. Nun sollte sich der iPhone-Simulator öffnen und die App starten, die während des Starts Ihre Grafik anzeigt (Abbildung 7-28).
Abbildung 7-25: Die Standard-Startgrafik zeigt »PhoneGap« als grauen Text auf weißem Grund. 136 | Kapitel 7: Der Weg zur nativen App
Die App auf dem iPhone installieren Im nächsten Abschnitt werden wir Ton, Vibration, Alarm und weitere Features zur KiloBeispiel-App hinzufügen. Einige dieser Funktionen können nicht im iPhone-Simulator getestet werden. Deshalb müssen Sie Kilo auf einem realen iPhone installieren, bevor wir irgendetwas davon testen können.
Abbildung 7-26: Der angepasste Startbildschirm zeigt »Kilo« als grauen Text auf schwarzem Grund.
Abbildung 7-27: Ersetzen Sie die Datei Default.png im iphone-Ordner durch eine eigene 320-x-480pxPNG-Grafik.
Die App auf dem iPhone installieren
| 137
Abbildung 7-28: Nun erscheint unsere angepasste Startgrafik, wenn die App startet.
Damit Sie eine App auf dem iPhone installieren können, setzt Apple voraus, dass die App, das iPhone und der Entwickler (also Sie) eindeutig identifiziert sind. Diese drei Datenstücke sind in einer Datei namens Provisioning Profile zusammengefasst, die Sie in Xcode hinzufügen müssen. Damit Sie ein Provisioning Profile erstellen können, müssen Sie zuerst beim iPhone Developer Program registriert sein. Dann können Sie den »Development Provisioning Assistant« (PDA) starten, den Sie in der Rubrik »iPhone Developer Program Portal« der iPhone-Entwickler-Seite (http://developer.apple.com/iphone/) finden. Sie werden mit ihm ein paar Abstecher in das Programm Schlüsselbundverwaltung (zu finden in /Programme/ Dienstprogramme) machen, um Zertifikatsanfragen zu starten und signierte Zertifikate zu erstellen, die Sie vom Portal in Ihren Schlüsselbund herunterladen können. Der DPA begleitet Sie gut durch die Schritte, die Sie ausführen müssen, um Ihr Provisioning Profile zu installieren. Deshalb beschränke ich mich hier auf ein paar Tipps: • Als ich mit der iPhone-App-Entwicklung anfing, erstellte ich ein paar App-IDs zu Testzwecken im Program Portal, weil ich dachte, dass man sie später bearbeiten oder löschen könnte. Nun, da lag ich falsch: Sie können App-IDs nicht bearbeiten oder löschen. Das heißt also, dass ich zwei Jahre später immer noch auf »JSC temporäre App-ID« starre, wenn ich mich in das Developer Portal einlogge. Wenn Sie so veranlagt sind wie ich, wird Sie das in den Wahnsinn treiben. Machen Sie diesen Fehler also besser nicht! • Halten Sie Ihre Eingaben im DPA kurz, aber aussagekräftig. Wenn Ihre Beschreibungen zu vage sind, kommen Sie durcheinander, wenn Sie mehrere Einträge hinzufügen. Sind die Bezeichnungen allerdings zu lang, werden sie in der Onlineansicht abgeschnitten. Versuchen Sie, sich möglichst auf 20 Zeichen zu beschränken. • Wenn Sie nach einer App-ID-Beschreibung gefragt werden, verwenden Sie einfach den Namen Ihrer App (und gegebenenfalls eine Versionsnummer, falls Sie mehrere Versionen gleichzeitig im App Store anbieten möchten – zum Beispiel Kilo2).
138 | Kapitel 7: Der Weg zur nativen App
• Werden Sie nach einer Gerätebeschreibung (device description) gefragt, fügen Sie den Gerätetyp (iPhone, iPod touch, iPad usw.) und die Hardwareversion (1G, 2G, 3G, 3GS ...) hinzu. Die Version des Betriebssystems sollten Sie weglassen, da sich diese ändern kann, ohne das Provisioning Profile ungültig zu machen. Behalten Sie auch im Hinterkopf, dass Sie den Besitzer des Geräts angeben sollten, wenn Sie Betaversionen an Tester verteilen möchten (hier könnten Sie Initialen nutzen: ELS iPhone 3GS, JSC iPhone 2G, JSC iPhone 2G, JSC iPhone 3G, JSC Touch 1G usw.). • Bei einer Nachfrage nach der Beschreibung für das Profil kombinieren Sie einfach den Namen der Anwendung mit dem Gerät (zum Beispiel Kilo2 auf JSC iPhone 3GS). Wenn Sie Ihr Provisioning Profile erstellt haben, müssen Sie es nur noch herunterladen und auf das Dock-Icon von Xcode ziehen, um es für Ihr Gerät verfügbar zu machen. Dadurch wird das ORGANIZER-Fenster geöffnet. Haben Sie mehrere Apps, mehrere Geräte oder beides, werden Sie ein Provisioning Profile für jede Kombination in Xcode angezeigt bekommen (Abbildung 7-29).
Abbildung 7-29: Mehrere Provisioning Profiles wurden von Xcode geladen.
Da Ihr Provisioning Profile nun in Xcode verfügbar ist, müssen Sie jetzt den Bundle Identifier in Ihrer App anpassen. Wählen Sie das passende Provisioning Profile im ORGANIZER-Fenster aus und kopieren Sie den App Identifier (Abbildung 7-30). Klicken Sie danach auf PHONEGAP → CONFIG → INFO.PLIST im GROUPS & FILES-Bedienfeld des Xcode-Hauptfensters und fügen Sie den App Identifier in das Feld BUNDLE IDENTIFIER ein. Sollte Ihr App Identifier mit einem Sternchen enden, ersetzen Sie dieses durch einen String in Form eines umgekehrten Domainnamens, zum Beispiel com.johnathanstark.kilo (Abbildung 7-31).
Die App auf dem iPhone installieren
| 139
Abbildung 7-30: Wählen Sie das Provisioning Profile für Ihre Kombination aus App und Gerät im Organizer-Fenster und suchen Sie den App Identifier heraus.
Abbildung 7-31: Fügen Sie Ihren App Identifier in das Feld »Bundle Identifier« ein und ersetzen Sie ein eventuelles Sternchen durch einen String mit »Rückwärts-Domain-Formatierung«. 140 | Kapitel 7: Der Weg zur nativen App
Stecken Sie nun Ihr iPhone an den Mac an und wählen die Einstellung »iPhone Device« als aktives SDK (Abbildung 7-32). Stellen Sie sicher, dass die ausgewählte Versionsnummer zur Version des Betriebssystems passt, das Sie auf dem Gerät installiert haben (die aktuellste Version ist gerade 3.1.3, während ich schreibe). Speichern Sie die Info.plist ab, säubern Sie das Projekt (auf BUILD → CLEAN klicken) und klicken Sie dann auf BUILD AND RUN. Nach etwa 20 Sekunden sollte die App auf Ihrem iPhone starten. Wenn Sie sie zum ersten Mal starten, werden Sie gefragt, ob das Programm Codesign auf den Schlüsselbund zugreifen darf. Außerdem wird nachgefragt, ob das Provisioning Profile auf dem iPhone installiert werden soll. Sollten Sie Fehlermeldungen erhalten, starten Sie Xcode neu und versuchen es noch einmal.
Abbildung 7-32: Wählen Sie »iPhone Device 3.1.3« als Ihr aktives SDK und klicken Sie auf »Build and Run«, um Ihre App auf Ihrem iPhone zu installieren und zu starten.
Da die App nun auf Ihrem iPhone läuft, können wir ein paar gerätespezifische Funktionen einbauen.
Das iPhone per JavaScript kontrollieren Die Bühne ist jetzt für uns vorbereitet, damit wir unsere App mit nativen Gerätefunktionen erweitern können. PhoneGap ermöglicht das, indem es einige Funktionalitäten per JavaScript zugänglich macht. Das bedeutet: Alles, was Sie tun müssen, um Ihr iPhone
Das iPhone per JavaScript kontrollieren | 141
zum Vibrieren zu bringen, ist, ein wenig JavaScript in Ihren Quelltext einzufügen, zum Beispiel: navigator.notification.vibrate();
Wirklich einfach, oder?
Akustisches Signal, Vibration und Alarm PhoneGap macht akustische Signale, Vibrationen und Alarme so einfach, dass ich sie in einem Beispiel zusammenfasse. In diesem Fall werden wir die App dazu bringen, einen Piepton zu erzeugen, zu vibrieren und einen angepassten Alarm auszugeben, wenn der Anwender etwas einträgt, das sein tägliches Kalorienbudget übersteigt. Um das zu erledigen, fügen Sie die folgende Funktion an das Ende der Datei kilo.js ein: function checkBudget() {1 var currentDate = sessionStorage.currentDate; var dailyBudget = localStorage.budget; db.transaction(2 function(transaction) { transaction.executeSql(3 'SELECT SUM(calories) AS currentTotal FROM entries WHERE date = ?;',4 [currentDate], 5 function (transaction, result) {6 var currentTotal = result.rows.item(0).currentTotal;7 if (currentTotal > dailyBudget) {8 var overage = currentTotal - dailyBudget;9 var message = 'Sie haben '+overage + ' Kalorien zuviel gegessen. + ' Fangen Sie besser an zu joggen!';j try {k navigator.notification.beep(); navigator.notification.vibrate(); } catch(e){ // Keine Entsprechung in der Web-App } try {l navigator.notification.alert(message, 'Budget-Alarm', 'Mist!'); } catch(e) { alert(message); } } }, errorHandlerm ); } ); }
142 | Kapitel 7: Der Weg zur nativen App
Hier kommt die detaillierte Beschreibung: 1 Öffnen der Funktion checkBudget(). Initialisieren der Variablen currentDate mit dem Wert, der in sessionStorage gespeichert ist (zum Beispiel dem Wert, der vom Anwender in den Einstellungen angegeben wurde), und der Variablen dailyBudget mit dem Wert, der in localStorage steht (zum Beispiel das angetippte Datum). 2 Starten einer Datenbankabfrage, um das Ausrechnen der gesamten Kalorienanzahl für den aktuellen Tag vorzubereiten. 3 Start der Methode executeSql() des Objekts transaction. Schauen wir uns die vier Parameter der Methode executeSql() genauer an: 4 Der erste Parameter ist ein vorbereiteter SQL-Ausdruck, der die SUM-Funktion nutzt, um alle Werte in der Spalte calories aufzuaddieren, die zum aktuellen Datum passen. 5 Der zweite Parameter ist ein Array mit nur einem Wert, das das Fragezeichen im vorherigen SQL-Ausdruck ersetzen soll. 6 Der dritte Parameter ist eine anonyme Funktion, die aufgerufen wird, sobald die SQL-Abfrage erfolgreich durchgeführt wurde (was wir uns gleich im Detail ansehen werden). Und hier ist auch schon die Beschreibung für das, was in der anonymen Funktion vor sich geht, die als drittes Attribut übergeben wurde: g Es geht los, indem die aktuelle Summe der ersten Zeile des Ergebnisses ausgelesen wird. Wenn wir nur die Summe einer Spalte abfragen, wird die Datenbank lediglich eine Zeile zurückliefern (zum Beispiel wird diese Abfrage immer nur eine Zeile zurückliefern). Denken Sie daran, dass die Einträge des Ergebnissatzes durch die Methode item() der rows-Eigenschaft des result-Objekts angesprochen werden und dass die Zeilen nullbasiert sind (die erste Zeile ist Zeile 0). h Hier wird geprüft, ob die Kaloriensumme das tägliche Budget übersteigt. Sollte das der Fall sein, wird der nachfolgende Block ausgeführt. i Nun wird ausgerechnet, wie stark das Budget überschritten wurde. j Hier wird eine Nachricht vorbereitet, die dem Anwender angezeigt werden soll. k Dies ist ein try/catch-Block, der versuchen wird, die Methoden beep() und vibrate() in navigator.notification aufzurufen. Diese Methoden existieren nur in PhoneGap. Wenn der Anwender die App in einem Browser gestartet hat, werden die Aufrufe fehlschlagen, und das Programm wird in den catch-Block springen. Da es keine entsprechenden Funktionen zu beep und vibrate im Browser gibt, wurde der Block einfach leer gelassen. Die PhoneGap-Methode beep() spielt eine .wav-Datei ab, sobald sie aufgerufen wird. Die Datei heißt beep.wav und lebt im iphone-Verzeichnis (Abbildung 7-33). Die Standarddatei klingt ein wenig wie eine Grille und sollte für die meisten Situatio-
Das iPhone per JavaScript kontrollieren | 143
nen gut passen. Wenn Sie aber lieber Ihren eigenen Sound verwenden möchten, erstellen Sie einfach eine .wav-Datei, nennen sie beep.wav und ersetzen die Standarddatei im Ordner iphone. l Dies ist ein try/catch-Block, der versuchen wird, die Methode alert() in navigator. notification aufzurufen. Auch diese Methode existiert nur in PhoneGap. Wenn der Anwender die App in einem Browser gestartet hat, wird auch dieser Aufruf fehlschlagen, und das Programm wird in den catch-Block springen. Die passende Entsprechung im Browser zum PhoneGap-Alarm ist ein Standard-JavaScript-Alarm, der als Alternativlösung aufgerufen wird. Es gibt einige Unterschiede zwischen dem PhoneGap-Alarm und dem nativen JavaScript-Alarm. So erlaubt PhoneGap, den Titel und den Namen der Schaltfläche frei zu wählen (Abbildung 7-34), während JavaScript das verweigert (Abbildung 7-35). Es gibt noch einen weiteren Unterschied zwischen den beiden Alarmen: Der JavaScript-Alarm ist modal, der PhoneGap-Alarm nicht. Mit anderen Worten: Die Ausführung von JavaScript wird beim Aufruf des nativen Alarms stoppen, während das Programm mit PhoneGap weiterläuft. Das wird – abhängig von der Art des Programms – kaum einen Unterschied machen, aber Sie sollten es im Hinterkopf behalten. m Der vierte Parameter ist der Name des generischen SQL-Error-Handlers, der aufgerufen wird, falls ein SQL-Fehler auftritt. Da unsere Funktion checkBudget() nun komplett ist, können wir sie aufrufen, indem wir eine einzelne Zeile in den Erfolgs-Callback der Funktion createEntry() einfügen: function createEntry() { var date = sessionStorage.currentDate; var calories = $('#calories').val(); var food = $('#food').val(); db.transaction( function(transaction) { transaction.executeSql( 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);', [date, calories, food], function(){ refreshEntries(); checkBudget(); jQT.goBack(); }, errorHandler ); } ); return false; }
144 | Kapitel 7: Der Weg zur nativen App
Nachdem Sie diese Änderungen durchgeführt haben, speichern Sie die Datei kilo.js, säubern das Projekt (BUILD → CLEAN) und klicken auf BUILD & RUN.
Abbildung 7-33: Die PhoneGap-Methode beep() spielt die beep.wav-Datei im Ordner iphone ab.
Abbildung 7-34: Der PhoneGap-Alarm ermöglicht das Ändern des Titels und der Schaltflächenbeschriftung.
Das iPhone per JavaScript kontrollieren | 145
Abbildung 7-35: Ein nativer JavaScript-Alarm lässt weder die Änderung des Titels noch der Schaltflächenbeschriftung zu.
Positionsbestimmung (Geolocation) Lassen Sie uns die Kilo-App um die Funktion erweitern, die Position, an der ein Eintrag erstellt wurde, abzuspeichern. Wenn wir diese Information ausgelesen haben, werden wir eine Kartenansicht-Schaltfläche einfügen, die die eingebaute Kartenapplikation öffnet und eine Stecknadel an den Ort steckt, an dem der Eintrag erzeugt wurde. Der erste Schritt ist, die Datenbank um die Spalten für Breitengrad (latitude) und Längengrad (longitude) zu erweitern. Ersetzen Sie dazu den CREATE TABLE-Ausdruck in der Datei kilo.js durch Folgendes: db.transaction( function(transaction) { transaction.executeSql( 'CREATE TABLE IF NOT EXISTS entries ' + ' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' + ' date DATE NOT NULL, food TEXT NOT NULL, ' + ' calories INTEGER NOT NULL, ' + ' longitude TEXT NOT NULL, latitude TEXT NOT NULL);' ); } );
Als Nächstes werden wir die Funktion createEntry() neu schreiben, die wir zuerst in »Zeilen einfügen« auf Seite 81 gesehen haben, um die aktuellen Werte für Breiten- und Längengrad abzuspeichern. Ersetzen Sie die bestehende Funktion createEntry() in der Datei kilo.js durch diese: function createEntry() {1 try {2
146 | Kapitel 7: Der Weg zur nativen App
navigator.geolocation.getCurrentPosition(3 function(position){4 var latitude = position.coords.latitude;5 var longitude = position.coords.longitude; insertEntry(latitude, longitude);6 }, function(){7 insertEntry();8 } ); } catch(e) {9 insertEntry();j } return false;k }
1 Start der Funktion createEntry(). 2 Öffnen eines try-Blocks, weil der Aufruf von navigator.geolocation fehlschlagen wird, wenn dieser Code außerhalb von PhoneGap ausgeführt wird. 3 Aufruf der Funktion getCurrentPosition() im Objekt geolocation und Übergabe von zwei Callback-Funktionen: eine für Erfolg und eine für Fehler. 4 Das ist der Beginn des Erfolg-Callbacks. Beachten Sie, dass sie einen einzigen Parameter (position) akzeptiert. 5 Diese beiden Zeilen lesen die Breiten- und Längengradkoordinaten aus dem position-Objekt aus. 6 Übergabe der Koordinaten an eine Funktion namens insertEntry(), die wir gleich betrachten werden. 7 Das ist der Anfang des Fehler-Callbacks. 8 Da wir uns im Fehler-Callback befinden, wird dies nur ausgeführt, wenn der geolocation-Aufruf fehlgeschlagen ist (möglicherweise hat der Anwender der App nicht erlaubt, Ortungsdaten auszulesen, als er danach gefragt wurde), deshalb wird die Funktion insertEntry() ohne Parameter aufgerufen. 9 Start des catch-Blocks. j Da wir uns im catch-Block befinden, bedeutet das, dass der navigator.geolocationAufruf fehlgeschlagen ist. Deshalb wird die Funktion insertEntry() ohne Parameter aufgerufen. k Hier wird false zurückgegeben, um das Standardverhalten der Navigation daran zu hindern, auf die Absendeschaltfläche des Formulars zu klicken. Sie fragen sich, wo der SQL INSERT-Ausdruck geblieben ist? Schauen wir uns die Funktion insertEntry() an. Diese neue Funktion erstellt den Eintrag in der Datenbank. Fügen Sie das Folgende in die Datei kilo.js ein: function insertEntry(latitude, longitude) {1 var date = sessionStorage.currentDate;2
1 Der Anfang der Funktion insertEntry() erlaubt es, dass die Werte für Breiten- und Längengrad übergeben werden. Auch wenn es in JavaScript keine Möglichkeit gibt, Parameter als optional zu kennzeichnen, bleiben die Werte einfach undefiniert, wenn sie nicht übergeben werden. 2 Das aktuelle Datum (currentDate) wird aus sessionStorage ausgelesen. Erinnern Sie sich, dass der Wert gesetzt wird, sobald der Anwender ein Datum aus der Datumsliste wählt? Wenn er die +-Schaltfläche gedrückt hat, um einen neuen Eintrag anzulegen, ist das Datum immer noch auf dem ausgewählten Wert. 3 Der Wert calories wird aus dem createEntry-Formular ausgelesen. 4 Der Wert food wird aus dem createEntry-Formular ausgelesen. 5 Start der Datenbanktransaktion. 6 Hier wird eine Callback-Funktion in die Transaktion eingefügt, die das Objekt transaction als einzigen Parameter besitzt. 7 Aufruf der Methode executeSql des transaction-Objekts. 8 Definition des vorbereiteten SQL-Ausdrucks mit einem Fragezeichen als DatenPlatzhalter. 9 Hier wird ein Array mit Werten an den Platzhalter übergeben. Wenn latitude und longitude nicht an die Funktion insertEntry() übergeben wurden, bleiben sie undefiniert. j Definition der Callback-Funktion im Erfolgsfall. k Definition der Callback-Funktion für Fehler. Damit wir bestätigen können, dass die Kilo-App die Positionswerte speichert, sollten wir sie irgendwo anzeigen. Lassen Sie uns ein weiteres Bedienfeld ergänzen, mit dem wir die Daten des Eintrags betrachten können. Dort fügen wir auch eine Schaltfläche ein, mit deren Hilfe wir die Position anzeigen lassen können, an der der Eintrag erzeugt wurde.
148 | Kapitel 7: Der Weg zur nativen App
Fügen Sie den folgenden Quelltext in die Datei index.html direkt vor dem schließenden body-Tag () ein: Eintrag bearbeiten Abbrechen
1
2
Kartenposition
3
Das sollte sehr ähnlich aussehen wie das NEUER EINTRAG-Bedienfeld, das wir in Beispiel 4-5 gesehen haben. Deshalb gehe ich hier nur auf ein paar Dinge ein: 1 Der Eingabetyp wurde hier auf tel gesetzt, um die Telefontastatur aufzurufen, wenn der Cursor in dieses Feld gesetzt wird. Das ist ein kleiner Hack, aber ich denke, er zahlt sich aus, denn die Tastatur passt viel besser zu diesem Feld. 2 Die Werte von Breiten- und Längengrad werden im Formular angezeigt und sind sogar editierbar. Das ergibt in der endgültigen Version wahrscheinlich keinen Sinn, aber das Testen während der Entwicklung wird dadurch vereinfacht, da man so die Position manuell verändern kann, um die Kartenansicht zu testen. 3 Diese Schaltfläche macht noch nichts, wenn man im Moment auf sie klickt; wir fügen gleich einen click-Handler hinzu. Nun müssen wir dem Anwender eine Möglichkeit geben, das neue Bedienfeld zu erreichen. Deshalb verändern wir das Verhalten des DATUM-Bedienfelds so, dass sich das neue Bedienfeld von unten hochschiebt, sobald der Anwender auf ein Datum tippt. Der erste Schritt ist, den click-Event-Handler zu verdrahten (was wir als Nächstes machen werden) und außerdem die Art zu verändern, wie die Löschen-Schaltfläche auf Klicks reagiert. Fügen Sie die drei hervorgehobenen Änderungen in die Funktion refreshEntries() in der Datei kilo.js ein: function refreshEntries() { var currentDate = sessionStorage.currentDate; $('#date h1').text(currentDate); $('#date ul li:gt(0)').remove(); db.transaction(
Das iPhone per JavaScript kontrollieren | 149
function(transaction) { transaction.executeSql( 'SELECT * FROM entries WHERE date = ? ORDER BY food;', [currentDate], function (transaction, result) { for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i); var newEntryRow = $('#entryTemplate').clone(); newEntryRow.removeAttr('id'); newEntryRow.removeAttr('style'); newEntryRow.data('entryId', row.id); newEntryRow.appendTo('#date ul'); newEntryRow.find('.label').text(row.food); newEntryRow.find('.calories').text(row.calories); newEntryRow.find('.delete').click(function(e){1 var clickedEntry = $(this).parent(); var clickedEntryId = clickedEntry.data('entryId'); deleteEntryById(clickedEntryId); clickedEntry.slideUp(); e.stopPropagation();2 }); newEntryRow.click(entryClickHandler);3 } }, errorHandler ); } ); }
1 Bitte beachten Sie, dass wir den Parameter e (das Event) an die Funktion übergeben müssen, um Zugriff auf die Methode stopPropagation() des Events zu haben. Würden wir den Parameter e nicht übergeben, wäre der Aufruf e.stopPropagation(), der gleich verwendet wird, undefiniert. 2 Das Hinzufügen der Zeile e.stopPropagation(); zur Löschen-Schaltfläche sagt dem Browser, dass das click-Event nicht im DOM (Document Object Model) hochsteigen soll, also nicht an die Elternelemente weitergereicht werden darf. Das ist deshalb wichtig, da wir ein click-Event in der Zeile selbst definiert haben, und die Zeile ist ein Elternelement der Schaltfläche. Würden wir stopPropagation() nicht aufrufen, würden sowohl der click-Handler der Löschen-Schaltfläche als auch entryClickHandler abgefeuert, wenn der Anwender auf LÖSCHEN tippt. 3 Die Zeile newEntryRow.click(entryClickHandler); sagt dem Browser, dass er die Funktion entryClickHandler aufrufen soll, wenn der Eintrag angetippt wurde. Lassen Sie uns nun die Funktion entryClickHandler() in die Datei kilo.js einfügen: function entryClickHandler(e){ sessionStorage.entryId = $(this).data('entryId');1 db.transaction(2 function(transaction) {3
150 | Kapitel 7: Der Weg zur nativen App
transaction.executeSql(4 'SELECT * FROM entries WHERE id = ?;', 5 [sessionStorage.entryId], 6 function (transaction, result) {7 var row = result.rows.item(0);8 var food = row.food;9 var calories = row.calories; var latitude = row.latitude; var longitude = row.longitude; $('#inspectEntry input[name="food"]').val(food);j $('#inspectEntry input[name="calories"]').val(calories); $('#inspectEntry input[name="latitude"]').val(latitude); $('#inspectEntry input[name="longitude"]').val(longitude); $('#mapLocation').click(function(){k window.location = 'http://maps.google.com/maps?z=15&q='+ food+'@'+latitude+','+longitude; }); jQT.goTo('#inspectEntry', 'slideup');l }, errorHandlerm ); } ); }
1 Hier wird die entryId des Eintrags ausgelesen, den der Anwender angetippt hat, und in session.storage abgespeichert. 2 Beginn der Datenbanktransaktion. 3 Eine Callback-Funktion wird in die Transaktion eingefügt, die als einzigen Parameter das Objekt transaction hat. 4 Die Methode executeSql() wird im Objekt transaction aufgerufen. 5 Definition des vorbereiteten SQL-Ausdrucks mit einem Fragezeichen als DatenPlatzhalter. 6 Hier wird ein Array mit nur einem Wert für den Platzhalter übergeben. 7 Start der Callback-Funktion für den Erfolgsfall. 8 Hier wird die erste (und einzige, da wir nur nach einem Eintrag fragen) Zeile des Ergebnisses ausgelesen. 9 Einige Variablen auf Grundlage der Werte der Zeile setzen. j Hier werden die Werte der Formularfelder entsprechend den Variablen gesetzt. k Der #mapLocation-Schaltfläche wird ein click-Handler hinzugefügt. Die Funktion öffnet im Fenster location eine Standard-Google-Maps-URL. Wenn die Karten-App verfügbar ist, wird sie sich öffnen. Andernfalls wird die URL in einem Browser geladen. Der z-Wert setzt den ersten Zoomfaktor; der String vor dem @-Zeichen wird als Bezeichner für die Stecknadel verwendet, die die Position anzeigt. Beachten Sie, dass Breiten- und Längengrad in der gezeigten Reihenfolge angegeben und durch ein Komma getrennt werden müssen.
Das iPhone per JavaScript kontrollieren | 151
l Aufruf der Methode goTo() im jQTouch-Objekt, um das neue Bedienfeld hereingleiten zu lassen. m Hier wird die Callback-Funktion für Fehler definiert. Bevor Sie versuchen, die App auszuführen, stellen Sie sicher, dass Sie die alte Version vom iPhone (oder dem Simulator) gelöscht haben. Das ist hier Pflicht, da die Datenbank nicht angelegt wird, wenn sie bereits existiert. Die einfachste Möglichkeit, die Datenbank zu löschen, ist, die App zu löschen. Dafür brauchen Sie nur auf das Programmsymbol im Home-Bildschirm zu drücken und es gedrückt lassen, bis die Symbole anfangen zu wackeln. Klicken Sie dann auf das X. Drücken Sie auf den Home-Button, um das Wackeln zu beenden. Säubern Sie danach das Projekt (BUILD → CLEAN) und klicken Sie auf BUILD & RUN, um die App auszuprobieren.
Beschleunigungssensoren Lassen Sie Kilo als Nächstes den letzten Eintrag in der Liste duplizieren, wenn das iPhone geschüttelt wird. Fügen Sie folgende Funktion am Ende der Datei kilo.js ein: function dupeEntryById(entryId) { if (entryId == undefined) {1 alert('Sie müssen mindestens einen Eintrag in der Liste haben, um ein Duplikat zu erschütteln.'); } else { db.transaction(2 function(transaction) { transaction.executeSql( ' INSERT INTO entries (date, food, calories, latitude, longitude)' + ' SELECT date, food, calories, latitude, longitude'3 + ' FROM entries WHERE id = ?;', [entryId], 4 function() {5 refreshEntries(); }, errorHandler6 ); } ); } }
1 Diese Zeile stellt sicher, dass die entryId an die Funktion übergeben wurde. Falls nicht, wird der Anwender benachrichtigt. 2 Die üblichen Datenbanktransaktionschritte werden gestartet. 3 Hier wird ein INSERT-Ausdruck definiert, der die Werte der entsprechenden entryId kopiert. Das ist eine Art von Abfrage, die Sie zuvor noch nicht gesehen haben. Anstatt eine Liste von Werten für INSERT zu nutzen, werden die Werte hier direkt von einem SELECT für die entsprechende entryId genommen.
152 | Kapitel 7: Der Weg zur nativen App
4 Der Wert von entryId wird in den SQL-Ausdruck an der Stelle des Fragezeichens aufgenommen. 5 Bei Erfolg wird refreshEntries() aufgerufen, womit der neu kopierte Eintrag angezeigt wird. 6 Im Fall eines Fehlers wird der Standard-SQL-Error-Handler aufgerufen. Nun müssen wir der App noch sagen, wann sie die Beobachtung der Beschleunigungssensoren starten und stoppen soll. Wir stellen es so ein, dass sie damit beginnt, wenn sich das DATUM-Bedienfeld komplett auf den Bildschirm bewegt hat, und nicht mehr beobachtet, sobald es anfängt, sich wieder herauszubewegen. Dafür müssen wir nur die folgenden Zeilen in die ready-Funktion von document in der Datei kilo.js schreiben: $('#date').bind('pageAnimationEnd', function(e, info){1 if (info.direction == 'in') {2 startWatchingShake(); } }); $('#date').bind('pageAnimationStart', function(e, info){3 if (info.direction == 'out') {4 stopWatchingShake(); } });
1 Hier wird ein anonymer Handler an das pageAnimationEnd-Ereignis des DATUM-Bedienfelds gebunden. Als Parameter werden das Event und info übergeben. 2 Es wird geprüft, ob die direction-Eigenschaft des info-Objekts gleich in ist. Wenn das stimmt, wird die Funktion startWatchingShake() aufgerufen, die wir uns gleich ansehen. 3 Hier wird ein anonymer Handler an das pageAnimationBegin-Ereignis des DATUMBedienfelds gebunden. Als Parameter werden wieder das Event und info übergeben. 4 Es wird geprüft, ob die direction-Eigenschaft des info-Objekts auf out gesetzt ist. Wenn das stimmt, wird die Funktion stopWatchingShake() aufgerufen, die wir uns ebenfalls gleich ansehen. Theoretisch hätten wir beide Funktionen in ein Ereignis einbinden können: $('#date').bind('pageAnimationEnd', function(e, info){ if (info.direction == 'in') { startWatchingShake(); } else { stopWatchingShake(); } });
Ich habe mich hier anders entschieden, weil stopWatchingShake() sonst erst aufgerufen würde, wenn die Animation abgeschlossen wäre. Dann würden die Beschleunigungssensoren noch während des Übergangs überwacht werden, was manchmal zu einer ruckelnden Animation führen kann.
Das iPhone per JavaScript kontrollieren | 153
Jetzt bleibt uns nur noch, die Funktionen startWatchingShake() und stopWatchingShake() zu schreiben. Fügen Sie die folgenden Funktionen an das Ende der Datei kilo.js ein: function startWatchingShake() {1 var success = function(coords){2 var max = 2;3 if (Math.abs(coords.x) > max || Math.abs(coords.y) > max || Math.abs(coords.z) > max) {4 var entryId = $('#date ul li:last').data('entryId');5 dupeEntryById(entryId);6 } }; var error = function(){};7 var options = {};8 options.frequency = 100;9 sessionStorage.watchId = navigator.accelerometer.watchAcceleration(success, error, options);j } function stopWatchingShake() {k navigator.accelerometer.clearWatch(sessionStorage.watchId);l }
1 Hier beginnt die Funktion startWatchingShake(), die aufgerufen wird, sobald das DATUM-Bedienfeld seine Einblendanimation abgeschlossen hat. 2 Nun wird der Erfolgs-Handler definiert. Beachten Sie, dass er als einzigen Parameter ein Koordinatenobjekt akzeptiert. 3 Der Schwellenwert für das Schütteln wird gesetzt. Je höher die Zahl ist, umso stärker muss der Anwender schütteln. 4 Prüfung, ob der Schwellenwert bei einer der Koordinaten überschritten wurde. 5 Abfrage der entryId des letzten Eintrags im DATUM-Bedienfeld. 6 Aufruf der Funktion dupeEntryById(). 7 Hier wird ein leerer Error-Handler definiert. 8 Es wird ein options-Objekt definiert, das an die Methode watchAcceleration() übergeben werden kann. 9 Die Eigenschaft frequency des options-Objekts erlaubt es, die Zeit zwischen den Abfragen der Bewegungssensoren (in Millisekunden) anzugeben. j Es wird die Methode watchAcceleration() des accelerometer-Objekts aufgerufen. Dabei werden Erfolgs-Handler, Fehler-Handler und das options-Objekt als Parameter übergeben. Der Rückgabewert wird in sessionStorage.watchId gespeichert, weil wir den noch für die Funktion stopWatchingShake() brauchen werden. k Hier beginnt die Funktion stopWatchingShake(), die aufgerufen wird, sobald das DATUM-Bedienfeld seine Ausblendanimation beginnt.
154 | Kapitel 7: Der Weg zur nativen App
l Die Methode clearWatch() des accelerometer-Objekts wird aufgerufen. Dabei wird die watchId aus sessionStorage übergeben. Damit sind wir bereit für den Test. Speichern Sie alle Dateien, säubern Sie das Projekt (Clean All Targets) und starten Sie Kilo auf dem iPhone (BUILD AND RUN). Fügen Sie im DATUM-Bedienfeld einen Eintrag ein, falls noch keiner existiert, und schütteln Sie dann das iPhone. Die Seite sollte neu laden und einen weiteren Eintrag anzeigen. Möglicherweise werden Sie noch einen Rückgängig-Dialog sehen (Abbildung 7-36). Um diesen Störenfried zu beseitigen, müssen wir nur in der Datei Info.plist einen Eintrag einfügen. Folgen Sie den Schritten unter »Einstellungen zur Info.plist hinzufügen« auf Seite 130, um UIApplicationSupportsShakeToEdit einzufügen und dessen Wert auf false zu setzen (Abbildung 7-37).
Abbildung 7-36: Wir müssen den lästigen (und noch dazu im iPhone OS nicht übersetzten) RückgängigDialog deaktivieren.
Abbildung 7-37: Fügen Sie die Einstellung UIApplicationSupportsShakeToEdit der Datei Info.plist hinzu und lassen Sie das Häkchen weg, um »Schütteln für Rückgängig« zu deaktivieren.
Das iPhone per JavaScript kontrollieren | 155
Was Sie gelernt haben In diesem Kapitel haben Sie gelernt, wie Sie Ihre Web-App in PhoneGap laden, wie Sie Ihre App auf dem iPhone installieren und wie Sie fünf Gerätefunktionen ansprechen, die für browserbasierte Web-Apps unzugänglich sind (beep(), alert(), vibrate(), geolocation und accelerometer). Im nächsten Kapitel lernen Sie, wie Sie Ihre App kompilieren und zusammenpacken, um Sie im iTunes App Store anzubieten.
156 | Kapitel 7: Der Weg zur nativen App
Kapitel 8
KAPITEL 8
Wie Sie Ihre App nach iTunes übertragen
Abschließend kommt jetzt der Moment, auf den Sie gewartet haben: das Übertragen Ihrer App nach iTunes. Es gibt einige Schritte in diesem Prozess, und Sie wollen sicher alles gut vorbereitet haben, bevor Sie starten. Sie brauchen mindestens folgende Daten und Dateien, bevor Sie den Einreichungsprozess für den App Store abschließen können: • Eine unformatierte Beschreibung für die App (maximal 4.000 Zeichen). • Eine URL, unter der die Anwender mehr über die App erfahren können. • Eine Support-URL sowie eine E-Mail-Adresse, unter denen die Anwender Hilfe zu Ihrer App erhalten können. • Wenn die App eine Anmeldung erfordert, komplette Zugangsdaten für eine DemoAnmeldung, damit die Prüfer von Apple Ihre App testen können. • Ein 512px x 512px großes Programmsymbol (Icon). • Mindestens ein 320px x 480px großes Bildschirmfoto (Screenshot) der App. • Ein Distribution Provisioning Profile für die App. • Eine komprimierte Version der Programmbibliothek. Alles, was Sie für die Einreichung benötigen, ist relativ unkompliziert, bis auf die letzten beiden Punkte: das Distribution Provisioning Profile und die App-Binärdatei. Wir werden diese beiden Anforderungen in den folgenden Abschnitten im Detail behandeln. Wo auch immer ich in diesem Kapitel über Kilo schreibe, ersetzen Sie es einfach durch den Namen, den Sie für Ihre App verwenden möchten.
| 157
Ein iPhone Distribution Provisioning Profile erstellen In Kapitel 7 haben Sie ein Development Provisioning Profile erstellt, das es Ihnen erlaubt hat, Ihre App auf einem realen iPhone zu testen. Nun müssen Sie ein Distribution Provisioning Profile erstellen, um Ihre App nach iTunes zu übertragen. 1. Navigieren Sie zur iPhone-Developer-Seite (http://developer.apple.com/iphone/) und melden Sie sich an. 2. Klicken Sie in der rechten Seitenleiste auf DEVELOPER PROGRAM PORTAL. 3. Klicken Sie in der linken Seitenleiste auf PROVISIONING. 4. Klicken Sie auf die DISTRIBUTION-Registerkarte. 5. Klicken Sie auf den Button NEW PROFILE. 6. Wählen Sie »App Store« als »Distribution Method«. 7. Geben Sie einen Profilnamen (zum Beispiel Kilo Distribution Provisioning Profile) an.
Abbildung 8-1: Erstellen Sie ein Distribution Provisioning Profile im iPhone Developer Portal.
158 | Kapitel 8: Wie Sie Ihre App nach iTunes übertragen
8. Wenn Sie noch kein Distribution Certificate erstellt haben, sollten Sie das nachholen, bevor Sie fortfahren. Sollten Sie auf dieser Seite einen Link namens »Please create a Distribution Certificate« sehen, klicken Sie darauf und folgen den Anweisungen. Sie werden ein paar Ausflüge zur Schlüsselbundverwaltung (in /Programme/Dienstprogramme) machen, um eine Zertifikatanforderung zu erstellen und signierte Zertifikate zu installieren, die Sie vom Portal herunterladen und in Ihrem Schlüsselbund abspeichern können. 9. Wählen Sie die passende APP ID aus (Abbildung 8-1). 10. Klicken Sie auf den SUBMIT-Button (Sie werden in die DISTRIBUTION PROVISIONING PROFILE-Listenansicht zurückgebracht). 11. Aktualisieren Sie die Seite, bis ein DOWNLOAD-Button erscheint (Abbildung 8-2).
Abbildung 8-2: Aktualisieren Sie die Distribution Profile-Liste, bis der Download-Button erscheint.
12. Klicken Sie auf den DOWNLOAD-Button, um das Profil in Ihrem lokalen DownloadVerzeichnis zu speichern (normalerweise ist das der Download-Ordner in Ihrem Home-Verzeichnis). 13. Ziehen Sie das heruntergeladene Profil auf das Xcode-Symbol im Dock.
Ein iPhone Distribution Provisioning Profile erstellen
| 159
Das iPhone Distribution Provisioning Profile installieren Nun, da das Profil in Xcode angekommen ist, müssen Sie das Projekt so konfigurieren, dass das Profil verwendet wird. 1. Öffnen Sie Kilo in Xcode, wenn es nicht schon geöffnet ist. 2. Wählen Sie EDIT PROJECT SETTINGS im PROJECT-Menü (das Fenster PROJECT SETTINGS erscheint). 3. Klicken Sie auf die BUILD-Registerkarte, sollte sie nicht ohnehin aktiviert sein. 4. Wählen Sie im CONFIGURATION-Auswahlfeld den Eintrag DISTRIBUTION aus. 5. Wählen Sie im SHOW-Auswahlfeld den Eintrag SETTINGS DEFINED AT THIS LEVEL aus. 6. Suchen Sie im Hauptbereich des Fensters CODE SIGNING → CODE SIGNING IDENTITY → ANY IPHONE OS DEVICE. 7. Klicken Sie auf die Auswahlliste rechts neben ANY IPHONE OS DEVICE, um die Liste der Profiloptionen anzuzeigen (Abbildung 8-3).
Abbildung 8-3: Klicken Sie auf die Auswahlliste neben »Any iPhone OS Device«.
160 | Kapitel 8: Wie Sie Ihre App nach iTunes übertragen
8. Suchen Sie Ihr Distribution Provisioning Profile aus der Liste heraus und wählen Sie die Distributionsidentität direkt darunter aus (Abbildung 8-4).
Abbildung 8-4: Die Distributionsidentität wird direkt unter dem Distribution Profile angezeigt.
9. Schließen Sie das Fenster PROJECT INFO.
Das Projekt umbenennen Bevor Sie die App einreichen, müssen Sie diese noch von PhoneGap in Kilo umbenennen. Das geht so: 1. Öffnen Sie das Projekt in Xcode. 2. Wählen Sie RENAME im PROJECT-Menü (Abbildung 8-5). 3. Tippen Sie im Feld RENAME PROJECT TO »Kilo« ein (Abbildung 8-6). 4. Sie können »Take Snapshot before renaming« angehakt lassen, wenn Sie den Projektzustand vor der Änderung abspeichern möchten, allerdings wird das dazu führen, dass der Umbenennungsprozess deutlich länger dauert. 5. Klicken Sie auf den RENAME-Button.
Das Projekt umbenennen
| 161
Abbildung 8-5: Wählen Sie Rename im Project-Menü.
Abbildung 8-6: Tippen Sie in das Feld »Rename Project to« »Kilo« ein.
Sie sehen eine Serie von grünen Kreisen mit weißen Häkchen darin, die anzeigen, dass die Änderungen durchgeführt wurden (Abbildung 8-7).
162 | Kapitel 8: Wie Sie Ihre App nach iTunes übertragen
Abbildung 8-7: Die grünen Kreise mit den weißen Häkchen darin zeigen an, dass der Umbenennungsprozess erfolgreich war.
Die Programm-Binärdatei vorbereiten Als Nächstes müssen wir die ausführbare Programmdatei erstellen und sie für das Hochladen vorbereiten. 1. Wählen Sie IPHONE DEVICE - 3.1.3 (oder die aktuelle Version von iPhone OS) im Auswahlmenü ACTIVE SDK aus. Wählen Sie es danach noch einmal aus und aktivieren Sie DISTRIBUTION. Bei TARGET sollte nun so etwas wie »Device - 3.1.3 | Distribution« stehen. 2. Wählen Sie im BUILD-Menü CLEAN ALL TARGETS aus. 3. Wählen Sie danach im BUILD-Menü BUILD aus. Es kann sein, dass nachgefragt wird, ob das Programm Codesign auf Ihren Schlüsselbund zugreifen darf. Erlauben Sie das, damit Ihre App signiert werden kann. 4. Stellen Sie sicher, dass keine Fehler aufgetreten sind. 5. Zeigen Sie die App per REVEAL IN FINDER im Finder an (Abbildung 8-8). 6. Komprimieren Sie die Datei in ein ZIP-Archiv (Abbildung 8-9).
Die Programm-Binärdatei vorbereiten
| 163
Abbildung 8-8: Zeigen Sie die App im Finder an.
Abbildung 8-9: Die Applikation muss als ZIP-Archiv komprimiert werden, damit sie hochgeladen werden kann.
164 | Kapitel 8: Wie Sie Ihre App nach iTunes übertragen
Die App einreichen Nun, da Sie alles haben, was Sie brauchen: 1. Melden Sie sich in iTunes Connect an (https://itunesconnect.apple.com/). 2. Klicken Sie auf MANAGE YOUR APPLICATIONS. 3. Klicken Sie auf die Schaltfläche ADD NEW APPLICATION. 4. Folgen Sie den Bildschirmanweisungen, um durch den Einreichungsprozess geleitet zu werden. 5. Geben Sie Gas – und warten Sie dann. Wenn alles gut geht, sollte Ihre App mit dem Status IN REVIEW aufgelistet sein (Abbildung 8-10).
Abbildung 8-10: Die hochgeladene App erscheint in Ihrer Liste mit dem Status »In Review«.
Während Sie warten Herzlichen Glückwunsch! Sie haben offiziell Ihre erste App im iTunes App Store eingereicht! Was nun? Möglicherweise müssen Sie eine oder zwei Wochen warten, bevor Sie von Apple eine Rückmeldung bekommen. Hier ein paar Dinge, die Sie in der Zwischenzeit erledigen können: • Erstellen Sie eine schöne Website für die App, die unter der URL zu erreichen ist, die Sie an Apple geschickt haben. Stellen Sie sicher, dass folgende Elemente enthalten sind: • Ein Video Ihrer App in Aktion. Loren Brichter (http://twitter.com/atebits) hat ein großartiges Tutorial darüber veröffentlicht, wie man schöne iPhone-Screencasts erstellt: http://blog.atebits.com/2009/03/not-your-average-iphone-screencast/. • Eine kurze Beschreibung Ihrer App. Nur ein bis zwei Absätze und eine kurze Liste mit fünf bis zehn Punkten. • Ein iTunes-Link, um die App zu kaufen.
Während Sie warten
| 165
• Ein paar Testberichte und vielleicht ein Link auf weitere, wenn Sie haben. • Eine Support-E-Mail-Adresse. Sie können wahlweise auch ein Forum einrichten, aber Sie erfahren mehr über Ihre Kunden per E-Mail. • Senden Sie persönliche E-Mail-Nachrichten an Blogger, die Ihrer Meinung nach ein Interesse an Ihrer App haben könnten. Konzentrieren Sie sich auf Blogs, die für die Zielgruppe Ihrer App relevant sind, und auf Blogs über das iPhone. • Räumen Sie Ihren Posteingang auf. Sie erhalten möglicherweise 5 bis 20 E-Mails pro 100 Verkäufe. Deshalb können viele E-Mails auf Sie zukommen, wenn Ihre App populär wird. • Fangen Sie gleich damit an, an Ihrem ersten Update zu arbeiten. Die populäreren Apps scheinen etwa zwei Updates im Monat einzureichen, was für ständige Begeisterung sorgt und das Wohlwollen der Kunden steigert.
Weiterführende Informationsquellen Für den Fall, dass Sie einmal nicht mehr weiterwissen, habe ich hier einige hilfreiche Quellen zusammengestellt: • jQTouch Issue Tracker: http://code.google.com/p/jqtouch/issues/list • jQTouch bei Twitter: http://twitter.com/jqtouch • jQTouch Wiki: http://code.google.com/p/jqtouch/w/list • PhoneGap Google Group: http://groups.google.com/group/phonegap • PhoneGap bei Twitter: http://twitter.com/phonegap • PhoneGap Wiki: http://phonegap.pbworks.com/ • jQuery-Dokumentation: http://docs.jquery.com/ • W3C-Spezifikationen für Offline-Apps: http://dev.w3.org/html5/spec/Overview.html#offline
166 | Kapitel 8: Wie Sie Ihre App nach iTunes übertragen
bei Texteingaben 9 id im Vergleich mit class 8 Auswählen von Zeilen in clientseitigen Datenbanken 85 autocapitalize (Attribut) 63 autocomplete (Attribut) 63 autocorrect (Attribut) 63
D DATABASE_ERR, Fehlercode 83 Datenbank, Größenbeschränkungen 79 Datenbanken Fehlercodes 83 Größenbeschränkungen 79 Hinzufügen der Spalten latitude und longitude 146 iPhone Simulator App-Cache-Datenbank 111 Safari Desktop-Browser 80 SQL Unterstützung 78 siehe auch clientseitige Datenspeicherung 71 Daten-Bedienfeld 59 Daten in sessionStorage speichern 75 Deklaration, CSS 7
168 |
Index
dissolveSelector, Eigenschaft 69 DOM (Document Object Model), JavaScript für die Intaraktion mit HTML-Seiten verwenden 11 DRY-Prinzip 18 dynamische Manifest-Dateien 101
F fadeSelector, Eigenschaft 69 FallbackURLs-Tabelle 117 Farbverläufe, -webkit-gradient 23 Fehlerbehandlung, Zeilen in eine clientseitige Datenbank einfügen 83 Fehlersuche Offline-Application-Cache 107 Web-Apps mit den Web-Eigenschaften im Safari Desktop-Browser 80 fixedViewport, Eigenschaft 69 flipSelector, Eigenschaft 69 Fremdschlüssel, definierte 114 fullScreen, Eigenschaft 69 fullScreenClass, Eigenschaft 69 Funktionen als Parameter übergeben 35
G Geolocation native Apps 146 Verwendung in einer Funktion 146
H
J
Handler Erfolgs-Handler 85 Transaction-Callback-Handler 85 Home-Bildschirm, Icons hinzufügen 49 href-Tag 57 .htaccess-Datei 96 Mac OS X .htaccess-Datei 97 HTML 3 DOM und JavaScript 11 HTML-Elementen CSS-Klassen zuweisen 56 siehe auch iPhone-Layout 15 Hyperlinks, CSS 8
N name-Attribut 63 native Apps 119 im Vergleich mit Web-Apps X, 1 Installation 137 JavaScript 141 PhoneGap 119 Web-Apps simulieren als 125 Navigationsmenüs, abgerundete Ecken 24 NETWORK Schlüsselwort 98 newestCache-Feld 113
O Objective-C IX Offline-Application-Cache 95 dynamische Manifest-Dateien 101 Fehlersuche 107 Online Whitelist- und Ausweichoptionen 98 Online Whitelist 98
P Padding, Inhalts- und Seitenleisten-Elemente 22 persistente Datenspeicherung 75 Pfadnamen mit ./ 105 PhoneGap 119 Bildschirmhöhe 126 PhoneGap-Alarme im Vergleich mit JavaScriptAlarmen 144 Startbilder 135 Titel und Programmsymbole 127 PHP-Skripte 104 placeholder-Attribut 63
Z Zeilen in clientseitigen Datenbanken 81 auswählen 85 einfügen 81 löschen 89 Zeilen löschen 89 Zurück-Knopf, Beispiel 42 Zurück-Knopf, href 57
Index
| 171
Über den Autor Jonathan Stark ist ein renommierter Berater für die Entwicklung von Web- und mobilen Anwendungen. Das Wall Street Journal bezeichnete ihn als Experten auf dem Gebiet der Aufbereitung von allen möglichen Daten für das Web. Er hat schon zwei Bücher über Webentwicklung geschrieben, ist technischer Redakteur für php|architect und Advisor. com und wird in den Medien immer wieder gern zu Web- und Lifestylefragen zitiert.
Über den Übersetzer Ingo Dellwig ist seit 1997 selbstständiger Unternehmer im Bereich Webentwicklung und mobile Apps (www.web-n-apps.de). Er hat inzwischen an rund zwei Dutzend Büchern als Autor oder Übersetzer mitgewirkt (www.dellwig.de). Darüber hinaus schreibt er Artikel für Fachzeitschriften und spricht auf Konferenzen meist zu Themen rund um das iPhone.
Kolophon Der Vogel auf dem Cover von iPhone Apps mit HTML, CSS und JavaScript ist ein Hüttensänger (Sialia Sialis) aus der Familie der Drosseln (Turdidae). Seine Oberseite ist leuchtend blau, weswegen er in seiner Heimat Nordamerika einfach »Bluebird« heißt. Über das restliche Gefieder, zum Beispiel an der Kehle, können aber auch verschiedene Rottöne verteilt sein. Anders als bei den meisten anderen Vögeln unterscheiden sich die Männchen und Weibchen der Hüttensänger übrigens kaum. Hüttensänger sind Standvögel, die sich bevorzugt in offenen Graslandschaften mit einzelnen Bäumen aufhalten. Die Männchen suchen sich einen Baum als möglichen Nistplatz aus und umwerben die Weibchen mit ihrem Gesang, Flügelschlagen und dem Ausstopfen von Baumlöchern mit Nistmaterial. Gefallen einem Hüttensänger-Weibchen das balzende Männchen und der gewählte Baum, wird es dann allein das Nest fertig bauen. Hüttensänger gibt es nur in Nordamerika, wo sie die einzigen Drosseln sind, die eigentlich wiederum Vögel der Alten Welt sind. Vogelliebhaber locken die beliebten Hüttensänger mit Vogelhäuschen voll Insekten gern in ihre Gärten, um sie zu beobachten. Der »Bluebird« ist der Staatsvogel von Missouri und New York, wird als Symbol für Optimismus gehandelt und wurde in zahlreichen Liedern besungen. Der für das Cover verwendete Stich ist aus Johnson’s Natural History. Als Textschrift verwenden wir die Linotype Birka, die Überschriftenschrift ist die Adobe Myriad Condensed und die Nichtproportionalschrift für Codes ist LucasFont’s TheSans Mono Condensed.
