Einleitung

Seit HTML5 und CSS3 für neuen Wind in den Segeln der Webentwickler gesorgt hat, 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.

In diesem Buch werden die Grundlagen für die Arbeit mit jQuery Mobile geschaffen. Anhand geeigneter und getesteter Beispiele werden dem Leser die Funktionsweise und Vielschichtigkeit des Frameworks vermittelt. Schritt für Schritt bekommt er Werkzeuge an die Hand, um eigene Anwendungen mit jQuery Mobile zu entwickeln.

Für wen ist dieses Buch geeignet?

Das Buch ist für ein breites Publikum geschrieben, welches 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.

Aufbau des Buches

Das Buch ist in vier Kapitel gegliedert, die nacheinander gelesen werden können und aufeinander aufbauend in jQuery Mobile einführen.

Kapitel 1 – Einführung in 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 – Grundlegende Widgets

Dieses Kapitel füllt den Werkzeugkasten mit den Bausteinen mobiler Webanwendungen (Widgets). Hier werden anhand von Beispielquellcode die sieben wichtigsten Widgets und ihre Verwendung ausführlich erklärt.

Kapitel 3 – Events und Methoden

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 – 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. Am Ende des Kapitels wird kurz auf Fallstricke und Herausforderungen eingegangen.

Quellcode der Beispiele

Die in diesem Buch abgebildeten Screenshots und Listings der Kapitel 1 bis 3 entstammen allesamt dem Projekt Hello Mobile, welches über den Link

https://github.com/marco-dierenfeldt/HelloMobile

bei GitHub zu finden ist. Es ist wie in Kapitel 1 beschrieben gegliedert und enthält zusätzlich Unterverzeichnisse für die Widgets und Events, die in den Kapiteln dieses Buches beschrieben werden.

Für die jQuery Mobile App, die im 4. Kapitel dieses Buches entwickelt wird, wurde der Quellcode in ein eigenes GitHub-Projekt mit dem Namen ShoppingList gepackt, das sich unter dem Link

https://github.com/marco-dierenfeldt/ShoppingList

finden lässt. Sein Aufbau und die Dateien sind in Kapitel 4 des Buches genau erklärt.

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.

1 Einführung in jQuery Mobile

1.1 Was ist jQuery Mobile?

Wenn man sich die beiden Bestandteile des Namens „jQuery“ und „Mobile“ einmal getrennt ansieht, wird ziemlich schnell deutlich, worum es sich bei jQuery Mobile handelt. jQuery benötigt vermutlich keine gesonderte Vorstellung, es ist eines der bekanntesten JavaScript-Frameworks und jedem Entwickler von Webseiten, bewusst oder unbewusst, schon einmal begegnet. Falls Sie mit jQuery nichts anfangen können, oder es zwar dem Namen nach kennen, es aber noch nie aktiv verwendet haben, müssen Sie jetzt nicht verzweifeln. jQuery Mobile verwendet zwar jQuery, aber an den Stellen in diesem Buch, an denen wir es bewusst einsetzen, werden die verwendeten Teile erklärt.

„Mobile“ ist eines der Schlagwörter unserer Zeit. Alles muss heutzutage mobil sein, auch Webseiten, und mehr noch die Webapplikationen. jQuery Mobile unterstützt Sie also als JavaScript-Framework bei der Entwicklung von mobilen Webapplikationen.

Wozu benötigt man mobile Webapplikationen oder gar ein eigenes Framework für diese? Diese Frage ist berechtigt, gibt es doch eine unermessliche Flut an Apps für alle mobilen Plattformen. Da haben wir aber auch schon eine mögliche Antwort: die Vielzahl der Applikationsplattformen. Schon wenn wir uns allein auf die zwei führenden Plattformen (iOS und Android) beschränken würden, hätten wir dennoch eine sehr große Vielfalt an Endgeräten mit unterschiedlichsten Auflösungen, Farbtiefen, UI-Elementen und Bedienkonzepten.

Was alle diese Endgeräte gemein haben, ist ein Browser, der Webseiten (und damit auch Webapplikationen) verarbeiten kann. Hier ist der Ansatzpunkt für mobile Webseiten und Webapplikationen. jQuery Mobile ist nicht das einzige Framework für mobile Webanwendungen, es ist nur eines unter vielen, aber durch seine leicht verständliche Funktionsweise und saubere Trennung zwischen UI und Funktion eines der beliebtesten.

jQuery Mobile bietet durch seine „klassenbasierte Unterstützung von Browsern“ (Graded Browser Support) die Möglichkeit, die Anwendungen auf einer Vielzahl von Endgeräten zur Verfügung zu stellen. So werden in jQuery Mobile drei unterschiedliche Klassen von Endgeräten/Browsern definiert. In Abbildung 1.1 sehen Sie eine Übersicht dieser Klassen.

Abbildung 1.1: Klassen der Browserunterstützung in jQuery Mobile

Klasse A ist die höchstmögliche Klasse, sie bietet alle Features von jQuery Mobile, inklusive animierter Seitenwechsel, AJAX und HTML5-Erweiterungen. In dieser Klasse befinden sich annähernd alle modernen Smartphones, Smartphone- und Desktopbrowser.

Klasse B verzichtet auf AJAX-Navigationsfeatures, benutzt aber weiterhin die HTML5-Erweiterungen und das CSS-Layout. Sie beinhaltet ein paar ältere Smartphoneplattformen.

Klasse C letztlich verzichtet auf das CSS-Layout, auf AJAX und HTML5-Erweiterungen und stellt den Inhalt in klassischer Weboptik dar. In dieser Kategorie befinden sich vor allem ältere Featurephones. Eine komplette Liste finden Sie unter: http://jquerymobile.com/gbs/