jQuery Mobile (jQM) setzt auf der bekannten jQuery-Bibliothek auf und ist von Grund auf als umfassendste Plattform für das Erstellen mobiler Sites konzipiert. Schreiben Sie einfach Ihren Code über die Bibliothek und sie kümmert sich in bestmöglicher Form um das Rendern des Markups auf den Browsern. Mithilfe von jQM brauchen Sie sich nicht (unbedingt) um Geräteerkennung und -fähigkeiten zu kümmern. Die Bibliothek garantiert, dass die Ausgabe auch auf älteren Browsern funktioniert; ob diese dann auch wirklich das gewünschte Ergebnis erzielt, steht auf einem anderen Blatt. Zunächst werden die Grundpfeiler der Bibliothek untersucht und dann einige Codebeispiele vorgestellt.
Das Fundament von jQM
Die offizielle Site von jQM finden Sie unter [1], die neueste Version unter [2]. Um jQuery Mobile verwenden zu können, benötigen Sie die übergeordnete jQuery-Bibliothek mindestens in der Version 1.5. Zudem ist die Bibliothek ohne eine begleitende CSS-Datei nahezu unbrauchbar. Die Bibliothek verarbeitet eine Seite und transformiert sie von einer reinen Sammlung aus DIV-Tags in ein zweckmäßiges und für mobile Geräte geeignetes Dokument. Hierzu sind jede Menge Styles und Bilder erforderlich, die nach strengen Standards erzeugt werden müssen. Die Bibliothek bringt eine vordefinierte CSS-Datei mit, die Sie einbinden können. Wie viele andere Dinge sind die Themen natürlich durch den Entwickler anpassbar. Bei jQM lässt sich dies über das Tool „ThemeRoller“ bewerkstelligen – ein Hilfsmittel, mit dem Sie Ihr eigenes Thema problemlos entwerfen können. Der Code in Listing 1 zeigt die Dateien, die in den jeweiligen Anwendungsseiten oder einfach in einer Master-Seite einzubinden sind.
Listing 1
jQuery Mobile Demos
...
Wie aus dem Code hervorgeht, müssen Sie die jQM-CSS-Datei (und außerdem jede andere anwendungsspezifische CSS-Datei) sowie die normale jQuery-Bibliothek referenzieren. Dabei muss der Verweis auf die normale jQuery-Bibliothek vor dem Verweis auf die jQM-Bibliothek erscheinen. In Bezug auf mobile Sites können Sie prinzipiell nach zwei Konzepten arbeiten: Beim ersten machen Sie Ihren Entwurf ausreichend flexibel, damit er sich an variierende Displaygrößen anpassen lässt. Das andere basiert auf einer einzelnen HTML-Seite, die mithilfe von JavaScript per Programm angepasst wird. Der erste Ansatz stützt sich ausgiebig auf CSS- und CSS3-Medienabfragen. Der zweite gestaltet sich besonders einfach wenn man jQuery Mobile oder gegebenenfalls eine andere entsprechende Bibliothek verwendet (ein Beispiel für eine alternative Bibliothek ist SenchaTouch).
CSS-Medienabfragen
CSS-Medienabfragen sind keine spezifische Technologie für die mobile Entwicklung, aber durch ihre Flexibilität sind sie wirklich ein Muss, um verschiedene Geräte mit einer einzelnen Codebasis zu bedienen. Medienabfragen liegt die Idee zugrunde, lediglich eine Site mit einem einzelnen Satz von Funktionen zu erstellen und dann unterschiedliche CSS-Styles darauf anzuwenden, indem für verschiedene Medien jeweils ein anderes Style Sheet geladen wird. Als große Verbesserung hat CSS3 jetzt ein Medium (z. B. einen Bildschirm), das sich den vorgegebenen Regeln entsprechend auf alle Geräte zuschneiden lässt. Der Code aus Listing 2 zeigt ein Beispiel für Medienabfragen.
Listing 2
In einer HTML-Seite (oder -Ansicht) verknüpft das obige Markup die Datei downlevel.css nur dann, wenn die Seite über einen Browser mit einer Breite von maximal 320 Pixeln betrachtet wird. Es gibt keine explizite Überprüfung hinsichtlich des Browsertyps, ob mobil oder Desktop: Es zählt allein die wirkliche Breite des Bildschirms (bei einer Bildschirmbreite von 320 Pixeln kommt zweifellos nur ein Mobiltelefon oder ein Handheld in Frage). Das Schlüsselwort only wird einzig aus dem Grund hinzugefügt, um dieses Style Sheet vor älteren Browsern zu verbergen. Medienabfragen können nur eine begrenzte Anzahl von Browsereigenschaften überprüfen, nämlich diejenigen, die im W3C-Standard aufgeführt sind: Gerätebreite und -höhe, Ausrichtung, Seitenverhältnis, Farbtiefe und Auflösung - um nur die gebräuchlichsten zu nennen. Die meisten Eigenschaften unterstützen das min- und max-Präfix, um genauere Abfragen formulieren zu können. Als CSS-Merkmal können Medienabfragen nur Elemente verbergen, die zu groß sind oder eine zu geringe Priorität besitzen, um auf einem kleinen Display angezeigt zu werden. Medienabfragen helfen kaum weiter, um die Speicherverwaltung des Seiten-DOM zu optimieren. Die vollständige Dokumentation zu Medienabfragen finden Sie unter [3].
Die Bibliothek und die Browser
Die jQM-Bibliothek zielt auf eine breite Palette von Browsern ab und kategorisiert sie in drei Hauptgruppen namens A, B und C. Die Unterteilung basiert auf den Fähigkeiten, die die Browser in Bezug auf Anforderungen der Bibliothek bereitstellen. Hervorzuheben ist, dass die jQuery-Mobile-Bibliothek intern versucht, mithilfe von Medienabfragen bestimmte Browserfähigkeiten über den anfordernden Browser abzuleiten. Folglich ist die Unterstützung für CSS-Medienabfragen eine entscheidende Fähigkeit in jQM, und Browser, die keine Medienabfragen ausführen können, erhalten kaum Unterstützung von jQuery Mobile. Das heißt, dass Seiten zwar angezeigt werden, die Benutzerfreundlichkeit letztlich jedoch nicht mit der von High-End-Browsern vergleichbar ist.
Kommen wir nun im Detail zu den Fähigkeiten, die für Browser in den verschiedenen Gruppen erforderlich sind: Browser auf der obersten Ebene werden als Browser der Klasse A bezeichnet. In der Regel unterstützen sie Medienabfragen, JavaScript, Ajax, CSS und vollständige DOM-Manipulation. Diese werden regelmäßig getestet und repräsentieren die Gruppe der Browser, für die die Bibliothek grundsätzlich erstellt wird. Allerdings ist nicht garantiert, dass sämtliche Merkmale der Bibliothek von praktisch jedem Browser der Klasse A unterstützt werden. Die Browser der Klasse B sind weniger leistungsfähig, aber trotzdem noch vollwertige Browser. In dieser Klasse fehlen vor allem die Ajax-Funktionen. Die Bibliothek ist für derartige Browser nicht optimiert, sodass manche Operationen zwar erfolgreich ausführbar sind, die Benutzerfreundlichkeit aber zu wünschen übrig lässt. Entscheidend ist, dass Browser der Klasse B eine geringere Priorität genießen und folglich weniger Workarounds erwarten dürfen, die in der Kernbibliothek implementiert werden, um Unregelmäßigkeiten zu korrigieren. Sollte einer dieser Browser für Sie eine wichtige Rolle spielen, können Sie entweder ganz auf jQuery Mobile verzichten oder die Seiten noch anpassungsfähiger gestalten.
Schließlich unterstützen Browser der Klasse C keine Medienabfragen und sind auf JavaScript, DOM-Manipulation und CSS beschränkt. Wird eine jQM-Seite von einem Browser der Klasse C wiedergegeben, fällt sie einfach auf reines HTML und Basis-CSS zurück. Auf die Seitenelemente wird keine DOM-Modifikation angewandt. Für diese Browser sollten Sie einfach einen alternativen Satz von Seiten einplanen, um die Benutzerfreundlichkeit zu verbessern. Aktuelle Informationen zu Browsern und Klassen finden Sie unter [4].
Beispiel für eine jQM-Seite
Eine mobile Seite ist relativ einfach aufgebaut und basiert oftmals auf dem einspaltigen Layout. In jQuery Mobile ergibt sich eine typische Seite aus der Kombination von Kopfzeilen-, Fußzeilen- und Inhaltselementen. Dies ist jedoch lediglich eine Konvention: Sie darf jedes gültige Markup enthalten. Eine HTML-Seite kann mehrere Elemente umfassen, die als logische Seiten markiert sind, wie es Listing 3 zeigt. Allerdings muss eine jQuery-Mobile-Seite nicht unbedingt eine gesonderte HTML- oder ASPX-Seite sein, die in ihrer eigenen Datei untergebracht ist. Jeder HTML-Block, der ordnungsgemäß dekoriert ist, lässt sich als eigenständige Seite verarbeiten.
Eine Seite wird durch ein DIV-Element gekennzeichnet, das mit dem auf den Wert page gesetzten Attribut data-role versehen ist. Sie kann über eine eigene ID verfügen und mit dem Attribut class die Style-Einstellungen überschreiben. Mit dem Attribut data-theme lässt sich das Thema für die gesamte Seite auswählen. Standardmäßig akzeptiert das theme-Attribut Werte wie a, b, c, d und e.
Listing 3
......
Wenn Sie mehrere logische Seiten verwenden, sollten Sie sie ihnen jeweils eindeutige IDs zuweisen, was Navigation und auch Initialisierung ermöglicht.
Zwei häufig verwendete Werte für das Attribut data-role sind header und footer. Die Kopfzeile (header) enthält den Seitentitel sowie rechts und links einige optionale Schaltflächen (um die iPhone-Vorlage nachzuahmen). Die header-Rolle erhält vom Framework einen speziellen Stil und wird einigen Standardmanipulationen unterzogen. Als Entwickler können Sie sowohl die header-Vorlage als auch den Text und das Ziel der Schaltflächen vollständig anpassen. Listing 4 zeigt eine Seite mit Kopf- und Fußzeilen:
Listing 4
Demos
This is the body of the pageCompany info
Mithilfe des data-position-Attributs lässt sich die Position konstant am unteren Rand der Seite halten.
Zusammenfassung
In diesem Artikel habe ich lediglich das "Hello World" von jQuery Mobile vorgestellt. Es gibt weit mehr über dessen Fähigkeit herauszufinden und zu entdecken, um anspruchsvolle Webseiten und mobile Oberflächen zu erzeugen - mehr zu diesen und anderen Aspekten lesen Sie in den kommenden Monaten. Wenn Sie die kurzen Listings in eine HTML-Textdatei kopieren und die jQuery-Bibliotheken ordnungsgemäß damit verknüpfen, können Sie sich sogar auf Desktopbrowsern der neuesten Versionen von Internet Explorer, Chrome, Firefox und ähnlichen eine telefonartige Oberfläche ansehen. Das heißt, Sie können jQM auch auf normalen Sites verwenden, um beispielsweise HTML-5-Funktionen browserübergreifend einzuführen.
