Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 09): jQuery mobile (1)

Web-Apps erstellen (Teil 09): jQuery mobile (1)

jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks. Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt. Speziell für den Einsatz in Web-Apps konzipiert wurde das Schwester-Framework jQuery mobile (jQM). Dieses Framework hilft euch dabei, eure Web-App im Handumdrehen wie eine echte App aussehen zu lassen. Grund genug, einen ausführlichen Blick auf jQM zu werfen.

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


jQM unterstützt euch, in Kombination mit diversen HTML5- und CSS3-Features, attraktive Web-Apps zu erstellen. Damit es hier aber nicht zu Missverständnissen kommt: Ihr braucht natürlich nicht unbedingt jQM (oder ein anderes Framework) zu verwenden, wenn ihr eine Web-App aufbauen wollt. Ohne ein solches Framework wird das Ganze allerdings deutlich aufwendiger.

Bilder



Zunächst ein Blick darauf, welche Vorteile der Einsatz von jQM bietet.

• Es werden zahlreiche Zielplattformen unterstützt. (Mehr dazu im Anschluss).
• Die Framework-Größe beträgt gerade einmal 12KB in der minimierten Variante, die in Produktivumgebungen verwendet werden sollte.
• Eine HTML5-basierende Konfiguration wird geboten.
• WAI-ARIA wird vollständig unterstützt.
• Ein Ajax-basiertes Menüsystem ist mit an Bord.

Das klingt doch schon mal nicht schlecht für den Anfang, oder?

Eines der Hauptprobleme von Web-Apps ist natürlich der Support durch die Zielplattformen. Denn was hilft die schönste Web-App, wenn sie nur auf einigen wenigen Smartphones und Tablets richtig angezeigt wird? Und genau das ist das Problem, wenn man eine Web-App ohne Framework entwickelt. Denn damit diese auf möglichst vielen Smartphones und Tablets fehlerfrei läuft, braucht man schon einiges an Know-how. Und auch dann weiß man oftmals nicht, ob die App wirklich so funktioniert, wie man sich das gedacht hat. Die Thematik mit dem Testen von Web-Apps hatten wir ja schon in einem anderen Tutorial besprochen.

Bei jQM wird einem diese Sorge abgenommen. Denn hier werden zahlreiche Plattformen von Hause aus unterstützt.

Bilder



Unterteilt sind diese in drei Kategorien:

• A-Grade – vollständige Unterstützung von jQM.
• B-Grade – die Ajax-Navigation wird nicht unterstützt.
• C-Grade – ein echter Support findet nicht statt.

Hier eine Liste der als A-Grade eingestuften Plattformen:

• Apple iOS 3.2-5.0
• Android 2.1-2.3:
• Android Honeycomb NEW
• Windows Phone 7
• Blackberry 6.0
• Blackberry Playbook
• Palm WebOS (1.4-2.0)
• Palm WebOS 3.0 NEW
• Firebox Mobile (Beta)
• Opera Mobile 11.0
• Kindle 3
• Chrome Desktop 11-13
• Firefox Desktop 3.6-4.0
• Internet Explorer 7-9
• Opera Desktop 10-11

Da ist doch schon mal eine ganze Menge dabei. Einen ausführlichen Überblick aller unterstützten Plattformen könnt ihr euch unter http://jquerymobile.com/gbs/ verschaffen.

Bilder



Beachtet aber bitte, dass es sich bei den angegebenen Plattformen auch immer um eine spezielle Kombination aus Betriebssystem und Hardware handelt. Eine hundertprozentige Garantie, dass es auch auf ähnlichen Kombinationen läuft, ist das also nicht.


 

So sieht jQM aus

Bevor gezeigt wird, wie sich jQM nutzen lässt, wollt ihr zunächst natürlich wissen, warum denn gerade dieses Framework hier vorgestellt wird. Am besten lässt sich das anhand der offiziellen Demos zeigen. Ruft dazu die Seite http://jquerymobile.com/demos auf.

Bilder



 
Die Demo-Seiten sind bereits von Hause aus in Form einer App angelegt. Klickt euch einfach durch die Demo-Seiten, um euch einen Eindruck davon zu verschaffen, was euch bei jQM erwartet.

Bilder



Zufrieden damit, was euch geboten wird? Dann kann es jetzt endlich losgehen.


jQM einbinden

Um eine jQM-Anwendung zu erstellen, muss man natürlich das Framework einbinden. Dafür sind drei Dinge nötig:

• die CSS-Datei von jQM
• das normale jQuery-Framework
• die jQM-Bibliothek.

 
Erstellt euch zunächst eine normale HTML-Datei mit dem entsprechenden Grundgerüst.
<!DOCTYPE html>
<html>
<head>
<title>PSD-Tutorials.de</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

In den Kopfbereich dieser Datei werden die drei genannten Dinge eingebunden. Achtet dabei dann unbedingt darauf, zuerst jQuery einzubinden. jQM folgt danach.
<head>
 <title>PSD-Tutorials.de</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>

Das bildet ab sofort die Basis für die weiteren Arbeiten mit jQM.


Seiten definieren

Es ist logisch, muss aber trotzdem erwähnt werden: Wenn ihr eine App erstellt, werdet ihr natürlich Seiten anlegen. Typische Seiten könnten Impressum, Kontakt, Über uns, Tutorials usw. sein. In jQM stehen euch für die Definition von Seiten drei verschiedene Varianten zur Verfügung.

Da wäre zunächst der Einzelseitentyp. Bei dem werden die Inhalte der App auf mehrere Einzelseiten verteilt. Diese Seiten sind dann untereinander verlinkt. Seiten sind in jQM an der Attribut-Wert-Kombination data-role="page" zu erkennen.
<div data-role="page"> 
         ...
</div>

 
Innerhalb einer Seite kann es weitere div-Elemente mit verschiedenen data-role-Attributwerten geben. Die Seiten werden in einen Kopfbereich (header), einen Inhaltsbereich (content) und einen Fußbereich (footer) unterteilt.

Die Definition einer Einzelseite könnte also folgendermaßen aussehen:
<div data-role="page">
  <div data-role="header">
   <h1>Seitentitel</h1>
  </div>
  <div data-role="content">
   <p>Eigentlicher Inhalt</p>
  </div>
  <div data-role="footer" data-position="fixed">
   <h4>Fußbereich</h4>
  </div>
</div>

Alternativ dazu könnt ihr auch den sogenannten Mehrseitentyp verwenden. Dabei werden mehrere Seiten in einem einzigen Dokument zusammengefasst. Die Benutzer bekommen davon natürlich nichts mit. Für die handelt es sich optisch dann auch tatsächlich um Einzelseiten.
<div data-role="page" id="seite1">
  <div data-role="header">
    ...
  </div> 
  <div data-role="content">
    ...
  </div> 
  <div data-role="footer">
    ...
  </div> 
 </div>
<div data-role="page" id="seite2">
  <div data-role="header">

    ...
  </div> 
  <div data-role="content">
    ...
  </div>
  <div data-role="footer">
    ...
  </div> 
</div>

Bei dem Mehrseitentyp weist man einfach jeder Seite eine eindeutige ID zu.
<div data-role="page" id="seite1">

 
Ob ihr nun den Einzel- oder den Mehrseitentyp verwendet, bleibt letztendlich euch überlassen. Der Vorteil des Mehrseitentyps ist zweifellos, dass die notwendigen Komponenten bereits beim Seitenaufruf geladen werden. Wer jedoch umfangreiche Seiten definiert, sollte eher zu der Einzelseitenvariante greifen. Denn hier laden die Seiten, da sie eben weniger umfangreich sind, üblicherweise schneller.

Der dritte Seitentyp unterscheidet sich grundlegend von den anderen beiden. Dieser Seitentyp wird für die Definition von Dialogen verwendet. Solche Dialoge öffnen Popups und verdunkeln automatisch den Hintergrund der Seite.

Bilder



Popups lassen sich denkbar einfach definieren. Dazu weist man dem data-rel-Attribut den Wert dialog zu.
<a href="abfrage.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Abfrage</a>

 
Dank eines solchen Hyperlinks wird jQM die verlinkte Seite automatisch in einem Dialogfenster öffnen und mit zusätzlichen Funktionen ausstatten. So gibt es beispielsweise von Hause aus direkt eine Schließen-Schaltfläche.

Bilder



Auch das ist natürlich eine interessante Variante, die man immer mal wieder gebrauchen kann.

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 - 17:33

Interessant wie immer. Danke.

Portrait von Steve007
  • 26.06.2014 - 20:54

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

Portrait von johen
  • 22.06.2014 - 23:33

Vielen Dank für das interessante Tutorial.

Portrait von Kundentest
  • 22.06.2014 - 20:35

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 22.06.2014 - 17:31

Vielen Dank für das wieder sehr informative und interessante Tutorial. Gute Reihe.

Portrait von samtron
  • 22.06.2014 - 16:54

hallo zusammen

vielenDank
MfG

Portrait von 2406
  • 22.06.2014 - 16:42

Die Reihe ist sehr informativ; vielen Dank dafür.
Da alleridngs für die vielen Teile viele Punkte abgezogen werden, hier mal ein Gartistip:
https://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CEUQFjAA&url=http%3A%2F%2Fwww.html-seminar.de%2Fweb-apps-erstellen.htm&ei=UOqmU9CJEKaK0AX_74HAAg&usg=AFQjCNGpK6HZ_74PkJAfuTWUIvY3FDQSYg&sig2=GYRKb0-eOs41tQ-JRssiLQ&bvm=bv.69411363,d.d2k&cad=rjt

Portrait von bustler
  • 22.06.2014 - 15:33

Bin auch gerade drauf gestossen. Vielen Dank!

Portrait von BOPsWelt
  • 22.06.2014 - 15:17

Vielen Dank für den 9. Teil, wirklich eine sehr informative Reihe!

Portrait von Kundentest
  • 14.06.2014 - 18:02

Herzlichen Dank für das Video.

Portrait von Steve007
  • 26.05.2014 - 18:52

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

Portrait von Figib
  • 24.05.2014 - 20:35

Vielen Dank für das Tutorial!

Portrait von MicroSmurf
  • 24.05.2014 - 20:00

Vielen Dank für den weiteren Teil.

Portrait von Caesarion2004
  • 24.05.2014 - 19:28

Vielen Dank für das interessante und informative Tutorial.

x
×
×