Inhalt - bücher.de Dies ist ein Auszug aus dem Buch "iPhone Apps mit HTML, CSS und...

Click here to load reader

  • date post

    27-Sep-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Inhalt - bücher.de Dies ist ein Auszug aus dem Buch "iPhone Apps mit HTML, CSS und...

  • | VII

    Inhalt

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

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

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

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

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

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

  • VIII | Inhalt

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

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

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

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

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

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

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

  • D ies ist ein A

    uszug aus dem B

    uch "iP hone A

    pps m it H

    T M

    L, C S

    S und JavaS

    cript", IS B

    N 978-3-89721-603-7

    http://w w

    w .oreilly.de/catalog/buildiphoappger/

    D ieser A

    uszug unterliegt dem U

    rheberrecht. © O

    ’R eilly V

    erlag 2010

    | 55

    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 schie- ben 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ättern- Effekt 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üh- sam. 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 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 Aufwand von null an selbst programmieren könnte.

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

    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-

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

  • D ies ist ein A

    uszug aus dem B

    uch "iP hone A

    pps m it H

    T M

    L, C S

    S und JavaS

    cript", IS B

    N 978-3-89721-603-7

    http://w w

    w .oreilly.de/catalog/buildiphoappger/

    D ieser A

    uszug unterliegt dem U

    rheberrecht. © O

    ’R eilly 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 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 Kilo4 Über Kilo Zurück5

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

  • D ies ist ein A

    uszug aus dem B

    uch "iP hone A

    pps m it H

    T M

    L, C S

    S und JavaS

    cript", IS B

    N 978-3-89721-603-7