Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Einführung in jQuery Mobile

Mit unserer Mini-Serie für Web-Entwickler „WebDev hands on“ geben wir euch in Kooperation mit Microsoft modern.ie spannende Einblicke in Developer-Themen. Heute gibt es eine 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.

Grundsätzlicher Aufbau einer jQM-Seite.
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.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
fimbim

Die Einrückung in dem id="listViewMore" vom "list-divider I" und dem "iPhone" da drunter sind vertauscht.

hagh

eine gute Einführung für alle die sich lieber berieseln lassen:
https://www.youtube.com/watch?v=xulY8rKVMaA

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst