19

Inhalt - bücher.deDies ist ein Auszug aus dem Buch "iPhone Apps mit HTML, CSS und JavaScript", ISBN 978-3-89721-603-7 ... ist Ihre Web-App dann von einer nativen App fast nicht mehr

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

| VII

Inhalt

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . IX

1 Los geht’s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Web-Apps im Vergleich zu nativen Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Crashkurs in Webprogrammierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Einfaches iPhone-Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Erste Schritte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Die iPhone-CSS hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20iPhone-Look-and-Feel hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Elementares Verhalten mit jQuery hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . 25Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

3 Fortgeschrittenes iPhone-Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Ein wenig Ajax hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Verkehrspolizist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Ein paar Extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Ihr eigener Zurück-Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Ein Icon für den Home-Bildschirm hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . 49Vollbildmodus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

4 Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Mit ein wenig Hilfe von unserem Freund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Zur Hauptseite gleiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Das Daten-Bedienfeld hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Das Datum-Bedienfeld hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Das Neuer Eintrag-Bedienfeld hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

00___iPhoneApps.book Seite VII Montag, 26. April 2010 1:58 13

VIII | Inhalt

Das Einstellungen-Bedienfeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Alles zusammenfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66jQTouch anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

5 Clientseitige Datenspeicherung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71localStorage und sessionStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Clientseitige Datenbank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

6 Der Weg zur Offline-App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Die Grundlagen des Offline Application Cache . . . . . . . . . . . . . . . . . . . . . . . . 95Online-Whitelist und Fallback-Optionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Eine dynamische Manifestdatei erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101Fehlerbehebung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

7 Der Weg zur nativen App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119Einführung in PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119Die App auf dem iPhone installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Das iPhone per JavaScript kontrollieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

8 Wie Sie Ihre App nach iTunes übertragen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Ein iPhone Distribution Provisioning Profile erstellen . . . . . . . . . . . . . . . . . . . 158Das iPhone Distribution Provisioning Profile installieren . . . . . . . . . . . . . . . . 160Das Projekt umbenennen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161Die Programm-Binärdatei vorbereiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Die App einreichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Während Sie warten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Weiterführende Informationsquellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

00___iPhoneApps.book Seite VIII Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

| 55

Kapitel 4 KAPITEL 4

Animation

iPhone-Apps haben eine Menge markanter Animationscharakteristiken, die für denAnwender eine Bedeutung haben und ihn Zusammenhänge erschließen lassen. Es schie-ben sich zum Beispiel Seiten nach links, wenn Sie per Link auf Detailseiten gehen, undwieder nach rechts, wenn Sie zurückgehen. In diesem Kapitel werden Sie lernen, wie SieIhrer App charakteristische Verhaltensweisen, wie das Schieben, den Seiten-umblättern-Effekt und mehr, beibringen. Durch diese Änderungen, in Kombination mit Ajax unddem Vollbildmodus, ist Ihre Web-App dann von einer nativen App fast nicht mehr zuunterscheiden.

Mit ein wenig Hilfe von unserem FreundIch bin ganz ehrlich: Eine Webseite so zu animieren wie eine native iPhone-App, ist müh-sam. Glücklicherweise hat ein unternehmungslustiger Typ aus Philadelphia namensDavid Kaneda eine JavaScript-Bibliothek namens jQTouch geschrieben, die die mobileWebentwicklung ein ganzes Stück einfacher macht. jQTouch ist ein Open Source-jQuery-Plug-in, das alles behandelt, was wir im letzten Kapitel gelernt haben, und zusätz-lich eine ganze Bootsladung von komplexem Zeug, das man nur mit großem Aufwandvon null an selbst programmieren könnte.

Sie können die aktuelle Version von jQTouch unter http://jqtouch.com/ herunter-laden.

Zur Hauptseite gleitenWir werden eine einfache App zum Zählen von Kalorien entwickeln, die Kilo heißen sollund dem Anwender ermöglicht, Essenseinträge für ein bestimmtes Datum hinzuzufügenund zu löschen. Alles in allem wird es sechs Bedienfelder geben: HAUPTSEITE, EINSTEL-

00___iPhoneApps.book Seite 55 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

56 | Kapitel 4: Animation

LUNGEN, DATEN, DATUM, NEUER EINTRAG und ÜBER KILO. Wir werden mit zwei Bedien-feldern 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 aufvordefinierte CSS-Klassen-Selektoren aus dem Standard-jQTouch-Layout.Behalten Sie bitte im Hinterkopf, dass Sie Ihre eigenen Klassen verwendenkönnen, indem Sie das existierende jQTouch-Layout anpassen oder Ihreigenes ganz neu erstellen; ich nutze hier die Standardversion.

Legen wir los, indem wir eine Datei namens index.html erstellen und den HTML-Codefü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

<html> <head> <title>Kilo</title> </head> <body> <div id="home">1 <div class="toolbar">2 <h1>Kilo</h1> </div> <ul class="edgetoedge">3 <li class="arrow"><a href="#about">&Uuml;ber Kilo</a></li>4 </ul> </div> <div id="about"> <div class="toolbar"> <h1>&Uuml;ber Kilo</h1> <a class="button back" href="#">Zur&uuml;ck</a>5

00___iPhoneApps.book Seite 56 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

Zur Hauptseite gleiten | 57

Dieser HTML-Code besteht hauptsächlich aus einem head-Bereich mit einem Titel undeinem body-Bereich mit zwei Kindern, beides div-Elemente:

1 Dieses div-Element wird (genauso wie das div-Element about, das ein paar Zeilentiefer definiert wird) ein Bedienfeld der Applikation, da es ein direkter Abkömmlingdes body-Elements ist.

2 In jedem dieser Bedienfeld-div-Elemente gibt es ein div-Element mit der Klassetoolbar. Diese toolbar-Klasse ist im jQTouch-Layout speziell vordefiniert, um einElement zu einer klassischen iPhone-Titelleiste umzustylen.

3 Diese ungeordnete Liste hat die Klasse edgetoedge, die jQTouch anweist, die Listeim sichtbaren Bereich von ganz links bis ganz nach rechts auszudehnen.

4 In dieser Zeile gibt es ein Listenelement, das einen Link beinhaltet, dessen href aufdas ÜBER KILO-Bedienfeld zeigt. Das Einfügen der arrow-Klasse in das li-Element istoptional; 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 Bedien-felds angibt. In dieser Zeile gibt es einen Link mit den Klassen button und back, diejQTouch befehlen, die Schaltfläche wie einen Zurück-Button aussehen zu lassen.

Beachten Sie, dass die Eigenschaft href des Buttons auf # gesetzt ist. Nor-malerweise würde das dem Browser sagen, dass er zum Anfang der Seitezurückkehren soll. Wenn man allerdings jQTouch verwendet, navigiert esstattdessen zum vorherigen Bedienfeld zurück. In fortgeschritteneren Sze-narien werden Sie eventuell lieber einen Anker verwenden (zum Beispiel#home), der dem Zurück-Button sagt, dass er zu einem bestimmten Bedien-feld 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 ausge-packt haben, müssen Sie lediglich ein paar Zeilen Code in den head-Bereich Ihrer Seiteeinfügen (Beispiel 4-2).

Für dieses und andere Beispiele in diesem Buch müssen Sie jQTouch vonder Seite http://jqtouch.com herunterladen, auspacken und die Verzeich-nisse jqtouch und themes in denselben Ordner verschieben, in dem auchdie HTML-Datei liegt. Außerdem müssen Sie im Ordner jqtouch die Java-Script-Datei (zum Beispiel jquery.1.3.2.min.js) in jquery.js umbenennen.

</div> <div> <p>Mit Kilo k&ouml;nnen Sie &uuml;ber Ihr Essen Tagebuch f&uuml;hren.</p> </div> </div> </body></html>

Beispiel 4-1: Der HTML-Code für die Hauptseite und das Über Kilo-Bedienfeld (Fortsetzung)

00___iPhoneApps.book Seite 57 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

58 | Kapitel 4: Animation

1 Ich binde die Datei jqtouch.css ein. Diese Datei definiert einige grundlegende struk-turelle Designregeln, die sehr spezifisch für die Behandlung von Animationen, Aus-richtung und andere iPhone-typische Details sind. Diese Datei wird zwingendbenö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 HTML-Datei verwendet habe, passen zu den Selektoren in diesem CSS-Dokument.jQTouch wird standardmäßig mit zwei Layouts ausgeliefert. Sie können aber auchIhr eigenes Design erstellen, indem Sie entweder ein vorhandenes Layout duplizierenund verändern oder es ganz neu aufsetzen.

3 Da jQTouch jQuery benötigt, binde ich das hier ein. jQTouch bringt bereits eineKopie 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 jQueryeinbinden, da sonst nichts funktionieren wird.

5 So kommen wir zum script-Block, in dem ich das jQTouch-Objekt initialisiere undzwei Eigenschaften Werte zuweise: icon und statusBar.

jQTouch bietet einige Eigenschaften an, mit denen man das Verhalten und dasErscheinungsbild der App steuern kann. Sie werden in diesem Buch einige Beispieledafür finden, sie sind alle optional. Allerdings werden Sie fast immer wenigstens einpaar von ihnen anwenden.

In diesem Fall sagt icon jQTouch, wo das Webclip-Icon zu finden ist, und statusBarstellt die Farbe der 20px-Statuszeile am oberen Bildrand für den Vollbildmodus ein.

Übrigens geht jQTouch davon aus, dass man den Vollbildmodus verwen-den möchte, denn … na eben. Sollten Sie wider Erwarten doch einmal kei-nen Vollbildmodus wünschen, fügen Sie der Eigenschaftenliste einfachfullScreen: false hinzu.

Der Unterschied zwischen der App vor jQTouch (Abbildung 4-1) und danach (Abbil-dung 4-2) ist dramatisch, aber das wirklich Erstaunliche ist, dass Sie mit zehn Zeilen

Beispiel 4-2: Das Hinzufügen dieser Zeilen in den head-Bereich Ihres HTML-Dokuments aktiviert jQTouch

<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">1<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">2<script type="text/javascript" src="jqtouch/jquery.js"></script>3<script type="text/javascript" src="jqtouch/jqtouch.js"></script>4<script type="text/javascript">5 var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' });</script>

00___iPhoneApps.book Seite 58 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

Das Daten-Bedienfeld hinzufügen | 59

Code den großartigen links/rechts-Schiebeeffekt eingebaut haben. Außerdem haben Sieden Vollbildmodus aktiviert, die Farbe der Statusleiste gesetzt und Ihr eigenes Webclip-Icon hinzugefügt. jQTouch ist echt krass, und wir haben gerade einmal angefangen.

Das Daten-Bedienfeld hinzufügenLassen Sie uns nun das DATEN-Bedienfeld hinzufügen. Es wird eine Liste relativer Datenbeinhalten, die aktuell beginnen und fünf Tage zurückreichen (Abbildung 4-3). Fügen Sieden 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 </body> ein.

Wie das ÜBER KILO-Bedienfeld hat auch das DATEN-Bedienfeld eine Titelleiste mit Titelund Zurück-Button. Nach der Titelleiste gibt es eine ungeordnete edgetoedge-Liste mitLinks. Beachten Sie, dass alle Links eindeutige IDs (0 bis 5), aber dasselbe href-Ziel(#date) haben – dazu später mehr.

Abbildung 4-2: … und Kilo nach jQTouch.

Beispiel 4-3: Der HTML-Code für das Daten-Bedienfeld

<div id="dates"> <div class="toolbar"> <h1>Daten</h1> <a class="button back" href="#">Zur&uuml;ck</a> </div> <ul class="edgetoedge"> <li class="arrow"><a id="0" href="#date">heute</a></li> <li class="arrow"><a id="1" href="#date">gestern</a></li> <li class="arrow"><a id="2" href="#date">vor zwei Tagen</a></li> <li class="arrow"><a id="3" href="#date">vor drei Tagen</a></li> <li class="arrow"><a id="4" href="#date">vor vier Tagen</a></li> <li class="arrow"><a id="5" href="#date">vor fünf Tagen</a></li> </ul></div>

00___iPhoneApps.book Seite 59 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

60 | Kapitel 4: Animation

Als Nächstes müssen Sie die Hauptseite mit einem Link auf das DATEN-Bedienfeld verse-hen. Fügen Sie die im Folgenden fett gedruckte Zeile dem div-Element mit der ID home inder Datei index.html hinzu:

<div id="home"> <div class="toolbar"> <h1>Kilo</h1> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#dates">Daten</a></li> <li class="arrow"><a href="#about">&Uuml;ber Kilo</a></li> </ul></div>

Abbildung 4-3: Das Daten-Bedienfeld verfügt über eine Titelleiste mit einem Zurück-Button und eine Liste anklickbarer Daten.

Abbildung 4-4: Die Hauptseite besitzt nun einen Link zum Daten-Bedienfeld.

00___iPhoneApps.book Seite 60 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

Das Datum-Bedienfeld hinzufügen | 61

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ügenDas DATUM-Bedienfeld sieht den anderen Bedienfeldern sehr ähnlich, hat aber einigeErweiterungen (siehe Beispiel 4-4). Fügen Sie den HTML-Code für das DATUM-Bedien-feld direkt nach dem DATEN-Bedienfeld, aber noch vor dem schließenden </body> ein.

1 Die Titelleiste des DATUM-Bedienfelds hat einen weiteren Button. Wenn er ange-klickt wird, soll das NEUER EINTRAG-Bedienfeld (das wir noch nicht eingebauthaben) angezeigt werden. Ich habe dem Link die Klasse slideup gegeben, diejQTouch sagt, dass das Zielbedienfeld von unten nach oben auf den Bildschirmgeschoben werden soll (anders als beim normalen Navigationsverhalten horizontalvon rechts nach links).

2 Der nächste untypische Aspekt dieses Bedienfelds ist, dass ich ein Listenelementdefiniert 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 neueEinträge verwenden, sobald sie erstellt worden sind. Zu diesem Zeitpunkt gibt esnoch 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 Ein-trag im DATEN-Bedienfeld das leere DATUM-Bedienfeld (Abbildung 4-5) hineingescho-ben.

Beispiel 4-4: Der HTML-Code für das Datum-Bedienfeld

<div id="date"> <div class="toolbar"> <h1>Datum</h1> <a class="button back" href="#">Zur&uuml;ck</a> <a class="button slideup" href="#createEntry">+</a>1 </div> <ul class="edgetoedge"> <li id="entryTemplate" class="entry" style="display:none">2 <span class="label">Beschreibung</span> <span class="calories">000</span> <span class="delete">L&ouml;schen</span> </li> </ul></div>

00___iPhoneApps.book Seite 61 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

62 | Kapitel 4: Animation

Das Neuer Eintrag-Bedienfeld hinzufügenBeispiel 4-5 zeigt den Quelltext für das NEUER EINTRAG-Bedienfeld. Fügen Sie ihn in dieDatei index.html direkt vor </body> ein.

1 Das Erste, das man beim NEUER EINTRAG-Bedienfeld hervorheben muss, ist, dass eskeinen Zurück-Button mehr hat, sondern stattdessen eine Abbrechen-Schaltfläche.

Abbrechen-Buttons verhalten sich in jQTouch genauso wie Zurück-But-tons, indem sie die aktuelle Seite in umgekehrter Weise aus dem Bild her-aus animieren, in der sie hineinanimiert wurde. Allerdings sieht derAbbrechen-Button im Gegensatz zum Zurück-Button nicht wie ein Pfeilnach links aus.

Abbildung 4-5: Bis auf die Titelleiste ist das Datum-Bedienfeld anfangs leer.

Beispiel 4-5: Der HTML-Code für das Neuer Eintrag-Bedienfeld

<div id="createEntry"> <div class="toolbar"> <h1>Neuer Eintrag</h1> <a class="button cancel" href="#">Abbrechen</a>1 </div> <form method="post">2 <ul> <li><input type="text" placeholder="Essen" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="text" placeholder="Kalorien" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="submit" class="submit" name="action" value="Eintrag speichern" /></li>3 </ul> </form></div>

00___iPhoneApps.book Seite 62 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

Das Neuer Eintrag-Bedienfeld hinzufügen | 63

Ich habe hier einen Abbrechen-Button verwendet, da sich das NEUER EIN-TRAG-Bedienfeld von unten ins Bild schiebt und deshalb auch wieder nachunten 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: zweiTextfeldern und einer Absenden-Schaltfläche. Das Einbetten eines Formulars in Lis-tenelemente erlaubt es dem jQTouch-Layout, das Formular wie in Abbildung 4-6 zustylen. 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, sobalddas 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 vor-eingestellte automatische Rechtschreibkorrektur zu deaktivieren.

autocomplete Diese Einstellung erlaubt das Abschalten der automatischen Vervollständi-gungsfunktion 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 Ein-gabefeld befindet. Diese Tastatur hat unten rechts eine GO-Taste, die das Formularabsendet, sobald sie gedrückt wurde. Wenn Sie die Absendefunktion entführen, wiewir es hier tun, wird der Cursor nicht aus dem Eingabefeld entfernt, und die Tasta-tur bleibt im Bild. Um das zu beheben, bietet jQTouch eine bequeme Methode, dieautomatisch den Cursor aus dem aktiven Eingabefeld nimmt, sobald ein Formularabgesendet wurde. Um von dieser Funktionalität zu profitieren, müssen Sie demAbsende-Button des Formulars lediglich die submit-Klasse hinzufügen.

Abbildung 4-7 zeigt das NEUER EINTRAG-Bedienfeld in Aktion. Bis jetzt habe ich nochnichts unternommen, damit der Eintrag wirklich abgespeichert wird, wenn der Anwen-der auf EINTRAG SPEICHERN klickt. Das werden wir aber in Kapitel 5 behandeln.

00___iPhoneApps.book Seite 63 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

64 | Kapitel 4: Animation

Das Einstellungen-BedienfeldWir haben bislang noch keinen Button definiert, der den Anwender in das EINSTELLUN-GEN-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 folgendemCode:

<div id="home"> <div class="toolbar"> <h1>Kilo</h1> <a class="button flip" href="#settings">Einstellungen</a>1

Abbildung 4-6: Das jqt-Layout leistet beim Formatieren von Formularen gute Dienste.

Abbildung 4-7: Tastatureingabe beim Neuer Eintrag-Formular.

00___iPhoneApps.book Seite 64 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

Das Einstellungen-Bedienfeld | 65

</div> <ul class="edgetoedge"> <li class="arrow"><a href="#dates">Daten</a></li> <li class="arrow"><a href="#about">&Uuml;ber Kilo</a></li> </ul></div>

1 In dieser Zeile wird der Button eingefügt. Beachten Sie, dass ich dem Link die Klasseflip zugewiesen habe. Sie weist jQTouch an, dass die Animation von der Hauptseitezum EINSTELLUNGEN-Bedienfeld eine Rotation um die vertikale Achse sein soll. Umdas noch ein wenig echter aussehen zu lassen, wird die Seite während der Animationein wenig nach hinten verschoben, genau so wie es die auf dem iPhone vorinstal-lierte Wetter-App macht. Schick, oder?

Im Vergleich mit dem NEUER EINTRAG-Bedienfeld sieht der HTML-Code des EINSTEL-LUNGEN-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 siegleich. Fügen Sie den Code auf die gleiche Weise wie bei den anderen Bedienfeldern inIhre HTML-Datei ein. Wenn Sie fertig sind, sollte das EINSTELLUNGEN-Bedienfeld wie inAbbildung 4-9 aussehen.

Genauso wie das NEUER EINTRAG-Formular speichert auch das EINSTELLUNGEN-Formu-lar noch keine Informationen ab. Das steht, wie bereits gesagt, im nächsten Kapitel aufdem Plan.

Abbildung 4-8: Der Einstellungen-Button wurde der Titelleiste auf der Hauptseite hinzugefügt.

Beispiel 4-6: Der HTML-Code für das Einstellungen-Bedienfeld

<div id="settings"> <div class="toolbar"> <h1>Einstellungen</h1> <a class="button cancel" href="#">Abbrechen</a>

00___iPhoneApps.book Seite 65 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

66 | Kapitel 4: Animation

Alles zusammenfügenDamit haben wir es! Mit weniger als 100 Zeilen Code haben wir eine iPhone-isierteBenutzeroberfläche für eine Applikation mit sechs Bedienfeldern inklusive Animationenfür die Seitenübergänge erstellt. Beispiel 4-7 zeigt den gesamten fertigen HTML-Code.

</div> <form method="post"> <ul> <li><input placeholder="Alter" type="text" name="age" id="age" /></li> <li><input placeholder="Gewicht" type="text" name="weight" id="weight" /></li> <li><input placeholder="Budget" type="text" name="budget" id="budget" /></li> <li><input type="submit" class="submit" name="action" value="&Auml;nderungen speichern" /></li> </ul> </form></div>

Abbildung 4-9: Das Einstellungen-Bedienfeld.

Beispiel 4-7: Der fertige HTML-Code für die App mit sechs Bedienfeldern

<html> <head> <title>Kilo</title> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css"> <script type="text/javascript" src="jqtouch/jquery.js"></script> <script type="text/javascript" src="jqtouch/jqtouch.js"></script>

Beispiel 4-6: Der HTML-Code für das Einstellungen-Bedienfeld (Fortsetzung)

00___iPhoneApps.book Seite 66 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

Alles zusammenfügen | 67

<script type="text/javascript"> var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' }); </script> </head> <body> <div id="home"> <div class="toolbar"> <h1>Kilo</h1> <a class="button flip" href="#settings">Einstellungen</a> </div> <ul class="edgetoedge"> <li class="arrow"><a href="#dates">Daten</a></li> <li class="arrow"><a href="#about">&Uuml;ber Kilo</a></li> </ul> </div> <div id="about"> <div class="toolbar"> <h1>&Uuml;ber Kilo</h1> <a class="button back" href="#">Zur&uuml;ck</a> </div> <div> <p>Mit Kilo k&ouml;nnen Sie &uuml;ber Ihr Essen Tagebuch f&uuml;hren.</p> </div> </div> <div id="dates"> <div class="toolbar"> <h1>Daten</h1> <a class="button back" href="#">Zur&uuml;ck</a> </div> <ul class="edgetoedge"> <li class="arrow"><a id="0" href="#date">heute</a></li> <li class="arrow"><a id="1" href="#date">gestern</a></li> <li class="arrow"><a id="2" href="#date">vor zwei Tagen</a></li> <li class="arrow"><a id="3" href="#date">vor drei Tagen</a></li> <li class="arrow"><a id="4" href="#date">vor vier Tagen</a></li> <li class="arrow"><a id="5" href="#date">vor fünf Tagen</a></li> </ul> </div> <div id="date"> <div class="toolbar"> <h1>Datum</h1> <a class="button back" href="#">Zur&uuml;ck</a> <a class="button slideup" href="#createEntry">+</a> </div> <ul class="edgetoedge"> <li id="entryTemplate" class="entry" style="display:none"> <span class="label">Beschreibung</span> <span class="calories">000</span>

Beispiel 4-7: Der fertige HTML-Code für die App mit sechs Bedienfeldern (Fortsetzung)

00___iPhoneApps.book Seite 67 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

68 | Kapitel 4: Animation

jQTouch anpassenDurch eine Vielzahl von Eigenschaften, die man im Konstruktor von jQTouch einstellenkann, erlaubt jQTouch es Ihnen, sein Standardverhalten einzustellen. Wir haben dasbereits bei icon und statusBar gesehen, aber es gibt noch einige weitere Eigenschaften,die Sie kennen sollten (siehe Tabelle 4-1).

<span class="delete">L&ouml;schen</span> </li> </ul> </div> <div id="createEntry"> <div class="toolbar"> <h1>Neuer Eintrag</h1> <a class="button cancel" href="#">Abbrechen</a> </div> <form method="post"> <ul> <li><input type="text" placeholder="Essen" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="text" placeholder="Kalorien" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="submit" class="submit" name="action" value="Eintrag speichern" /></li> </ul> </form> </div> <div id="settings"> <div class="toolbar"> <h1>Einstellungen</h1> <a class="button cancel" href="#">Abbrechen</a> </div> <form method="post"> <ul> <li><input placeholder="Alter" type="text" name="age" id="age" /></li> <li><input placeholder="Gewicht" type="text" name="weight" id="weight" /></li> <li><input placeholder="Budget" type="text" name="budget" id="budget" /></li> <li><input type="submit" class="submit" name="action" value="&Auml;nderungen speichern" /></li> </ul> </form> </div> </body></html>

Beispiel 4-7: Der fertige HTML-Code für die App mit sechs Bedienfeldern (Fortsetzung)

00___iPhoneApps.book Seite 68 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

jQTouch anpassen | 69

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 ani-mieren, wie es hereinanimiert wurde.

cacheGetRequests true true oder false. Wenn true gesetzt ist, werden GET-Anfragen automatisch zwischengespei-chert, 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ürfelani-mation 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 Überblend-animation 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 Ausblend-animation 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 Umdreh-animation 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 sol-len.

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 absoluter Pfad zur 57px × 57px großen PNG-Bilddatei.

Das Webclip-Icon für die App. Das ist das Bild, das angezeigt wird, wenn der Anwender die App auf dem Home-Bild-schirm abspeichert.

00___iPhoneApps.book Seite 69 Montag, 26. April 2010 1:58 13

Dies ist ein A

uszug aus dem B

uch "iPhone A

pps mit H

TM

L, CS

S und JavaS

cript", ISB

N 978-3-89721-603-7

http://ww

w.oreilly.de/catalog/buildiphoappger/

Dieser A

uszug unterliegt dem U

rheberrecht. © O

’Reilly V

erlag 2010

70 | Kapitel 4: Animation

Was Sie gelernt habenIn diesem Kapitel haben Sie gelernt, wie man einer Web-App nativ aussehende Animatio-nen mit jQTouch hinzufügt. Im nächsten Kapitel erfahren Sie, wie Sie die neuen lokalenSpeicherfunktionen und die clientseitigen Datenbankfunktionen von HTML5 verwen-den, um die Daten der App dauerhaft zu speichern.

popSelector '.pop' Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.

Definiert Elemente, die eine Pop-Ani-mation (Einblenden und Vergrößern aus der Bildschirmmitte) vom aktuellen Bedienfeld zum Zielbedienfeld auslö-sen.

preloadImages false Ein Array mit Bildpfaden, die geladen werden sollen, bevor die Seite lädt.

Beispiel: ['images/link_over.png', 'images/link_select.png].

slideInSelector 'ul li a' Ein gültiger CSS-Selektor; trennen Sie mehrere Werte mit Kommata voneinander.

Definiert Elemente, die eine horizontale Schiebeanimation vom aktuellen Be-dienfeld 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 Be-dienfeld zum Zielbedienfeld auslösen.

startupScreen null null oder ein relativer oder absoluter Pfad zu einer Bild-datei.

Übergeben Sie einen relativen oder absoluten Pfad zu einem 320px × 460px großen Startbild für Vollbildmo-dus-Apps. Wenn Sie statusBar auf black-translucent setzen, ver-wenden Sie bitte ein 320px × 480px großes Startbild.

statusBar 'default' default, black-trans-lucent, 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 Austausch-animation vom aktuellen Bedienfeld zum Zielbedienfeld auslösen.

useAnimations true true oder false Auf false setzen, um alle Animatio-nen zu deaktivieren.

Tabelle 4-1: jQTouch-Einstellungen (Fortsetzung)

Eigenschaft Standardwert Erwartet Bemerkung

00___iPhoneApps.book Seite 70 Montag, 26. April 2010 1:58 13