Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 12): jQuery mobile (4)

Web-Apps erstellen (Teil 12): jQuery mobile (4)

Das Grundgerüst der App steht. Was nun noch fehlt, sind die eigentlichen Inhalte. Dazu werden in diesem Video-Training zunächst die Verlinkungen untereinander ausgebaut. Prinzipiell hat man dabei immer die Möglichkeit, auf die ID einer internen oder auf eine externe Datei zu verweisen.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Die Navigationsleiste im unteren Fensterbereich wurde angelegt und gestaltet.

Bilder



Hier sollen nun einige Links definiert werden.
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="about.html" data-icon="info">Über uns</a></li>
<li><a href="kontakt.html" data-icon="grid">Kontakt</a></li>
<li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li>
<li><a href="impressum.html" data-icon="gear">Impressum</a></li>
<li><a href="#infos" data-icon="gear">Themen</a></li>
</li>
</div>
</div>

 
Die ersten vier Links verweisen einfach auf externe HTML-Seiten, die später noch angelegt werden müssen. Der Themen-Hyperlink bedient sich hingegen einer Ankerdefinition. Dadurch wird auf den internen Seitenbereich mit der ID infos verwiesen.
<div id="infos" data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Mehr zum Thema</h1>
  </div>
  <div data-tole="content">
    <p>Hier folgen die Detailinformationen</p>
  </div>
</div>

Klickt man jetzt einen der vier ersten Einträge an, tut sich zunächst einmal nichts. Das ist zum jetzigen Zeitpunkt absolut in Ordnung, da diese Seiten tatsächlich noch nicht angelegt wurden. Folgt man allerdings dem Link Themen, wird tatsächlich der Bereich mit der ID infos angezeigt. Das sollte nun also der aktuelle Stand sein.

 
Was jetzt fehlt, ist die Gestaltung der Liste in der Mitte. Die kommt momentan noch äußerst schmucklos daher.

Bilder



Das gilt es nun zu ändern. Dafür soll die schnöde Liste zu einer echten Mobile-Liste gemacht werden.
<div data-tole="content">
    <ul>
      <li>Tutorials</li>
      <li><a href="">2D</a></li>
      <li><a href="">3D</a></li>
      <li><a href="">Web</a></li>
      <li><a href="">Mediengestaltung</a></li>
      <li>Video-Trainings</li>
      <li><a href="">2D</a></li>
      <li><a href="">3D</a></li>
      <li><a href="">Web</a></li>
    </ul>
  </div>

 
Dazu kann man wieder eine Rollendefinition verwenden. Dem einleitenden ul-Element der Liste wird dazu die Attribut-Wert-Kombination data-role="listview" zugewiesen.
<ul data-role="listview">

Ein Blick auf das Ergebnis zeigt schon mal ein völlig anderes Bild.

Bilder



Tatsächlich sieht die Liste jetzt so aus, wie man das von einer App gewohnt ist.

 
Problematisch sind momentan noch die beiden Einträge Tutorials und Video-Trainings. Diese sollen sich deutlicher von den übrigen Einträgen abheben, da es sich bei denen um die Kategorien handelt.

Realisieren lässt sich das über sogenannte Divider. Um diese zu nutzen, wird den betreffenden Einträgen die Attribut-Wert-Kombination data-role="list-divider" zugewiesen.
<ul data-role="listview">
  <li data-role="list-divider">Tutorials</li>
   <li><a href="">2D</a></li>
   <li><a href="">3D</a></li>
   <li><a href="">Web</a></li>
   <li><a href="">Mediengestaltung</a></li>
   <li data-role="list-divider">Video-Trainings</li>
   <li><a href="">2D</a></li>
   <li><a href="">3D</a></li>
   <li><a href="">Web</a></li>
</ul>

 
Auch jetzt liefert ein Blick auf das Ergebnis wieder ein ansprechendes Ergebnis.

Bilder



 

Andere Listen definieren

Das Ergebnis sieht schon mal nicht schlecht aus, es gibt aber auch noch andere Möglichkeiten. Diese bieten sich beispielsweise an, wenn es sich um sehr umfangreiche Listen mit vielen Einträgen handelt. Zunächst ein Blick auf ein mögliches Ergebnis.

Bilder



 
Hier sind zwei unabhängige Listen definiert worden. Von den Untereinträgen dieser Listen ist momentan allerdings nichts zu sehen. Das ändert sich, wenn einer der Haupteinträge angeklickt wird.

Bilder



Dann öffnen sich nämlich die Untereinträge.

 
Eine solche Anwendung lässt sich denkbar einfach umsetzen. Dazu definiert man ein div-Element mit der Attribut-Wert-Kombination data-role="collapsible". Damit das Ganze dann auch noch über das Suchfeld filterbar ist, weist man dem ul-Element data-filter="true" zu. Mehr ist tatsächlich für eine solche Anwendung nicht nötig.
<div data-tole="content">
  <div data-role="collapsible">
    <h2>Tutorials</h2>
    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d">
      <li><a href="">2D</a></li>
      <li><a href="">3D</a></li>
      <li><a href="">Web</a></li>
    </ul>
  </div>
  <div data-role="collapsible">
    <h2>Video-Trainings</h2>
    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d">
      <li><a href="">2D</a></li>
      <li><a href="">3D</a></li>
      <li><a href="">Web</a></li>
    </ul>
  </div>
</div>

 

Seiten verlinken

Selbstverständlich werdet ihr nicht nur interne Seitendefinitionen verwenden und auf diese mittels Anker-Definition verweisen. Auch externe Seiten werdet ihr früher oder später erstellen. Und die sollen natürlich ebenfalls verlinkt sein. In der folgenden Syntax wird der Navigationsbereich um die passenden Verweisziele erweitert.

<div data-role="navbar">
<ul>
<li><a href="about.html" data-icon="info">Über uns</a></li>
<li><a href="kontakt.html" data-icon="grid">Kontakt</a></li>
<li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li>
<li><a href="impressum.html" data-icon="gear">Impressum</a></li>
<li><a href="#infos" data-icon="gear">Themen</a></li>
</li>
</div>

Konkret geht es zunächst einmal um die Seite Über uns. Klickt man den betreffenden Listeneintrag an, soll sich die Datei about.html öffnen. Diese Seite könnte – hier in einer denkbar kargen Form – so aussehen:
<div id="about" data-role="page">
  <div data-role="header">
    <h1>Über uns</h1>
  </div>
  <div data-tole="content">
    <p>Hier folgen die Detailinformationen über uns</p>
  </div>
</div>

Wie ihr seht, wurde tatsächlich nur der div-Bereich mit der ID about mitsamt dessen Inhalt definiert. Das ist die vollständige about.html. Alles andere (wie Kopfdaten usw.) fehlt in dieser Datei.

 
Und was passiert, wenn man diese Seite über den Hyperlink aufruft? (Achtung, wenn ihr mit Google Chrome testet, müsst ihr die Anwendung direkt auf einem Server wie beispielsweise XAMPP laufen lassen, da es ansonsten einen Ladefehler gibt).

Bilder



Wie ihr seht, lädt jQM die Kopfdaten usw. automatisch mit.

 
Anders sieht es allerdings aus, wenn die about.html direkt, also nicht aus der App heraus, aufgerufen wird.

Bilder



Dann fehlen die Kopfdaten und die gesamte Seite wirkt optisch – nennen wir es wohlwollend – mittelprächtig.


 

Den Kopfbereich ausbauen

Momentan kommt der Kopfbereich der App noch etwas spärlich daher. Mehr als der App-Titel ist darin noch nicht zu sehen. In der Seite about.html ist das fatal. Denn ruft man diese auf, hat man über die App keine Möglichkeit, zur Startseite zu gelangen. (Über die Zurück-Schaltfläche des Browsers natürlich schon). Das gilt es zu ändern. Mittels einer einfachen Syntax könnt ihr einen Button einfügen, durch dessen Anklicken die Benutzer direkt die Startseite aufrufen können. Die Definition sieht so aus:
<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Dieser Text wird nicht angezeigt</a>

Es handelt sich um eine herkömmliche Hyperlink-Definition, wie ihr sie aus HTML kennt. Entscheidend ist zunächst einmal das über href angegebene Verweisziel index.html, welches bekanntermaßen die Startseite der App ist.

Wenn ihr euch das Ergebnis im Browser anseht, wird euch auffallen, dass es sich bei dem Home-Link tatsächlich um einen Home-Button handelt.

Bilder



 
Und dieser Button kommt in Form eines kleinen Häuschens daher. Dazu weist man dem a-Element die beiden Angaben data-role="button" data-icon="home" zu. jQM ignoriert dann übrigens den eigentlich angegebenen Verweistext, der im vorliegenden Beispiel daher passenderweise auf Dieser Text wird nicht angezeigt gesetzt wurde. Zu sehen ist dieser Text nur dann, wenn die Seite direkt aufgerufen wird.

Die Syntax sieht insgesamt folgendermaßen aus:
<div id="about" data-role="page">
  <div data-role="header"> <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Dieser Text wird nicht angezeigt</a>
    <h1>Über uns</h1>
  </div>
  <div data-tole="content">
    <p>Hier folgen die Detailinformationen über uns</p>
  </div>
</div>

Auf diese Weise könntet ihr jetzt also schon mal die Grundstruktur für eure App erstellen und die benötigten Unterseiten anlegen.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von blue bird
  • 16.10.2016 - 15:03

Vielen Dank für das Tutorial!

Portrait von MicroSmurf
  • 13.07.2014 - 18:12

Interessant wie immer. Danke.

Portrait von hierkarl
  • 04.07.2014 - 14:45

und auch teil 12: wieder sehr spannend :)

Portrait von Caesarion2004
  • 28.06.2014 - 11:13

Vielen Dank für das weitere informative Tutorial.

Portrait von johen
  • 27.06.2014 - 23:01

Sehr gut erklärt.Vielen Dank.

Portrait von Domingo
  • 27.06.2014 - 20:02

Wieder ein klasse Tutorial.

Portrait von Steve007
  • 27.06.2014 - 19:19

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Kundentest
  • 27.06.2014 - 18:53

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 27.06.2014 - 17:09

Vielen Dank für den nächsten Teil und die klasse Reihe!

Portrait von Kundentest
  • 14.06.2014 - 18:07

Herzlichen Dank für das Video.

Portrait von Steve007
  • 31.05.2014 - 10:39

Vielen Dank für den weiteren Teil Deiner interessanten Reihe.

Portrait von Caesarion2004
  • 30.05.2014 - 11:07

Vielen Dank für das informative Tutorial - verständlich und macht Lust auf mehr.

Portrait von pixel_hunter
  • 30.05.2014 - 09:25

Sehr gut und ausführlich erklärt... mal wieder... weiter so!

Schmunzeln mußte ich nur bei der Filterfunktion für 2 bzw 3 Unterlinks... aber das ist sicherlich exemplarisch für mehr Inhalt/Seiten gedacht.

Ich freu mich aufs nächste TUT, vor allem weil es mir die Angst vor der Überkomplexität von mobilen Apps nimmt:
Danke!

x
×
×