Web-Apps mit jquery Mobile

Transkript

1 Philipp Friberg Web-Apps mit jquery Mobile Mobile Multiplattform-Entwicklung mit HTML5 und JavaScript

2 Philipp Friberg Lektorat: René Schönfeldt Copy Editing: Christoph Ecken, Heidelberg Herstellung: Frank Heidt Umschlaggestaltung: Helmut Kraus, Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, Paderborn Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. ISBN: Buch PDF epub Auflage 2013 Copyright 2013 dpunkt.verlag GmbH Ringstraße 19B Heidelberg Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen. Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen. Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen

3 v Inhaltsverzeichnis 1 Die Whisky-App Szenario Der Ergonomie-Workshop Was macht eine gute App aus? Designelemente Zusammenfassung Ein Story-Board für die Whisky-APP Anforderungen Use-Case-Diagramm Story-Board Zusammenfassung Mobile Entwicklung Der Einfluss des Browsers Entwicklungsumgebungen Eclipse Aptana Studio IntelliJ IDEA Adobe Dreamweaver ab CS Eclipse Orion JavaScript minimieren Simulatoren Android-Simulator ios-simulator ios-emulatoren BlackBerry-Simulator Paralleler Test Zusammenfassung

4 vi Inhaltsverzeichnis 3 Architektur von Web-Apps JavaScript Das Problem der ID Wie die Logik vom GUI unabhängig wird Die Whisky-App-Logik Von HTML5 bis jquery Mobile HTML5 und CSS Test-Bibliothek jquery-tutorial jquery-mobile-tutorial Die erste Webseite Grundgerüst der Whisky-App Externe Webseiten Inside jquery Mobile Stack Formatierung data-role-attribut Zusammenfassung Der Whisky-App ein Gesicht geben Modell und Controller an die View anbinden Themen Formular-Elemente gruppieren Collapsible Sets Grid-Darstellung Die Formular-Elemente Field-Container Mini-Elemente Texteingabe Datumseingabe Slider Rangesliders Flip Toggle Switch Radio-Buttons Sternen-Wertung Checkbox Select Options

5 Inhaltsverzeichnis vii Native Forms Tooltips/Pop-ups Buttons Form-Elemente in der Whisky-App View Controller Eingabeprüfung Die Listview als Ausgangspunkt Definieren der Listenstruktur Weitere Eigenschaften der Listview Erstellen der View Die jqm-tabelle Reflow-Tabelle Column-toggle-Tabelle Panels Tablet-Feeling App-Feeling Home-Icon Vollbildmodus Startgrafik Zusammenfassung Whisky-App und HTML5-APIs Datenbanken auf dem Mobile Web SQL Indexed DB Die eigene Location ermitteln Das Geolocation-Objekt Anpassungen an der View Anpassungen im Controller Fortlaufende Beobachtung Unterstützung Diagramme zeichnen Canvas Browser-Unterstützung Flot

6 viii Inhaltsverzeichnis 6.4 Offline gehen Caching Dynamische Manifest-Datei Zusammenfassung Weitere jqm-themen Das $.mobile-objekt Page Loading Message Placeholder-Kontrast Performance Transition ThemeRoller jquery-selektoren einschränken Events Page Cache HTML-Seiten vorladen live() und bind() Performance bei vielen Daten jquery-mobile-widgets jqm-widget am Beispiel des Input-Elementes Ein eigenes jqm-widget Konfiguration Standard-Texte jqm-attribut Page-Content-Wechsel Download-Builder Eingabe-Events Cloud-Kommunikation Distillery autocomplete Autocomplete Ajax Serverseite Twitter-Beispiel Daten zwischenspeichern Facebook-Integration App registrieren API in der App integrieren Die App freischalten und Marketing betreiben

7 Inhaltsverzeichnis ix 8.3 Backup Backup und Restore Web Sockets Unterstützung für Web Sockets Pusher Zusammenfassung Die Hybrid-App PhoneGap Whisky-App für ios Whisky-App für Android Schüttelgeste Ein wenig Hintergrund Apps veröffentlichen Eine ios-app veröffentlichen Eine Android-App veröffentlichen Zusammenfassung Anhang Anhang 277 A Produktiv-Setzung, Abschlussarbeiten B Web-Page-Umleitungen B.1 Umleitung auf Server definieren B.2 Umleitung in der HTML-Seite definieren C Diagramm der Objekte D Abkürzungen E Literatur F Link-Liste Index 285