Einleitung

Wenn man heute Webentwicklung betreibt, kommt man zwangsläufig mit jQuery in Berührung. Macht man nun den Schritt in Richtung Webapplikationen und möchte diese auch für Touchgeräte mit dem Finger bedienbar machen, liegt der Schritt zu jQuery Mobile recht nahe. Dieses Framework besitzt alles, was für moderne Web-App-Entwicklung notwendig ist.

Die Layoutkomponenten sind für die Verwendung mit unterschiedlichen Geräten und deren Vielzahl an Auflösungen vorbereitet und bieten die Möglichkeit, sich an unterschiedliche Auflösungen anzupassen.

Dieses Buch ist vorwiegend für Leser gedacht, die schon erste Erfahrungen mit jQuery Mobile sammeln konnten. Falls ihnen diese Erfahrungen fehlen, könnte es sein, dass an manchen Stellen die Grundlagen fehlen, auf denen dieses Buch aufbaut. Diese Grundlagen werden sehr anschaulich im shortcut jQuery Mobile – Basics (siehe Links) vermittelt.

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	31.0.1650.57 me
jQuery	1.9.1
jQuery Mobile	1.3.2

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 fünf Kapitel gegliedert, wobei sich die Kapitel eins bis drei vorwiegend um Widgets drehen, während die Kapitel vier und fünf sich mit interessanten Randthemen beschäftigen.

Im Folgenden wird zu jedem Kapitel kurz aufgezeigt, was den Leser dort erwartet.

Kapitel 1 – Widgets zur Strukturierung

In diesem Kapitel werden Widgets behandelt, die zur Strukturierung der Anwendungsinhalte und deren Verteilung auf der Seite verwendet werden können. Unter diese Kategorie Widgets fallen Panel-, Table- und Grid-Widgets. Auch das Thema „Responsive Webdesign“ wird in diesem Kapitel einige Male gestreift.

Kapitel 2 – Pop-ups und Co.

Dieses Kapitel füllt den Werkzeugkasten mit Widgets, die sich öffnen und schließen lassen. Hier findet man Pop-up-, Collapsible- und Accordion-Widgets, die es dem Benutzer ermöglichen, nicht benötigte Anwendungsteile auszublenden, um sich besser auf den gerade benötigten Inhalt konzentrieren zu können.

Kapitel 3 – Mehr Widgets

In diesem Kapitel werden Widgets vorgestellt, die keiner der beiden vorherigen Kategorien zugeordnet werden konnten. Unter ihnen finden sich Perlen, wie zum Beispiel das Loader-Widget, und verschiedene Arten von Slider-Widgets.

Kapitel 4 – Nachladen von Inhalten

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 und 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.

Links

Bezeichnung	URL
Quellcode	https://github.com/marco-dierenfeldt/AdvancedMobile
jQuery Mobile Basics	http://entwickler.de/press/jQuery-Mobile-167497
jQuery	http://jquery.com
jQuery Mobile	http://jquerymobile.com
NetBeans	https://netbeans.org/

Tabelle 0.2: Wichtige Hyperlinks

1 Widgets zur Strukturierung

In diesem Kapitel werden wir uns mit Widgets beschäftigen, die die Verteilung des Seiteninhalts beeinflussen. Im Zuge dessen werden wir auch das Thema „Responsive Webdesign“ an mehreren Stellen streifen. Eine tiefere Behandlung dieses Themas würde leider den Rahmen dieses Buchs sprengen, weshalb ich an dieser Stelle nur auf weiterführende Lektüre verweisen kann.

Dort werden Dinge wie z. B. Media Queries, die wir hier verwenden, detailliert beschrieben. Vereinfacht gesagt geht es bei Responsive Design darum, die Webseite möglichst flexibel zu gestalten, sodass sie sich später in der Benutzung an das jeweilige Endgerät, auf dem sie dargestellt wird, automatisch anpasst. Die häufigste Anpassung betrifft die dargestellte Breite der Webseite, da es ja auch schon einen Unterschied macht, ob man das Smartphone bzw. Tablet hochkant oder quer hält. Aber auch andere Dinge, wie z. B. Auflösungen von Bildern, können eine Rolle spielen.