Einführung in jQuery Mobile
Kein Zweifel: Egal, wohin sich Entwickler wenden oder mit wem sie reden, mobile Anwendungen sind immer ein Top-Thema. Wenn ihr mit jemandem aus der obersten Führungsebene sprecht und sich das Gespräch zu mobilen Anwendungen wendet, kommt schnell die Frage auf: „Wie komme ich an sowas ran?”. Sprecht mit anderen Entwicklern, und sie werden euch sagen, dass sie Mobilgeräte schon im Visier haben. Mobile Anwendungen werden immer wichtiger, da der Marktanteil von Smartphones weiter wächst.
Bevor wir uns auf mobile Anwendungen und Geräte konzentrierten, haben Internet-Entwickler in den letzten Jahren immer mehr browserseitige Funktionalität zu ihren Anwendungen hinzugefügt. Das kann man an der Benutzung von browserseitigen JavaScript-Libraries wie zum Beispiel jQuery sehen.
Mit dem wachsenden Markt für Mobilgeräte ist es sehr wichtig für Entwickler und Firmen, die ihre Kosten im Rahmen halten wollen, dass sie Anwendungen erstellen können, die auf allen Plattformen laufen. Es gibt eine Reihe von Anwendungen, größtenteils zum Bereitstellen von Inhalten (beispielsweise amazon.com), die gut in einem mobilen Webbrowser funktionieren. Leider gibt es aber Unterschiede zwischen den Webbrowsern auf den diversen Mobilgeräten. Die vor kurzem eingeführte jQuery-Mobile-Library (jQM) hat nun das Ziel, Cross-Browser-Unterstützung zu bieten. Entwicklern sollen Anwendungen erstellen können, die auf diversen mobilen Webbrowsern laufen und dieselbe – oder zumindest eine ähnliche – Benutzeroberfläche zeigen.
jQuery Mobile wurde im Herbst 2010 in einer Alpha-Version vorgestellt und im November 2011 wurde die Produktionsversion freigegeben. Die aktuelle Version ist jQuery Mobile 1.3.0. Die Library wird gerne von Microsoft, Adobe und anderen Firmen zum Entwickeln von mobilen Anwendungen verwendet. Im August 2011 hatte jQM einen Marktanteil von 32 Prozent, verglichen mit anderen mobilen JavaScript-Frameworks wie zum Beispiel iWebKit und jQTouch. Dieser Marktanteil ist beeindruckend, wenn man bedenkt, in wie kurzer Zeit jQuery so weit kam.
Anfang
Den Einstieg machen wir, indem wir uns eine einfache jQuery-Mobile-Seite ansehen, wie sie in dem folgenden Code-Beispiel gezeigt wird.
<!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" data-theme="c"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> <p>jQuery Mobile is an HTML, Javascript, mobile library that you will like. ASP.NET web pages make it easy to build powerful .NET based applications for the web. </p> </div> <div data-role="footer"> <h4>Friday, July 27, 2012 - Copyright SDI</h4> </div> </div> </body> </html>
Achtet dabei auf folgende Besonderheiten:
- Der Doctype ist der Standard-Doctype für eine HTML5 Webseite.
- Der Viewport (Ansichtsbereich) wird in einem Meta-Tag festgelegt. Der Viewport wird vom Browser benutzt, um den Teil der Webseite zu bestimmen, der auf dem Display angezeigt werden soll. Mobilgeräte nehmen standardmäßig an, dass Webseiten ungefähr 900 Pixel breit sind, was dazu führt, dass Webseiten auf ein Display dieser Größe zusammenpresst werden. Im obigen Code-Beispiel wird der Browser auf die Displaygröße des verwendeten Geräts eingestellt.Ein CSS-Stylesheet wird geladen, damit jQM es benutzen kann.
- Die jQuery-Library wird geladen und benutzt von jQM.
- Die jQM .js-Datei wird geladen.
- Die .css-Datei und die zwei JavaScript-Dateien werden vom jQuery Content Delivery Network (CDN) geladen.
- Die Seite beinhaltet einen Header-, Content- und Footer-Bereich.
Ihr wundert euch sicher, was jQM den Entwicklern eigentlich bringt. Wenn sie sich die Seite, die wir mit dem obigen Code erstellt haben, in einem mobilen Browser ansehen, dann wird der Inhalt in drei Bereichen angezeigt: Einem Header-, einem Content- (oder main body) und einem Footer-Bereich. Logischerweise sieht das dann so aus wie in Bild 1.
Bild 1. Grundsätzlicher Aufbau einer jQM-Seite.
Attribute
Entwicklern werden bei jQM sofort die Attribute auffallen. Genauer gesagt die data-*-Attribute, die die Entwickler sehen, sind Teil der HTML5-Spezifikation. Das Feature heißt „Custom Data Attributes” und ist in der W3C-Spezifikation definiert. Entwickler können so ein benutzerdefiniertes Attribut hinzufügen und dennoch die jQM-Seite konform zur Spezifikation halten. Der Vorteil für Entwickler: Es ist jQM erlaubt, benutzerdefinierte Attribute in einer mobilen Webseite zu definieren. jQM kann dann mit diesen benutzerdefinierten Attribute arbeiten. Zum Beispiel: Ein
-Tag mit dem header-Attribut kann nun automatisch von der Bibliothek Styles zugewiesen bekommen, ohne dass der Entwickler etwas dazu tun muss. Diese erklärende Herangehensweise ermöglicht natürlich nicht nur das Styling von Attributen, sondern erlaubt Software-Entwicklungstools neue Funktionalität hinzuzufügen und gleichzeitig den Entwicklern ihre Arbeit zu erleichtern.
Ihr werdet euch jetzt vielleicht fragen „Super, welche Art von Attributen sind verfügbar?“ Im obigen Code-Beispiel seht ihr, dass wir ein page-, header-, content- und footer-Attribut gesetzt haben. Diese Attribute werden als role (Rolle) bezeichnet. Die Begriffe page (Seite), header (Kopfzeile), content (Inhalt) und footer (Fußzeile) sind ziemlich selbsterklärend, deshalb werde ich darauf nicht weiter eingehen. Eine Rolle ist in jQM durch das data-role-Attribut definiert. Weitere nennenswerte Rollen in jQM sind zum Beispiel:
- Navbar definiert einen Navigationsbalken, der üblicherweise innerhalb der Kopfzeile angezeigt wird.
- Die button-Rolle erzeugt einen Button, üblicherweise als <a href>-Link realisiert.
- Die listview-Rolle in mobilen Seiten ist das Äquivalent zu mit Daten gefüllten Tabellen, wie man sie von Desktop Webseiten her kennt.
jQuery-Mobile-Template
Anwendungen bestehen normalerweise aus vielen Seiten. Es gibt viel Diskussion darüber und auch gute Gründe dafür, mobile Seiten in einer einzigen Datei zu speichern. In Wahrheit ist es aber unrealistisch zu versuchen, eure gesamte Anwendung in eine einzige Seite zu legen. Wenn Twitter es nicht schafft, dann werdet ihr wahrscheinlich auch nicht die Ressourcen haben, die man benötigt, um es 100-prozentig funktionsfähig zu machen.
Schauen wir einmal wie dies für ASP.NET-Entwickler funktioniert. Denkt nur an die verschiedenen ASP.NET-Render-Methoden, die ihr benutzen könnt. Da gibt es einmal ASP.NET-WebForms, das es schon seit der Version 1.0 des Microsoft .NET Frameworks gibt. WebForms zeigte große Verbesserungen gegenüber dem klassischen ASP. In der mobilen Welt sind ViewState und die beschränkte Kontrolle über die Ausgabe von HTML aber leider ein Problem für Entwickler, deswegen werden wir diese Technik hier beiseite lassen. (Es ist nicht schwer diese Probleme zu lösen. Aber es würden Umfang dieses Artikels sprengen).
Die meisten Entwickler werden eine andere Technik wählen – eine, die ihnen mehr Kontrolle gibt. Glücklicherweise bietet Microsoft noch zwei andere Möglichkeiten an: die Plattformen ASP.NET MVC und ASP.NET Web Pages. Beide Herangehensweisen benutzen die Razor View Engine zum Erstellen des server-seitigen Codes, der das resultierende HTML ausgibt. Andere View Engines sind auch verfügbar, aber dieser Artikel konzentriert sich auf das, was ASP.NET zu bieten hat.
Das folgende Code-Beispiel zeigt ein Template, das die Razor View Engine benutzt.
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
@if (IsSectionDefined("Head"))
{
@RenderSection("Head", false);
}
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"
type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
@if (IsSectionDefined("HeaderSection")) {
@RenderSection("HeaderSection", false)
}
else {
<h1>@Page.Title</h1>
}
</div>
<div data-role="content">
<p>@RenderBody()</p>
</div>
<div data-role="footer">
@if (IsSectionDefined("FooterSection")) {
@RenderSection("FooterSection", false)
}
else {
<h4>@DateTime.UtcNow.ToLongDateString() - Copyright SDI</h4>
}
</div>
</div>
</body>
</html>
Achtet auf die folgenden Dinge in der Layout-Datei:
- Die .css- und .js-Dateien von jQM und jQuery werden alle von einem CDN (Content Distribution Network) geladen. Das Laden von einem CDN ist für Entwickler von Vorteil, weil die jQM-Libraries wegen ihrer wachsenden Beliebtheit höchstwahrscheinlich bereits von einer anderen Webanwendung in den Browser-Cache des Benutzer-Rechners geladen wurden. Mit bereits geladenen Dateien kann man einen Leistungsschub beobachten gegenüber dem Fall, dass die Dateien erst vom Webserver der Anwendung geladen werden müssen. Im Mobilbereich sind Bandbreite, Reaktionsgeschwindigkeit und allgemein der Verbindsaufbau kostbare Ressourcen. Jede Kleinigkeit, die die Leistung der Anwendung verbessern kann, sollte genutzt werden. Ein zweiter, etwas eigennützigerer Grund ist, dass jedes Laden einer Datei vom Anwendungsserver ein gewisses Datenvolumen benötigt. Datenvolumen kostet ab einem bestimmten Punkt Geld und man kann sich einige Entwicklungskosten sparen, indem man das CDN von jemandem anderen verwendet. In diesem Artikel möchte ich allerdings nicht zu sehr auf CDNs eingehen. Drei oft verwendete sind das Google-CDN, das jQuery-CDN und das Microsoft-CDN. Dave Ward hat in seinem Blog einen großartigen Artikel über CDNs geschrieben. Den Link dazu finden Sie in der Referenzen-Liste am Ende des Artikels.
- Der grundlegende Aufbau der Seitenstruktur. Es gibt jeweils einen Bereich für Kopfzeile, Inhalt und Fußzeile. Für jeden dieser Textbereiche gibt es entsprechende Anweisungen im Code auf der Serverseite. Ist auf der Seite keine HeaderSection definiert, liefert der Server einen Standardwert zurück. Dasselbe gilt für die FooterSection. Beide Bereiche sind optional. Der Body ist der einzige notwendige Bereich für unser Template. In diesem Bereich wird der Seiteninhalt angezeigt.
- Achtet auf den Head-Bereich und den Header-Bereich. Der Head-Bereich muss unbedingt an dieser Stelle notiert werden, weil der mobileinit-Event erstellt werden muss, bevor die jQM.js-Datei geladen wird. Das mobileinit-Event wird weiter unten im Artikel näher erklärt.
Mobile Steuerelemente und HTML
Entwickler können im HTML für mobile Geräte eine ganze Reihe neuer Formularelemente verwenden. Diese kamen alle mit der HTML5-Spezifikation. Einige dieser neuen Werte für das Attribut type, die im HTML-Tag input verwendet werden können, möchte ich euch hier vorstellen:
- range begrenzt die Eingabe eines nummerischen Wertes auf einen Bereich, der durch einen Minimal- und Maximalwert definiert wird.
- tel zur Eingabe einer Telefonnummer. Dem Benutzer wird eine für Nummern optimierte Tastatur angezeigt.
- url erzeugt ein Textfeld zur Eingabe von URLs. Dem Benutzer wird hierzu eine für URLs optimierte Tastatur angezeigt.
- search — Das Eingabefeld für die Suche.
- number — Ein Eingabefeld, um einen numerischen Wert über die Tastatur einzugeben.
- date, datetime, time, datetime-local, month and week — Eine Reihe von Datums- und Zeit-relevanten Steuerelementen, die Teil der HTML5-Spezifikation sind.
Neben diesen Steuerelementen gibt es noch eine Reihe von Attributen, die Entwickler benutzen können, um dem Benutzer weitere Hilfe anzubieten und dem Entwickler selbst bessere Kontrolle zu geben.
- Automatische Großschreibung — Das Attribut autocapitalize kann dazu benutzt werden, ein Texteingabefeld auf Großschreibung voreinzustellen. Dies kann zur Eingabe von Namen hilfreich sein.
- Autokorrektur — Das Attribut autocorrect kann dazu benutzt werden, die Autokorrektur für ein Texteingabefeld ein- oder auszuschalten.
- Platzhalter — Das Attribut placeholder zeigt dem Benutzer innerhalb des Textfeldes eine Beschreibung an, die ihm sagt, was er in dieses Feld eingeben soll.
Ihr werdet euch vielleicht fragen, warum sich ein Entwickler über diese Steuerelemente überhaupt Gedanken machen muss. Das ist eine sehr berechtigte Frage. Wenn Entwickler diese neuen Steuerelemente und Attribute verwenden, übernimmt das jQM-Framework dankbarerweise das notwendige Styling der Steuerelemente, damit sie so aussehen wie ein Geräte-eigenes Steuerelement. Sehen sie sich das folgende Beispiel an:
<input type="text" placeholder="input" /> <input type="range" min="0" max="100" value="50" /> <input type="tel" value="555-1212" /> <a href="Default.cshtml" data-role="button">Save Data</a>
In diesem Beispiel wird das Attribut placeholder bei einem Texteingabefeld verwendet. jQM übernimmt einen Teil des Stylings, zum Beispiel die abgerundeten Ecken, wie man sie im Bild 2 sieht. Der input-Typ range ist ein HTML5-Steuerelement und wird von jQM als Schieberegler angezeigt. Der Typ tel ist ein Eingabefeld für eine Telefonnummer. Beim iPhone führt die Eingabe der Nummer zum Wählen der Nummer. Der mitgelieferte Browser in Android 4.0.3 (womit der Screenshot gemacht wurde) unterstützt den tel-input-Typ nicht, aber beachtet, dass eine für Telefonnummern optimierte Tastatur angezeigt wird, wenn das Formularfeld vom Typ tel ausgewählt ist. Zum Schluss haben wir noch einen <a>-Tag, bei dem das Attribut data-role=“button“ gesetzt ist. Das Ergebnis ist, dass die von jQM zugewiesenen Styles den <a>-Tag wie einen Button aussehen lassen.
Bild 2. jQM mitgeliefertes Styling
Nicht alle Formularelemente werden auch von allen mobilen Webbrowsern unterstützt. Wenn ein Entwickler ein Formular-Element benutzt, das der Browser nicht unterstützt, wird der Browser an Stelle des unbekannten Steuerelements ein Standard-Texteingabefeld anzeigen. Der Entwickler kann dieser Situation vorgreifen, indem er herausfindet, ob der Browser die notwendige Unterstützung mitbringt. Für diesen Zweck ist die JavaScript-Library Modernizr sehr beliebt.
Zu beachten: Die neuen mobilen Steuerelemente in HTML5 sind nicht wirklich Teil von jQuery Mobile. Ich habe sie hier nur erwähnt, weil HTML5 von den meisten mobilen Geräten (zumindest teilweise) unterstützt wird. jQM kann dann diese Steuerelemente, Attribute und andere Elemente verwenden und ihr Aussehen anpassen. Zum Beispiel kann jQM ein Steuerelement mit dem input type=“range“ nehmen und einen Schieberegler anzeigen neben einem kleinen Textfeld, das immer den aktuellen Wert des Reglers enthält.
Wenn ihr das von jQM mitgelieferte Styling nicht wollt, braucht ihr nur in einem Tag das Attribut date-role=“none“ setzen, um das jQM-Styling für dieses Steuerelement auszuschalten.
Wie wendet jQuery Mobile Styling und den Look an?
jQM folgt einem einfachen Ansatz beim Styling. Standardmäßig macht jQM folgendes:
- Es nimmt die leichtest umzusetzende Methode, was bedeutet, dass Entwickler und Designer nicht mit einem komplexen Styling-System kämpfen müssen.
- Es lässt dem Browser-eigenen Rendering Vorrang.
- Es fügt einen Innenabstand (padding) hinzu für bessere Lesbarkeit. Der Innenabstand sollte relativ gering sein.
- Es verwendet das jQM-Theme-System, um Schriftarten und Farben einen „Look“ zu verleihen. (Sie werden weiter unten im Artikel mehr über Themes lernen.) jQM arbeitet auch mit „Progressiver Verbesserung” sowie mit „Fehlertoleranz”. Das bedeutet, wenn eine Anwendung in einem modernen Browser läuft, dann werden die seine Fähigkeiten ausgereizt. Läuft die Anwendung in einem weniger modernen Browser, schraubt jQM die verwendeten Funktionalitäten zurück.
Das Listview-Steuerelement
Zusätzlich zu den HTML5-input-Typen bietet jQM ein neues Steuerelement namens listview an, das man zur Datenansicht und Navigation verwenden kann. Üblicherweise sind die Daten in einem listview in irgendeiner Weise verbunden, entweder mit dem Server (der sie dann zu dem mobilen Gerät sendet). Oder sie werden mit Hilfe von AJAX über einen Aufruf zu einem Webservice erstellt.
Hier ist ein einfaches Beispiel für ein listview-Element:
<ul data-role="listview"> <li><a href="Default.cshtml">Windows 8</a></li> <li><a href="Default.cshtml">Windows Phone</a></li> <li><a href="Default.cshtml">Windows RT</a></li> </ul>
Bitte beachten Sie, dass eine Aufzählungsliste zusammen mit einer Reihe von Einträgen verwendet wird. Das Attribut data-role ist auf listview gesetzt. Durch diese Besetzung des data-role Attributs weiß jQM, dass das Steuerelement ein listview sein soll und verleiht ihm den Look von UITableView von iOS.
In Bild 3 könnt ihr sehen, wie das obige listview-Beispiel im Browser aussieht. Die drei im Code-Beispiel gezeigten Links haben jeweils ein grafisches Symbol, das dem Benutzer vermitteln soll, dass er beim Klick auf den Eintrag zu dessen im <a href> definierter URL weitergeleitet wird. Und schließlich wird abhängig vom verwendeten Endgerät ein Listeneintrag schattiert dargestellt, während der Benutzer mit dem Finger über das Element fährt.
Bild 3. Ein einfaches listview-Element dargestellt im Windows Phone Emulator
Sehen wir uns nun ein etwas komplizierteres Beispiel mit listview an. Hier werden wir Trenner, ein Suchfeld und Anweisungen ins Suchfeld hinzufügen.
<ul id="listViewMore" data-filter="true" data-filter-placeholder="Search OSs" data-role="listview" data-autodividers="true"> <li data-role="list-divider">A</li> <li><a href="Default.cshtml">Android</a></li> <li data-role="list-divider">I</li> <li><a href="Default.cshtml">iPhone</a></li> <li><a href="Default.cshtml">iPad</a></li> <li data-role="list-divider">L</li> <li><a href="Default.cshtml">Linux</a></li> <li data-role="list-divider">W</li> <li><a href="Default.cshtml">Windows 8</a></li> <li><a href="Default.cshtml">Windows Phone</a></li> <li><a href="Default.cshtml">Windows RT</a></li> </ul>
Wenn man das Attribut data-filter auf true setzt, wird in diesem listview ein Suchfeld erstellt, das mit dem listview verbunden ist. Es ist ein großartiges Feature, bei dem die Einträge im listview während des Eintippens im Suchfeld automatisch nach den momentan eingetippten Kriterien gefiltert werden. Das Setzen des Wertes für data-filter-placeholder zeigt bei Geräten, die das placeholder-Attribut unterstützen, einen Platzhalter im Suchfeld an. Im Beispiel verwenden wir auch das Attribut data-autodividers. Wenn man dessen Wert auf true setzt, erstellt es automatisch einen Trenner. Der Trenner wird erstellt, indem er die Anfangsbuchstaben der Einträge anzeigt. Ich persönlich fand dies ziemlich unzuverlässig. Besser finde ich es, wenn man das Attribut data-role in bestimmte Listeneinträgen auf list-divider setzt.
Bild 4 zeigt diese etwas fortgeschrittenen Einstellungen von listview auf einem Android-Gerät. Der Screenshot zeigt die Ausgabe des eingebauten Browsers eines Android-x86-Emulators.
Bild 4. Listview mit Trenner und Suchfeld auf einem Android-Gerät
Zu beachten: Wenn eine Anwendung dynamisch Daten zum listview hinzufügen muss, kann es sein, dass Sie für den listview die refresh-Methode aufrufen müssen. Dies wird mit der Javascript-Methode $(“#listid”).listview(‘refresh’); erledigt. „#listid” ist in unserem Beispiel die ID des listview, der von dem Programm angepasst werden muss und ist in typischer jQuery-Schreibweise gezeigt.
Die Navigation ist bei mobilen Anwendungen sehr wichtig. Zum Beispiel ist für die Anwendung auf dem Display nicht genug Platz, um einen großen Zurück-Button unterzubringen. In iOS stellen Anwendungen üblicherweise ein Zurück-Button-Symbol in die Kopfzeile der Anwendung. Bei Android-Geräten ist der Zurück-Button per Hardware oder Software realisiert. Anwender kommen so schnell zurück zur vorherigen Seite. Wie soll diese Navigation nun in einer jQM-Anwendung funktionieren? jQM macht es Anwendungen leicht, ihre eigene Navigation mitzubringen. Aber leider verleiht das der Anwendung den typischen iOS-Look.
Schaut euch beispielsweise einmal den folgenden Teil einer Kopfzeile an. Das Ergebnis sehen Sie in Bild 5.
<a href="Default.cshtml" data-icon="check">Save</a> <h1>Edit Contact</h1> <a href="Default.cshtml" data-icon="delete" data-theme="b">Exit</a>
Achtet auf die gesetzten data-icon Attribute im Beispiel. Es gibt eine ganze Reihe vordefinierter Symbole. Bild 5 zeigt, wie die <a>-Tags automatisch in Buttons mit abgerundeten Ecken umgewandelt wurden.
Bild 5. Navigationsbuttons erstellt in jQM
Wenn ihr einen Button außerhalb der Kopfzeile erstellen wollt, könnt ihr das Attribut data-role=“button“ auf einen <a>-Tag anwenden. Wenn ihr in der Kopfzeile in einem Link das Attribut data-rel=“back“ setzt, wird ein Abbrechen-Button erstellt.
Seiten laden und AJAX
Um von einer Seite zu einer anderen zu navigieren, verwendet jQM einen <a>-Tag. Dies ist Standard-HTML, was ist also so aufregend daran? jQM nimmt sich den <a>-Tag der Anwendung und sorgt für ein bessere Nutzerführung.
Wenn ein Benutzer in einer Webanwendung auf dem Desktop Computer von einer Seite zur nächsten wechselt, dann gibt es da üblicherweise einen Moment, in dem der Bildschirm für ganz kurze Zeit nichts anzeigt, weil der neue Inhalt gerade geladen wird. In einer mobilen Anwendung (App), die auf einem Gerät läuft, gibt es keinen solchen Moment. Normalerweise erscheint eine kurze Animation und ein Aktionsindikator wird angezeigt, während die Seite alle Daten lädt, die sie dem Benutzer anzeigen soll. Wäre es nicht toll, wenn eine mobile Webanwendung dieselben nahtlosen Anzeigen und Übergänge wie in einer systemeigenen mobilen Anwendung drauf hätte?
Dank jQM haben wir die Infrastruktur, um einer mobilen Webanwendung das Navigationserlebnis einer systemeigenen mobilen Anwendung zu verleihen. jQM kann dies aber nicht für jede Seite. Schauen wir uns also einmal die verschiedenen Fälle an. In eine mobilen Webanwendung werden oft mehrere Arten von Links verwendet.
- Links, die von einer Seite der Anwendung auf eine andere Seite der Anwendung leiten.
- Links, die von einer Seite der Anwendung auf eine andere Seite in der selben Datei leiten.
- Links zu anderen jQM-Anwendungen.
- Links zu keinen jQM-Anwendungen.
- Spezielle mobile Links, wie zum Beispiel zu einer Telefonnummer.
Ich will mich hier auf die Navigation zwischen Seiten innerhalb der selben Anwendung konzentrieren. Hier ist ein einfaches Beispiel: Wir starten mit Seite 1. Wenn der Benutzer auf den Link zu Seite 2 klickt, wird ihm eine kleine Übergangssequenz angezeigt. Standardmäßig ist das ein sich drehendes Ladesymbol, und dann Seite 2. Wenn man die URL genauer anschaut, sieht man, dass es immer noch die URL von Seite 1 ist, gefolgt von einem Gartenzaunsymbol (#) und danach eine Referenz zu Seite 2. Das magische Laden der Seite wird für uns von jQM ausgeführt und geladen wird durch einen AJAX-Aufruf.
Und wie lädt man eine Seite ohne AJAX? Es gibt zwei Möglichkeiten (vielleicht sogar mehr), um das AJAX-basierte Laden einer Seite zu deaktivieren. Im Code kann man beispielsweise einem <a>-Tag das Attribut data-rel=“external“ hinzufügen. Dies erzwingt, dass der Link in jQM wie ein absoluter externer Link verwendet wird. Sie können auch das Attribut data-ajax=“false“ zu einem Link hinzufügen. Dies zwingt jQM so zu tun, als ob der Link ein absoluter externer Link wäre.
Themes und Farbpaletten
Sie werden mittlerweile vielleicht festgestellt haben, dass die jQM-Standard-Farbauswahl ziemlich langweilig ist und sehr nach iOS aussieht. Entwickler haben aber die Möglichkeit, dieses Verhalten mit Hilfe von Farb-Themes zu ändern. Ein Theme in jQM definiert die für die Inhaltsanzeige verwendeten Schriftfarben, Hintergrundfarben, Verläufe und Schriftarten. Wenn ihr das jQuery-UI-ThemeRoller-System kennt, dann wird es euch ziemlich leicht fallen, mit jQM-Themes zu arbeiten.
Im jQM-Theme-System gibt es fünf vordefinierte Farbpaletten, welche mit A, B, C, D und E bezeichnet werden (siehe Bild 6):
- Das Theme A weist den höchsten Grad visueller Priorität auf. Benutzern wird in diesem Theme der häufige Einsatz der Farbe Schwarz auffallen.
- Das Theme B weist einen erhöhten Grad visueller Priorität auf. Benutzern wird in diesem Theme der häufige Einsatz der Farbe Blau auffallen.
- Das Theme C weist den normalen Grad visueller Priorität auf. Benutzern wird in diesem Theme der häufige Einsatz der Farbe Grau auffallen.
- Das Theme D weist einen alternativen erhöhten Grad auf. Der Unterschied zwischen Theme C und D ist eine sehr geringe Farbvariation in den Hintergrundfarben, die sowohl im Screenshot, als auch auf den Geräten kaum zu erkennen ist. Es ist hier dem Entwickler überlassen, zu entscheiden, ob es in seiner spezifischen Situation einen Unterschied macht.
- Das Theme E ist eine akzentuierende Farbpalette.
Bild 6. Variationen im jQM-Theme-System
Sie können auch Ihre eigenen Themes erstellen. Verwenden Sie dazu den jQM-ThemeRoller, der hier zu finden ist.
jQuery Mobile Ereignisse und Konfigurierung
Wenn ihr schon mal mit jQuery zu tun hattet, dann kennt ihr auch den Event document.ready. Dieses Ereignis wird ausgelöst, sobald das Dokument einer Seite geladen ist und ist überaus wichtig während dem ersten Laden einer Webseite. Die Seite kann dann nämlich jedweden dynamischen Inhalt von Beginn an erstellen. Bei Mobilgeräten wird dies noch viel wichtiger, weil Benutzer nur ein beschränktes Datenvolumen zur Verfügung haben und deswegen müssen wir mit unserer Datenverarbeitung sehr effizient arbeiten.
jQM lädt Seiten anders als jQuery. In jQuery ist allein der Browser verantwortlich für das Laden von Seiten. Bei jQM werden die Seiten vom Browser via jQM geladen, was ich weiter oben im Artikel bereits abgedeckt habe. Der Unterschied ist dabei, dass nicht garantiert werden kann, dass der document.ready-Event des Dokuments ausgelöst wird, wenn die Seite mit jQm geladen wird.
Um diesem Problem entgegenzuwirken, löst jQM selbst ein Ereignis aus, das mobileinit heißt. Der mobileinit-Event wird ausgelöst, sobald eine Seite mit jQM geladen ist und dem Benutzer angezeigt wird. Der Event wird durch das document-Element gehandhabt und mit der jQuery bind-Methode gebunden:
<script language="javascript" type="text/javascript">
$(document).bind('mobileinit', function () {
// Put your initialization code here
alert("jQM has been successfully initialized.");
});
</script>
Nach dem mobileinit-Ereignis können etliche andere Ereignisse verarbeitet werden, zum Beispiel:
- Ob eine Seite erstellt, geladen oder angezeigt ist.
- Widgets können ein Ereignis auslösen, wenn sich ihr Layout verändert.
- Ausrichtungsereignisse, die angeben, wie das mobile Gerät bewegt oder gedreht werden kann.
- Gestenereignisse, damit die Berührungen des Benutzers erkannt werden können.
- Virtuelle Klickereignisse: Eine Reihe von Ereignissen, die euch helfen, die Ereignisse touchstart und touchmove zu behandeln, ohne dass ihr euch um die Besonderheiten der jeweiligen Plattform kümmern müsst.
Wenn der jQM-mobileinit-Event einmal ausgelöst wurde, ist ein neues Objekt über das jQuery-Hauptobjekt $ verfügbar: das $.mobile Objekt. Innerhalb des $.mobile Objekts können Entwickler eine Menge der Standardeinstellungen von jQM verändern.
Beachte: Der mobileinit Event muss erstellt werden, BEVOR die jQuery-Mobile-.js-Datei geladen wird.
Seitenereignisse
Jede jQM-Seite bringt eine Reihe von Ereignissen, die mit dem Erstellen, dem Laden oder der Anzeige der Seite verbunden sind:
- pagebeforeload, pageload and pageloadfailed werden beim Laden einer externen Seite ausgelöst.
- pagebeforechange, pagechange and pagechangefailed sind Seitenveränderungsereignisse. Diese Ereignisse werden ausgelöst, wenn der Benutzer die Seite innerhalb der Anwendung wechselt.
- pagebeforeshow, pagebeforehide, pageshow and pagehide sind Seitenübergangsereignisse. Diese Ereignisse werden vor, während und nach einem Seitenübergang ausgelöst und werden benannt.
- pagebeforecreate, pagecreate and pageinit sind für die Seiteninitialisierung zuständig.
- pageremove kann ausgelöst und anschließend gehandhabt werden, wenn eine Seite vom DOM entfernt wird. Der folgende Code zeigt uns einige dieser Beispiele. Dabei gibt es einige Dinge zu beachten:
- Der Code erzwingt den Einsatz von AJAX. Ohne AJAX werden manche Ereignisse vielleicht nicht ausgelöst.
- Die Funktion, die die Ereignise behandelt, wenn sie ausgelöst werden, hat zwei Parameter. Diese Parameter können ziemlich komplexe Daten zurückliefern.
- Anwendungsentwickler werden sich am meisten für die Seitenübergangsereignisse interessieren.
- Für Entwickler von ASP.NET-WebForms sind diese Ereignisse vom Konzept her den serverseitigen Ereignissen sehr ähnlich.
- Die Ereignisse pagebeforecreate und pageshow werden ausgelöst, wenn die Seite mit der ID „two“ geladen ist. Das Ereignis pageload wird ausgelöst, sobald eine beliebige Seite von der momentanen Seite aus geladen wird.
$(document).bind("mobileinit", function () {
$.extend($.mobile, {
ajaxEnabled: true
});
$("#two").live("pagebeforecreate", function (event, data) {
alert("pagebeforecreate called");
})
$(document).bind("pageload", function (event, data) {
alert("pageload called");
})
$("#two").live("pageshow", function (event, data) {
alert("pageshow was called");
});
});
Gestenereignisse
Gesten sind eine übliche Aktion in berührungssensitiven Umgebungen. Den Finger über das Display zu ziehen, ist eine natürliche Handbewegung, um Seiten zu wechseln, Einträge durchzusehen und so weiter. Am folgenden Beispiel sehen wir, wie ein Javascript Alert durch eine Geste ausgelöst wird:
$(document).bind("mobileinit", function () {
$(document).live("swiperight", function () {
alert("swipe right");
});
});
Ausrichtungsereignisse
Eines der spannenden Features von mobilen Endgeräten ist, dass ihre Displays nicht in einer unveränderlichen Position verharren müssen. Einmal abgesehen von all den Witzen, wie man das iPhone richtig hält, wird der Benutzer die Ausrichtung des Geräts ab und zu ändern, während er eine Anwendung verwendet. Das kann durch eine einfache Bewegung des Geräts passieren, oder weil man es einem Freund in die Hand drückt. Die App ESPN College Football Scoreboard hat zum Beispiel im Herbst 2011 die Ausrichtung des Geräts verfolgt. Wenn die Ausrichtung des Geräts auf Hochformat geändert wurde, hätte die Punktetafel (engl. scoreboard) nicht auf das Display gepasst und der Benutzer hat eine Meldung zu sehen bekommen, dass er die Ausrichtung wieder ändern soll. Obwohl das ein wenig umständlich gewesen sein mag, wurde dies mit der Verfolgung der Geräteausrichtung erreicht. Das Verfolgen und Binden des Ausrichtungsereignisses ist mit jQM ziemlich einfach, wie Sie hier sehen können:
$(window).bind("orientationchange", function (orientation) {
alert(orientation);
})
Beachtet, dass viele dieser Ereignisse nicht richtig funktionieren, wenn AJAX ausgeschaltet ist.
Zusammenfassung
Mobile Geräte und Anwendungen sind definitiv beliebt und sie werden Tag für Tag wichtiger. Ich habe mobile Anwendungen schon geschrieben, bevor es jQuery Mobile gab. Glauben Sie mir, wenn ich sage, dass jQM mein Leben viel leichter gemacht hat.
Ich hoffe sehr, dass euch dieser Artikel die notwendigen Informationen gibt und euch beim Start mit mobiler Webentwicklung mit jQuery hilft.
Internet Explorer und HTML5
Zugegebenermaßen, HTML5 ist quasi immer noch wie ein bewegliches Ziel. Im Mai 2011 erhielt HTML5 beim W3C den Status „Last Call“, um zu bestätigen, dass der Standard technisch gesehen solide ist. Im Mai 2012 wurde die HTML5 Spezifikation dann wieder in den Zustand „Working Draft” (Arbeitsentwurf) zurückgesetzt. Dies zeigt, dass noch dran gearbeitet werden muss. WHATWG hat ihren „HTML5 Living Standard” einfach in „HTML” umbenannt. Für Entwickler ist es sehr verwirrend, was nun HTML5 ist und was nicht.
Während sich viele Teile des HTML5-Standards immer noch im Wandel befinden, gibt es auch viele Teile, die gut funktionieren und bereits in verschiedenen Browsern eingebaut sind. Einige dieser Features, die im erst seit kurzem verfügbaren Internet Explorer 10 eingebaut sind, habe ich hier aufgelistet.
- H.264 und der Video-Tag: Mit eingebauter Unterstützung für den Videostandard H.264 benötigt der IE ein Browser-Plugin weniger, um Videos darstellen zu können. H.264 ist der Format-Standard, den führende Websites verwenden und Internet Explorer unterstützt den Standard. Zusammen mit der Unterstützung des Codecs wird auch der video-Tag unterstützt.
- Eingebetteter Audio-Tag: HTML5 bringt Unterstützung für einen eingebetteten Audio Tag mit. Internet Explorer unterstützt die Codecs mp3 und aac.
- Skalierbare Vektorgrafiken: SVG kann skalierbare Grafiken erzeugen, weil sie mit Vektoren gezeichnet werden und nicht mit Bildern.
- CSS3: CSS dient zum Formatieren von Webseiten. Der IE9 unterstützt auf Standards basierendes CSS3, wie Selektoren, Namensräume, Farben, Werte, Hintergründe, Rahmen und Schriftarten.
- AppCache: Mittels AppCache können Webseiten Ressourcen lokal speichern. Dies hilft Entwicklern, ihre Anwendungen zu beschleunigen, weil Ressourcen lokal angesprochen werden können und nicht von einem Server geladen werden müssen.
- Drag and Drop: Mittels des Attributs draggable kann jedes HTML-Element auf der Seite umhergezogen werden. Zusätzlich wurde das Attribut files zum Objekt dataTransfer-Objekt, um Drag and Drop für eine oder mehrere Dateien vom lokalen Dateisystem auf die Webseite zu ermöglichen.
- Formulare: Unterstützung der neuen HTML5-input-Typen, der neuen Attribute für das input-Element und dem progress-Element wurde hinzugefügt.
- History: Unterstützung für die History-Schnittstelle wurde hinzugefügt. Dies wird den Verlaufsstapel einer Website und Kontrolle über die URL verbessern.
Eine Liste weiterer Features, die im Internet Explorer zur Unterstützung von HTML eingebaut wurden, finden Sie auf MSDN im Internet Explorer Developer Center.
Über den Autor
Wallace McClure ist ein Hinterwäldler aus Tennessee, der irgendwie den Weg nach Atlanta und zur Georgia Tech Universität fand. Dort hat es dann für zwei Abschlüsse gereicht: Bachelor of Science und Master of Science in Elektrotechnik. Er steht seit jeher auf Neues, was ihn zum Programmieren brachte (ursprünglich mit COBOL und x86 asm). Und dazu, dass er sich in Microsofts Web-Techniken vertiefte, sich sofort auf .NET Framework 1.0 beta stürzte, sich schon 1999 in mobile Techniken verliebte und einen Haufen anderer Dinge getan hat, die er wahrscheinlich nicht hätte tun sollen, aber trotzdem tat. Irgendwann damals wurde er dann von jemandem angesprochen, der einen Herausgeber vertrat, welcher schließlich von John Wiley and Sons aufgekauft wurde und geriet so in deren Wrox-Abteilung. Nachdem er einige Bücher geschrieben hatte, hat er das ganze Spektrum von Software-Architektur, über skalierbare Anwendungen, ADO.NET, SQL Server, Oracle, Web, AJAX, bis hin zu mobilen Technologien durchlaufen. Er hat für viele verschiedene Organisationen gearbeitet, von kleinen Start-ups bis hin zu staatlichen Stellen in der U.S.-Regierung.
Wenn er ausnahmsweise mal nicht Software schreibt, an Software denkt, über Software redet oder denkt er sei ein Comedian, dann kann Wally beim Golf spielen, im Fitnessstudio oder als Basketballtrainer angetroffen werden. Wallace McClure ist auf Twitter, Facebook und LinkedIn zu finden.
Weiterführende Ressourcen
- jQuery Mobile Website – jquerymobile.com
- Ereignisse in jQuery Mobile – jquerymobile.com
- Datensymbole in jQuery Mobile – jquerymobile.com
- Mein Freund Stephen Long. Ein großartiger Tech-Autor. Auf Twitter – twitter.com/long2know
- Dave Ward ist der Autor von Ecosia – encosia.com
- Dave Ward auf Twitter – twitter.com/encosia
- Dave hat einen tollen Artikel über Content Delivery Networks geschrieben – encosia.com
- Mein Freund Kevin Darty ist immer eine Quelle für gute Ideen. Sie können ihn auf Twitter finden – twitter.com/kdarty
- Marktanteil der verschiedenen Web/HTML Mobile Frameworks – trends.builtwith.com
- iOS Theme – taitems.tumblr.com
- Android Theme – github.com/jjoe64
- Windows Phone Theme – blogs.msdn.com
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
eine gute Einführung für alle die sich lieber berieseln lassen:
https://www.youtube.com/watch?v=xulY8rKVMaA
Die Einrückung in dem id=“listViewMore“ vom „list-divider I“ und dem „iPhone“ da drunter sind vertauscht.