Open Source im professionellen Einsatz
Linux-Magazin 10/2012
1278

Jquery Mobile

Eine grafische Benutzerschnittstelle für Webbrowser in Smartphones und Tablets lässt sich mit dem Open-Source-Framework Jquery Mobile ([11], aktuell ist 1.1.0) einfach und effizient erstellen. Es bringt viele vorkonfigurierte Knöpfe, Listen, Dialoge und Suchfilter mit, die Entwickler sonst mühevoll selbst anlegen und testen müssten. Jquery Mobile basiert auf HTML 5 und der Javascript-Bibliothek Jquery. Es eignet sich für eine stetig wachsende Zahl von Umgebungen, etwa Apple I-OS 3.2 bis 5.0, Android 4.0, Windows Phone 7 bis 7.5, Blackberry 7, Firefox Desktop 4 bis 9, Firefox Mobile (10 Beta), Opera Desktop 4 bis 5, Chrome Desktop 11 bis 17, Safari Desktop sowie Internet Explorer 7 bis 9.

Die vorkonfigurierten Elemente aus Jquery Mobile lassen sich mit benutzerdefinierten Data-Attributen [12] anwenden (Listing 10). Nachdem die Zeilen 6 bis 8 zunächst die Dateien für Jquery Mobile einbinden, wählt das Data-Attribut »data-theme« in Zeile 11 das so genannte Corporate Design »c« für die Seite aus. Eigene Designs kann der Programmierer mit dem Tool Theme Roller [13] kreieren. Das Attribut »data-role« weist den Container in Zeile 12 als eine einzelne Seite, den in Zeile 13 als Kopfbereich dieser Seite aus. Zeile 16 definiert den Content-Bereich und macht das »a« -Element in Zeile 17 zum Button für das Hinzufügen neuer Standorte.

Listing 10

Data-Attribute für Jquery Mobile

01 <!DOCTYPE HTML>
02 <html manifest="geotrack.appcache">
03 <head>
04  <meta charset="UTF-8"/>
05  <title>Geo Tracker</title>
06  <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css"/>
07  <script src="js/jquery-1.7.1.min.js"></script>
08  <script src="js/jquery.mobile-1.1.0.min.js"></script>
09  <script src="listing-9.js"></script>
10 </head>
11 <body data-theme="c">
12  <div data-role="page" id="overview">
13   <div data-role="header">
14    <h1>Geotracker</h1>
15   </div>
16   <div data-role="content">
17    <a data-role="button" data-rel="dialog" href="#addDetail">Neuer Eintrag</a>
18    <h2>Einträge</h2>
19    <div id="listcontainer">
20     <ul id="list" data-role="listview"></ul>
21    </div>
22   </div>
23  </div>
24 </body>
25 </html>

Der Knopf »Neuer Eintrag« in Zeile 17 aus Listing 10 bindet einen Dialog ein, in dem er das Element mit der ID »addDetails« im Attribut »data-rel="dialog"« referenziert. Listing 11 zeigt den Quellcode des Elements – ein Formular zur Eingabe des Standorts. Listing 12 beschreibt das Verhalten der Anwendung bei unterschiedlichen Ereignissen (Events) mit Hilfe von Javascript. Das erste Laden des Elements mit der ID »addDetail« löst das Event »pageinit« in Zeile 1 aus.

Listing 11

Dialog mit Jquery Mobile

01 <div data-role="page" id="addDetail">
02  <div data-role="content">
03   <form id="detail">
04    <div data-role="fieldcontain">
05     <label for="lat">Schlüssel</label>
06     <input type="text" name="key" id="key">
07     <label for="lat">Breitengrad</label>
08     <input type="text" name="lat" id="latitude">
09     <label for="long">Längengrad</label>
10     <input type="text" name="long" id="longitude">
11     <fieldset class="ui-grid-a">
12      <div class="ui-block-a">
13       <input id="addCancel" data-rel="back" type="button" value="Abbrechen"/>
14      </div>
15      <div class="ui-block-b">
16       <input data-rel="back" type="submit" value="Speichern"/>
17      </div>
18     </fieldset>
19    </div>
20   </form>
21 </div>

Listing 12

Events

01 $('#addDetail').live('pageinit', function() {
02  $('#detail').submit(function() { return add();});
03  $('#addCancel').click(close);
04 });
05
06 $('#addDetail').live('pagebeforeshow', function() {
07  $('#latitude').val(Geolocation.latitude);
08  $('#longitude').val(Geolocation.longitude);
09 });

Es definiert Folgendes: Das Absenden des Formulars – Event »submit« (Zeile 2) – ruft die Funktion »add()« auf. Ein Klick auf den Knopf zum Abbrechen – Event »click« – schließt den Dialog (Zeile 3). Bevor der Dialog auf das Event »pagebeforeshow« (Zeile 6) hin erscheint, schreibt Javascript die aktuellen Werte für die geografische Länge und Breite in die Textfelder. Die Beispielanwendung speichert die gesammelten Daten in einer Couch-DB-Datenbank, um sie mit anderen Benutzern teilen zu können.

Daten online

Couch DB [14] ist eine No-SQL-Datenbank, die Dokumente im Json-Format unter einem Schlüssel abspeichert. Sie verfügt über ein REST-API und lässt sich mit Jquery einfach bedienen. Der Couch-DB-Server läuft nach der Installation unter dem Port 5984. Ein reverser Proxy holt die Couch DB in die Domain der Webanwendung. Listing 13 zeigt die Konfiguration eines Apache-Webservers zu diesem Zweck.

Listing 13

Proxy für Couch DB

01 <VirtualHost *:80>
02  DocumentRoot /home/pa/www
03
04  ProxyPass /couchdb http://localhost:5984
05  ProxyPassReverse /couchdb http://localhost:5984
06 </VirtualHost>

Die Definition des Proxys steht in Zeile 4. Diese Datei speichert man unter »/etc/ apache2/sites-available/offline« und verlinkt sie in »/etc/apache2/sites-enabled« analog zum Default-Eintrag. Vor dem Neustart des Apache-Servers mit »apache2ctl restart« ist in der Default-Konfiguration der Port von »:80« auf zum Beispiel »:8080« zu ändern.

Die folgende HTTP-Anfrage erstellt eine leere Datenbank namens »geos« :

curl -X PUT http://localhost/couchdb/geos

Listing 14 zeigt die Synchronisation des Offline-Datenspeichers mit der Couch-DB-Datenbank. Die Methode »toSync()« in Zeile 4 serialisiert das Objekt mittels »stringify« zu einem Json-Dokument und sendet es per HTTP-Put an die Datenbank »geos« . Den Schlüssel des Dokuments bekommt die URL gemäß dem REST-API hinten angehängt. Der Content-Type der HTTP-Anfrage ist »application/json« . HTML 5 bringt mit dem Application Cache und den Datenspeichern für Anwendungsdaten (Local Storage, Web SQL und Indexed DB) alles mit, um Webanwendungen offline-fähig zu machen. Damit sind die Apps jederzeit verfügbar und nicht mehr von Netzwerkstörungen betroffen.

Listing 14

Synchronisation mit Datenbank

01 window.Sync = {
02  syncurl : '/couchdb/geos',
03
04  toSync : function(obj) {
05   $.ajax({
06    url : Sync.syncurl+'/'+obj.key,
07    contentType : 'appcliation/json',
08    type : 'PUT',
09    data : JSON.stringify(obj)
10   });
11  }
12 };

Mittels Jquery Mobile lassen sich universelle Apps für den Desktop und mobile Betriebssysteme wie Android oder Apples I-OS erstellen. So entfällt die kostenintensive Entwicklung unterschiedlicher Anwendungen für die verschiedenen Plattformen. (mhu)

Der Autor

Dipl.-Phys. Andreas Möller http://pamoller.com beschäftigt sich seit zehn Jahren mit der Entwicklung Internet-basierter Software. Dazu zählen Datenbankanwendungen, Webanwendungen sowie Systeme für das Single Source Publishing. Zurzeit ist er als Berater und freier Autor tätig.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Firefox OS

    Javascript, HTML 5 und jede Menge Linux- und Android-Erbschaften: Das ist Firefox OS, das Smartphone-Betriebssystem, mit dem Mozilla auf den Markt der günstigen Smartphones drängt. Das Linux-Magazin hat die ersten beiden Referenz-Entwicklergeräte Keon und Peak von Geeksphone getestet.

  • Gut sortiert

    Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client - wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

  • Firefox-OS-Apps

    Erst Apps bringen die Smartness aufs Smartphone, da macht Firefox OS keine Ausnahme. Im Unterschied zur Konkurrenz bauen die Entwickler ihre Apps jedoch mit offenen Webtechnologien wie HTML 5, Javascript und CSS 3. Der Artikel zeigt das exemplarisch anhand einer App zum Stimmen von Gitarren.

  • Backbone.js

    Die Javascript-Engines moderner Browser sind leistungsfähig genug, um die Anwendungslogik zu übernehmen. Wie auf dem Server beschleunigen auch hier Frameworks die Entwicklung. Ein herausragendes Beispiel für diese Gattung ist Backbone.js, das ein lokales Datenmodell umsetzt.

comments powered by Disqus

Ausgabe 07/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.