Marco Dierenfeld
jQuery Mobile. Einfach mobile Web-Apps entwickeln
ISBN 978-3-86802-636-8
© 2014 entwickler.press
Ein Imprint der Software & Support Media GmbH
Bibliografische Information Der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.
Ihr Kontakt zum Verlag und Lektorat:
Software & Support Media GmbH
entwickler.press
Darmstädter Landstraße 108
60598 Frankfurt am Main
Tel.: +49 (0)69 630089-0
Fax: +49 (0)69 630089-89
lektorat@entwickler-press.de
http://www.entwickler-press.de
Lektorat: Theresa Vögle
Korrektorat: Frauke Pesch
Copy-Editor: Nicole Bechtel
Satz: Dominique Kalbassi
Umschlaggestaltung: Maria Rudi
Titelbild: © iStockfoto.com/aleksandarvelasevic
Alle Rechte, auch für Übersetzungen, sind vorbehalten. Reproduktion jeglicher Art (Fotokopie, Nachdruck, Mikrofilm, Erfassung auf elektronischen Datenträgern oder anderen Verfahren) nur mit schriftlicher Genehmigung des Verlags. Jegliche Haftung für die Richtigkeit des gesamten Werks kann, trotz sorgfältiger Prüfung durch Autor und Verlag, nicht übernommen werden. Die im Buch genannten Produkte, Warenzeichen und Firmennamen sind in der Regel durch deren Inhaber geschützt.
Einleitung
Seit HTML5 und CSS3 für neuen Wind in den Segeln der Webentwickler gesorgt haben, sind neue Frameworks wie Pilze aus dem Boden geschossen. Rund um das JavaScript-Framework jQuery entwickelte sich eine ganze Frameworkfamilie, zu der auch jQuery Mobile gehört.
Dieses Buch soll von Grundlagen bis hin zu Expertenwissen einen tiefen Einblick in die Funktionsweisen und Möglichkeiten von jQuery Mobile liefern. Anhand geeigneter Beispiele mit vielen Möglichkeiten zum Ausprobieren werden nicht nur die vielen unterschiedlichen Widgets von jQuery Mobile, sondern auch viele andere Aspekte bis hin zum testgetriebenen Entwickeln von jQuery-Mobile-Webanwendungen erläutert.
Dieses Buch ist aus der E-Book-shortcut-Serie zum Thema jQuery Mobile entstanden. Gegenüber den E-Books unterscheidet sich dieses Buch insofern, als jedes Kapitel anhand der neuesten Version der verwendeten Frameworks und Tools überarbeitet wurde und die Artikel in einer sinnvollen Reihenfolge neu arrangiert wurden.
Für wen ist dieses Buch geeignet?
Das Buch ist für ein breites Publikum geschrieben, das Interesse daran hat, einen technisch geprägten Einblick in jQuery Mobile zu bekommen.
Webentwickler werden aufgrund ihres Vorwissens in HTML, CSS und JavaScript natürlich den leichtesten Einstieg haben.
Entwickler, die bisher nur wenige Berührungspunkte mit Webentwicklung hatten, werden möglicherweise ein paar grundlegende Dinge zu HTML, CSS oder JavaScript an anderer Stelle nachlesen müssen, sollten sich aber auch sehr gut zurechtfinden können.
Einsteiger werden durch viele Beispiele und gut erklärten Quellcode an die Hand genommen und können Schritt für Schritt ihr Wissen aufbauen und anschließend eigene Anwendungen mit jQuery Mobile entwickeln.
Fortgeschrittene können sich Hintergrundinformationen zu jQuery Mobile aneignen und in den Beispielen verschiedene Tricks und Kniffe entdecken, die die tägliche Arbeit mit jQuery Mobile erleichtern.
Sie haben sich nicht in einer der oben genannten Gruppen wiedergefunden? Das ist nicht schlimm, wenn Sie einen Einblick in jQuery Mobile haben möchten und sich vielleicht sogar mit dem Gedanken tragen, selbst einmal Webanwendungen mit diesem Framework entwickeln zu wollen, dann wird Ihnen dieses Buch auch gute Dienste leisten.
Tools und Frameworks
Für die Erstellung dieses Buchs beziehungsweise für den darin verwendeten Quelltext wurden folgende Tools und Frameworks verwendet:
Tool/Framework |
Version |
NetBeans |
7.4 |
Google Chrome |
34.0.1847.116 m |
jQuery |
1.10.2 |
jQuery Mobile |
1.4.1 |
QUnit |
1.12.0 |
PhantomJS |
1.9.7 |
Jenkins CI |
1.5.5 |
Tabelle 0.1: Tools, Frameworks und ihre Versionen
Am Ende dieses Kapitels finden Sie Links zu den entsprechenden Webseiten der Frameworks und Tools. Dort können Sie die jeweils aktuelle Version herunterladen und die Beispiele aus den Kapiteln nachvollziehen.
Alle Screenshots wurden im Chrome Browser erstellt. Die Darstellung von Beispielen kann in anderen Browsern teilweise erheblich von der Darstellung in Chrome abweichen.
Aufbau des Buchs
Das Buch ist in sieben Kapitel gegliedert, die sich wiederum grob in vier Themenblöcke gliedern lassen:
Grundsätzlich ist es nicht zwingend nötig, sich beim Lesen an die Reihenfolge der Kapitel zu halten. Sinnvoll ist es aber in jedem Fall für Leser, die noch keine oder wenig Erfahrung mit jQuery Mobile haben, da die Kapitel teilweise inhaltlich aufeinander aufbauen.
Im Folgenden wird zu jedem Kapitel kurz aufgezeigt, was den Leser dort erwartet.
Kapitel 1 – jQuery Mobile
In diesem Kapitel wird erläutert, worum es sich bei jQuery Mobile handelt. Es werden die grundlegenden Rahmenbedingungen geschaffen, um mit dem Buch sinnvoll arbeiten zu können. Am Ende des Kapitels ist eine erste Minimal-App erstellt und lauffähig.
Kapitel 2 – Widgets, Widgets und noch mehr Widgets
Dieses Kapitel füllt den Werkzeugkasten mit den Bausteinen mobiler Webanwendungen (Widgets). Hier werden anhand von Beispielquellcode nahezu alle Widgets und ihre Verwendung ausführlich erklärt. Da die große Widget-Bibliothek eine der Stärken von jQuery Mobile ist, ist dies auch eines der dicksten Kapitel des Buches.
Kapitel 3 – Event Handling in jQuery Mobile
In diesem Kapitel werden die Konzepte des Event Handlings anschaulich gemacht und die für eigene Anwendungen wichtigen und für jQuery typischen Events und Methoden näher erläutert.
Kapitel 4 – Nachladen von Inhalten mit AJAX
Kaum eine moderne Webanwendung kommt ohne das dynamische Nachladen von Inhalten aus. In diesem Kapitel werden jeweils zwei Möglichkeiten vorgestellt, dies mit jQuery- und jQuery-Mobile-Mitteln zu bewerkstelligen.
Kapitel 5 – ThemeRoller und Theming von jQuery Mobile
Zu Anfang werden in diesem Kapitel die Standard-Themes von jQuery Mobile sowie ihre Funktionsweise erklärt. Der größte Teil dieses Kapitels beschäftigt sich aber mit dem ThemeRoller und seinen Möglichkeiten, eigene Themes für jQuery-Mobile-Anwendungen zu erstellen. Zu guter Letzt wird noch ausführlich erläutert, wie man eigene Themes in seine Anwendungen einbindet.
Kapitel 6 – Eine mobile Web-App
Dieses Kapitel dient der Anwendung des in den vorangegangenen Kapiteln erworbenen Wissens. Mit diesem Wissen wird eine erste einfache Web-App erstellt. Anhand dieser App werden die Konzepte und das vorher aufgebaute Wissen noch einmal verfestigt und verfeinert. Das Ende des Kapitels geht kurz auf Fallstricke und Herausforderungen ein.
Kapitel 7 – Unit Testing und jQuery Mobile
Dieses Kapitel rundet mit dem Themenbereich Unit Testing in der JavaScript-Entwicklung am Beispiel von jQuery Mobile den fachlichen Umfang des Buches ab. Hier werden Themen wie testgeriebene Entwicklung, Continuous Integration und Headles Testing im Kontext an praktischen Beispielen erläutert.
Quellcode der Beispiele
Die in diesem Buch abgebildeten Screenshots und Listings der Kapitel 1 bis 3 entstammen allesamt dem Projekt Hello Mobile, das bei GitHub zu finden ist. Es ist wie in Kapitel 1 beschrieben gegliedert und enthält zusätzlich Unterverzeichnisse für die grundlegenden Widgets und Events, die in den Kapiteln dieses Buches beschrieben werden.
Für die jQuery Mobile App, die in Kapitel 6 entwickelt wird, wurde der Quellcode in ein eigenes GitHub-Projekt mit dem Namen ShoppingList gepackt. Sein Aufbau und die Dateien sind in Kapitel 6 genau erklärt.
Der Quellcode der fortgeschrittenen Widget-Beispiele und weiterführenden Themen aus den Kapiteln 3 bis 5 befinden sich in dem GitHub-Projekt AdvancedMobile.
Für das Unit-Testing-Kapitel gibt es wiederum zwei Projekte, ui-testing, in dem die UI-Test-Beispiele verarbeitet wurden, und MobileTesting, in dem sich die Beispiele für Grundlagen und Continuous Integration befinden.
Die genannten GitHub-Projekte werden für das Verständnis des Buches nicht unbedingt benötigt, allerdings bieten sie die Möglichkeit, die Beispiele schnell und einfach live nachzuvollziehen. In Tabelle 0.2 finden sich auch die Links zu den GitHub Repositories.
Links
Bezeichnung |
URL |
Quellcode |
https://github.com/marco-dierenfeldt/HelloMobile https://github.com/marco-dierenfeldt/ShoppingList https://github.com/marco-dierenfeldt/AdvancedMobile https://github.com/marco-dierenfeldt/MobileTesting https://github.com/marco-dierenfeldt/ui-testing |
jQuery Mobile Basics |
http://entwickler.de/press/jQuery-Mobile-167497 |
jQuery Mobile Advanced |
http://entwickler.de/press/jQuery-Mobile-169406 |
jQuery Mobile Unit Testing |
http://entwickler.de/press/jQuery-Mobile-173249 |
QUnit |
http://qunitjs.com |
jQuery |
http://jquery.com |
jQuery Mobile |
http://jquerymobile.com |
NetBeans |
https://netbeans.org |
PhantomJS |
http://phantomjs.org |
Jenkins |
http://jenkins-ci.org |
Tabelle 0.2: Wichtige Hyperlinks
Danke
An diesem Punkt möchte ich mich für die sehr gute Unterstützung durch entwickler.press bedanken, ganz besonders für die große Geduld meiner Lektorin Frau Vögle!
Einen ganz besonderen Dank auch meiner Familie, insbesondere meiner Frau, die mir den Rücken freihielt und mir somit ermöglichte, dieses Buch zu schreiben. Danke Franca!