jQuery Mobile – write less, do more – Teil 4

Header-Grafik_JQM4

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. Der vierte Teil der Blogreihe baut auf Teil drei auf – nun wird aus dem Grundgerüst eine Web-App entwickelt.

Wo stehen wir?

Im dritten Teil der Blogreihe werden die ersten Schritte (HTML-Datei erstellen, Meta-Tags definieren, Framework einbinden) zur Erstellung einer Web-App mit jQuery Mobile beschrieben. Zudem wurde die Grundstruktur einer Seite der Web-App aufgebaut. Die Grundstruktur teilt die Seite in Header, Content und Footer ein. Folgende Abbildung zeigt das Ergebnis aus Teil drei.

Example_WebApp1_Nexus5

Wo wollen wir hin?

Mit diesem Beitrag soll das bisherige Grundgerüst zu einer kleinen Web-App weiterentwickelt werden – aus der starren Seite ohne Funktion soll eine interaktive Anwendung entstehen. Typischerweise besteht eine Web-App im Prinzip aus mehreren Seiten, durch die sich der Anwender navigieren kann. Wir werden unserer Web-App also zunächst weitere Seiten (Pages) spendieren. Damit der Anwender zu den einzelnen Seiten gelangen kann, werden Navigationselemente benötigt. Diese setzen wir als Buttons und als Navigationsleiste um.

In diesem Artikel wird relativ viel Quelltext gezeigt, davon aber bitte nicht abschrecken lassen. Der Quelltext dient zur Erklärung der HTML- und jQuery-Mobile-Elemente. Am Ende des Artikel gibt’s wieder ein JSFiddle mit dem vollständigen Quellcode – ihr müsst euch also nichts aus einzelnen Code-Schnipseln zusammenbauen.

Seiten (Pages) hinzufügen

Bevor ich an dieser Stelle zu viel theoretisch beschreibe, zunächst das Praktische: Zur Erstellung weiterer Seiten muss fast nur die Copy-Paste-Funktion bemüht werden. Wieso fast? Es gilt einzig die ID zu beachten, dazu aber später mehr.

Wir haben bereits in Teil drei der Blogreihe unsere erste Seite der Web-App erstellt:

<div data-role="page" id="home"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p> 
   </div> 
   <div data-role="content"> 
      <h3>Überschrift</h3> 
        <li>Beispiel</li> 
        <li>Beispiel</li> 
        <li>Beispiel</li> 
        <li>Beispiel</li> 
   </div> 
   <div data-role="footer" data-position="fixed" > 
      <h3>Fußzeile</h3> 
   </div> 
</div>

Die Beispiel-Listeneinträge <li>Beispiel</li>schmeißen wir an dieser Stelle raus und ersetzen sie im Folgenden der Einfachheit halber mit Platzhaltertext.

Wie wir bereits gelernt haben, erhalten div-Container über das Attribut data-role eine bestimmte Rolle. Der äußere div-Container besitzt als Attribut data-role="page"  – folglich stellt dieser div-Container, mit allen weiteren div-Containern, die er umschließt, eine Seite dar. Genau diesen HTML-Schnipsel kopieren wir und fügen ihn unter das letzte schließende div-Tag ein – so einfach haben wir unsere zweite Seite erstellt. Der Quelltext der zwei Seiten sieht dann folgendermaßen aus (Zeile 1-12 ist die erste Seite, Zeile 14-25 die zweite Seite):

<div data-role="page" id="home"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>Überschrift</h3>
         HOME
   </div>
   <div data-role="footer" data-position="fixed" >
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite1"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>Überschrift</h3>
     Das ist unsere erste Seite. 
   </div>
   <div data-role="footer" data-position="fixed" >
      <h3>Fußzeile</h3>
   </div>
</div>

Nun ein bisschen zur Theorie. Das Schöne an jQuery Mobile ist die Verwaltung der einzelnen Seiten in einer HTML-Datei. Es wird also nicht pro App-Seite eine HTML-Datei angelegt, sondern alle App-Seiten werden untereinander in eine HTML-Datei geschrieben. Um die einzelnen App-Seiten zu unterscheiden, erhält jede App-Seite eine einzigartige ID – klingelts? Ein paar Zeilen weiter oben habe ich schon angekündigt, dass beim Kopieren die ID zu beachten ist. Wenn Ihr eure Seite kopiert und einfügt, müsst Ihr im div-Container mit dem Attribut data-role="page"  die ID ändern. Unsere erste Seite der Web-App besitzt die sprechende ID="home". Der zweiten Seite habe ich die ID="seite1" gegeben (Quellcode Zeile 14).

Durch die ID werden die Seiten unterschieden. Mit welchen Werten Ihr die ID belegt, ist im Grunde trivial. Bei umfangreichen Anwendungen (und üblicherweise ist eine Technische Dokumentation meist recht umfangreich) ergibt es Sinn, ein Konzept für die ID’s zu definieren. Um die Web-App noch etwas auszubauen, fügen wir zur der Startseite Home und seite1 noch zwei weitere Seiten hinzu mit der ID ID="seite2"  und ID="seite3" . Im Folgenden der Quellcode der vier jQuery Mobile Seiten.

<div data-role="page" id="home"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>HOME</h3>
     Das ist unsere Startseite.
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite1"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>SEITE 1</h3>
     Hier ist die erste Seite unserer Web-App...
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite2"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>SEITE 2</h3>
     ...hier Seite 2...
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite3"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>Seite 3</h3>
    ...und hier bist du auf der dritten Seiten unserer Web-App.
   </div>
   <div data-role="footer" data-position="fixed" >
      <h3>Fußzeile</h3>
   </div>
</div>

Navigationselemente einfügen – Buttons

Die neu erstellten Seiten seite1, seite2 und seite3 sind nutzlos, wenn man sie nicht aufrufen kann. Wir benötigen also Navigationselemente, um die weiteren Seiten aufzurufen.

jQuery Mobile bietet mehrere Möglichkeiten, um die Seiten zu erreichen. Eine simple und oft verwendete Lösung sind Buttons.

Buttons werden im Content-Bereich der Seite an beliebiger Stelle eingefügt. Buttons erhalten ein Linkziel, also die Seite, die nach Klicken/Drücken des Buttons angezeigt werden soll. An dieser Stelle kommen die IDs der Seiten nochmals ins Spiel. Eine ID identifiziert eine Seite nicht nur, sondern über die IDs wird die Verlinkung innerhalb der HTML-Datei, in der alle HTML-Seiten verwaltet werden, gesteuert.

Neben der ID werden dem Button noch weitere Informationen in Form von Attributen mitgegeben. Dazu zählen bspw.

  • Icons
  • Ausrichtung des Button-Titels (zentriert, linksbündig, rechtsbündig)
  • Seitenübergänge

Der folgende Button enthält ein Linkziel, ein Icon und einen Seitenübergang. Auf dem Button steht „Zur Seite 1“. Auch hier erst der praktische Teil, dann die Theorie zu den einzelnen Attributen des Buttons.

<a href="#seite1" class="ui-btn ui-icon-arrow-r ui-btn-icon-right" data-transition="slide">Zur Seite 1</a>

Der Code-Schnipsel für einen einfachen Button scheint auf den ersten Blick umfangreich, ist aber alles halb so wild. jQuery Mobile unterstützt an dieser Stelle sehr, was Darstellung, Icons und Animation der Seitenübergänge betrifft.

Ein Button ist nichts anderes als ein Link auf eine Seite. Daher beginnt der Ausdruck mit einem gewöhnlichen Link-Tag <a> . Dieses Tag besitzt Attribute und Klassen, damit der einfache Link zu einem jQuery-Mobile-typischen Button wird.

Das Attribut href="#seite1"beinhaltet das Linkziel, das mit dem Button erreicht werden soll – also unsere seite1, die wir zuvor erstellt haben. Wichtig ist, dass vor der ID das Raute-Symbol # steht. Nur mit dem Raute-Symbol funktioniert der Link.

Mit der Klasse class="ui-btn ui-icon-arrow-r ui-btn-icon-right" werden drei Eigenschaften definiert. ui-btn legt fest, dass der Link als Button interpretiert wird.
ui-icon-arrow-r erzeugt ein Icon, das einen Pfeil nach rechts darstellt.
Mit ui-icon-arrow-r wird die Position des Icons innerhalb des Buttons festgelegt – mit dieser Angabe wird, wie die meisten wahrscheinlich schon ahnen, das Icon im rechten Bereich des Buttons positioniert.

Mit dem Attribut data-transition="slide" wird festgelegt, wie der Seitenübergang animiert wird.

Buttons können sehr simpel nach dieser Art erstellt werden. Die Werte der Attribute sind durch jQuery Mobile festgelegt und können geändert werden. Eine Übersicht der möglichen Attributwerte finden sich für Seitenübergänge bei w3schools.com hier und für Icons hier. Auf der Online-Lernplattform w3schools.com kann zudem gleich getestet werden, wie der Button mit den jeweiligen Attributwerten dargestellt wird.

Wir fügen im Content-Bereich jeder Seite einen Button ein, der auf die jeweils folgende Seite verlinkt. Der Quelltext sieht folgendermaßen aus:

<div data-role="page" id="home"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>HOME</h3>
     Das ist unsere Startseite.
     <a href="#seite1" class="ui-btn ui-icon-arrow-r ui-btn-icon-right" data-transition="slide">Zur Seite 1</a>
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite1"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>SEITE 1</h3>
      Hier ist die erste Seite unserer Web-App...
      <a href="#seite2" class="ui-btn ui-icon-arrow-r ui-btn-icon-right" data-transition="slide">Zur Seite 2</a>
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite2"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>SEITE 2</h3>
      ...hier Seite 2...
      <a href="#seite3" class="ui-btn ui-icon-arrow-r ui-btn-icon-right" data-transition="slide">Zur Seite 3</a>.
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite3"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
   </div>
   <div data-role="content">
      <h3>Seite 3</h3>
    ...und hier bist du auf der dritten Seiten unserer Web-App.
   </div>
   <div data-role="footer" data-position="fixed" >
      <h3>Fußzeile</h3>
   </div>
</div>

Wie der erstellte jQuery-Mobile-Button im Content-Bereich aussieht, zeigt die folgende Abbildung.

Example_WebApp2_Nexus5

Navigationselemente einfügen – Navigationsleiste

Navigationsleisten findet man in den meisten mobilen Anwendungen. Sie unterscheiden sich von Buttons hauptsächlich darin, dass die Navigationsleiste meist im Header platziert ist und meist feste Seiten angesprungen werden (zum Beispiel die Startseite) oder man die Seiten „zurücknavigieren“ kann, entsprechend dem Zurück-Button im herkömmlichen Browser.

Für unsere kleine Web-App erstellen wir eine Navigationsleiste mit diesen zwei Funktionen. Der Quelltext einer jQuery-Mobile-Navigationsleiste sieht so aus:

<div data-role="navbar">
   <ul>
      <li><a href="#" data-icon="arrow-l" data-rel="back"></a></li>
      <li><a href="#home" data-icon="home"></a></li>
   </ul>
 </div>

Wir lernen an dieser Stelle einen neuen Attributwert kennen, der einem div-Container eine Rolle zuweist: navbar. Dadurch wird dieser div-Container als Navigationsleiste definiert. Der Aufbau der Navigationsleiste entspricht einer unordered list, also einer herkömmlichen, ungeordneten HTML-Liste. Das <ul> -Tag stellt den Rahmen der Liste dar, die <li> -Tags die Inhalte der Liste – diese sind die einzelnen Elemente der Navigationsleiste. In diesem Beispiel werden zwei Elemente für die Navigationsleiste definiert. Es ist möglich, weitere Elemente zu definieren.

Der Aufbau der Elemente der Navigationsleiste entspricht dem Aufbau der zuvor erstellen Buttons. Das erste Attribut href des Link-Tags <a> enthält das Linkziel. Eine Besonderheit ist der href-Inhalt des ersten Listenpunkts. Dieser enthält nur eine Raute #. Dieses Element ist in der Web-App der Zurück-Button, wie aus dem herkömmlichen Browser bekannt. Es wird also kein explizites Linkziel angegeben, denn egal aus welcher Position in der Web-App soll dieses Navigationselement eine Seite zurücknavigieren. Dieses Zurücknavigieren erfolgt über das Attribut  data-rel="back" und ersetzt damit ein explizites Linkziel. Das Attribut  data-icon="arrow-l" erzeugt ein Icon, das einen Pfeil nach links darstellt.

Der zweite Listenpunkt ist der Home-Button. Er leitet, egal aus welcher Position in der Web-App, den Anwender immer auf die Startseite zurück. Das  data-icon="home"  stellt ein Haus als typisches Symbol für den Home-Button dar.

Die Position der Icons wird dieses Mal nicht definiert – per default werden die Icons mittig platziert.

Wie dem ein oder anderen schon aufgefallen ist, enthalten die Elemente der Navigationsleiste keine Beschriftung – aufgrund der (relativ) eindeutigen Symbole verzichten wir an dieser Stelle auf Text. Der Quellcode der vier Seiten mit Navigationsleiste und Buttons sieht aus wie folgt:

<div data-role="page" id="home"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
      <div data-role="navbar">
         <ul>
            <li><a href="#" data-icon="arrow-l" data-rel="back"></a></li>
            <li><a href="#home" data-icon="home"></a></li>
        </ul>
      </div>
   </div>
   <div data-role="content">
      <h3>HOME</h3>
     Das ist unsere Startseite.
     <a href="#seite1" class="ui-btn ui-icon-arrow-r ui-btn-icon-right" data-transition="slide">Zur Seite 1</a>
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite1"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
      <div data-role="navbar">
         <ul>
            <li><a href="#" data-icon="arrow-l" data-rel="back"></a></li>
            <li><a href="#home" data-icon="home"></a></li>
        </ul>
      </div>
   </div>
   <div data-role="content">
      <h3>SEITE 1</h3>
      Hier ist die erste Seite unserer Web-App...
      <a href="#seite2" class="ui-btn ui-icon-arrow-r ui-btn-icon-right" data-transition="slide">Zur Seite 2</a>
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite2"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
      <div data-role="navbar">
         <ul>
            <li><a href="#" data-icon="arrow-l" data-rel="back"></a></li>
            <li><a href="#home" data-icon="home"></a></li>
        </ul>
      </div>
   </div>
   <div data-role="content">
      <h3>SEITE 2</h3>
      ...hier Seite 2...
      <a href="#seite3" class="ui-btn ui-icon-arrow-r ui-btn-icon-right" data-transition="slide">Zur Seite 3</a>.
   </div>
   <div data-role="footer" data-position="fixed">
      <h3>Fußzeile</h3>
   </div>
</div>

<div data-role="page" id="seite3"> 
   <div data-role="header" align="center" data-position="fixed" data-tap-toggle="false">
      <p>Kopfzeile</p>
      <div data-role="navbar">
         <ul>
            <li><a href="#" data-icon="arrow-l" data-rel="back"></a></li>
            <li><a href="#home" data-icon="home"></a></li>
        </ul>
      </div>
   </div>
   <div data-role="content">
      <h3>Seite 3</h3>
    ...und hier bist du auf der dritten Seiten unserer Web-App.
   </div>
   <div data-role="footer" data-position="fixed" >
      <h3>Fußzeile</h3>
   </div>
</div>

Unsere Web-App mit mehreren Seiten, Buttons im Content-Bereich und einer Navigationsleiste im Header sieht nun so aus:

Example_WebApp3_Nexus5

Geschafft!

Wer bis hierher gelesen hat, kann nun nicht nur die Grundstruktur einer jQuery-Mobile-Seite erstellen, sondern das Grundgerüst einer kompletten Web-App. Das erstellte Grundgerüst dient sehr gut dazu, einige jQuery-Mobile-Funktionen zu testen. Viele Funktionen mit Beispielen werden auf der bereits genannten Online-Plattform w3schools.com erklärt. Aber auch auf der Website von jQuery Mobile werden anhand von Demos alle Funktionen erläutert. Wie so oft beim Lernen gilt auch hier das Motto „learning by doing“ – probiert einige Funktionen aus und schmeißt den Quellcode in das Grundgerüst, das wir hier erarbeitet haben.

Hier gibts noch den Quellcode als JSFiddle.

Falls dabei Fragen auftauchen sollten, könnt ihr uns wie immer gerne kontaktieren – wir helfen, wo wir können!

Schreibe einen Kommentar

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