jQuery Mobile – write less, do more – Teil 3

Bild_Artikel_1

Die Blogreihe jQuery Mobile – write less, do more stellt das Framework jQuery Mobile vor – ein Framework, das sich zur Erstellung von technischer Dokumentation für mobile Endgeräte eignet. Im dritten Teil wird der grundlegende Aufbau einer jQuery-Mobile-Anwendung Schritt für Schritt erklärt.

In den ersten zwei Teilen dieser Blogreihe stellt sich heraus, dass jQuery Mobile prädestiniert ist für die Erstellung einer mobile Dokumentation. Im Folgenden wird die Grundstruktur einer jQuery-Mobile-Anwendung detailliert erklärt. Zudem werden einige Tipps gegeben, die bei der Erstellung zu beachten sind.

Hinweis: Zu den beschriebenen Schritten gehören ergänzende Beispiele im Quellcode. Die Referenzen sind jeweils mit Zahlen gekennzeichnet.

Eine Web-App auf Basis von jQuery Mobile beginnt zunächst immer mit der Deklaration des Dokumententyps, in diesem Fall die der HTML-Datei (1). Anschließend werden im Head-Bereich die entsprechenden Meta-Angaben definiert, sowie die benötigten Frameworks hinzugefügt.

Die wichtigsten Meta-Angaben sind charset und viewport. Die charset-Angabe ist für den Browser wichtig, damit dieser weiß, mit welcher Zeichencodierung gearbeitet wird (2). Die viewport-Angabe definiert wiederum, wie groß die Seite ausgegeben werden soll bzw. welches Zoom-Level es haben soll. Mit der Angabe 1 passt sich die Größe der Seite entsprechend an das Display des Ausgabegerätes an (3) und erfüllt damit die gewünschte geräteunabhängige Responsivität.

Framework einbinden

Um mit jQuery Mobile arbeiten zu können, benötigt man natürlich die entsprechenden JavaScript- und CSS-Dateien. Die Dateien können entweder lokal im Projektordner gespeichert werden oder es können CDN-Dateien eingebunden werden. Beide Varianten haben ihre Vor- und Nachteile.

Die lokal gespeicherten Daten eigenen sich besonders, wenn der Server, auf dem die Web-App später hochgeladen wird, eine bestimmte Firewall besitzt oder wenn die Web-App zur hybriden App weiterentwickelt werden soll. Neue Versionen von jQuery Mobile müssen jedoch manuell heruntergeladen und neu eingefügt werden. Zudem muss mit längeren Ladezeiten gerechnet werden.

Die CDN gehosteten Dateien dagegen können bei bestimmten Firewalls und bei der Umwandlung zur hybriden App für Probleme sorgen. Hier könnte es vorkommen, dass die Frameworks nicht erkannt oder geladen werden und die App nicht korrekt angezeigt wird. Der Vorteil der extern gehosteten Daten ist jedoch, dass das Updaten weniger Zwischenschritte erfordert und die Ladezeiten der App kürzer sind.

Zu den notwendigen Dateien gehören

  • jQuery Mobile Stylesheet (4)
  • jQuery JavaScript (5)
  • jQuery Mobile JavaScript (6)

Im folgenden Beispiel haben wir die CDN-gehostete Variante dargestellt:

<!doctype html> (1)
<html>
<head>
<meta charset=“utf-8″> (2)
<meta name=“viewport“ content=“width=device-width, initial-scale=1″> (3)

<link rel=“stylesheet“ href=“http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css“ /> (4)
<script src=“http://code.jquery.com/jquery-1.11.1.min.js“></script> (5)
<script src=“http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js“></script> (6)
</head>
<body>

</body>
</html>

Seitenstruktur erstellen

Ist all dies erledigt, kann man endlich seine erste Seite der App anlegen. Eine App-Seite besteht standardmäßig aus mehreren div-Containern, die verschiedene Rollen (in Form von Attributen) zugewiesen bekommen. Dies geschieht über den Befehl data-role. Die div-Container können folgende Rollen haben:

  • Page (1)
  • Header (2)
  • Content (3)
  • Footer (4)

Das folgende Beispiel zeigt eine einfache Seite mit einer Aufzählung, sowie die konkrete Anwendung der verschiedenen Rollen, die durch die zuvor genannten Attribute definiert werden.

<div data-role=“page“ id=“home“> (1)
<div data-role=“header“ align=“center“ data-position=“fixed“ data-tap-toggle=“false“> (2)
<p>Kopfzeile</p>
</div>
<div data-role=“content“> (3)

<h3>Überschrift</h3>

<li>Beispiel</li>
<li>Beispiel</li>
<li>Beispiel</li>
<li>Beispiel</li>

</div>

<div data-role=“footer“ data-position=“fixed“ > (4)

<h3>Fußzeile</h3>
</div>
</div>

Mithilfe des Tools JSFiddle stelle ich euch die Beispiele zu Verfügung. Hier könnt Ihr nach Herzenslust rumprobieren und selbst Hand anlegen.

Zusammenfassend gesagt, besteht diese erste Einführung aus folgenden Schritten:

  1. Erstellen der HTML-Datei
  2. Definieren der Meta-Tags
  3. Einbinden der notwendigen Frameworks
  4. Erstellen der Seitenstrukturen

Quelle: jQuery Mobile

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.