Advertisement
  1. Code
  2. Mobile Web Apps

jQuery Mobile Framework - Ein Formular-Tutorial

by
Read Time:17 minsLanguages:

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

jQuery Mobile ist ein relativ neues mobiles Webframework, dessen erste Veröffentlichung im Oktober 2010 erfolgt. Das Framework verfügt über viele interessante Funktionen zur Unterstützung der Entwicklung webbasierter mobiler Anwendungen. In diesem Tutorial konzentrieren wir uns auf einige grundlegende Elemente von jQuery Mobile: Seitenstruktur, Formulare und Übermittlung von Ajax-Formularen. Das Tutorial basiert auf Version 1.0 Alpha Release 2 des jQuery Mobile-Frameworks.

Im Rahmen des Tutorials werden wir eine kleine B2C-Anwendung schreiben. Ein Paketversandunternehmen hat auf seiner Website ein Formular, in das Kunden Informationen zu Paketen eingeben können, die während des Versands verloren gehen oder beschädigt werden. Unter Verwendung eines Handgeräts (z. B. eines webfähigen Telefons) gibt ein Kunde Informationen über seinen Anspruch in das Formular ein: die Sendungsnummer aus dem Originalbeleg, Name / Adresse und eine Beschreibung des Verlusts / der Beschädigung. Wenn der Kunde das Formular abschickt, antwortet die Website mit einer Anspruchs-ID zur weiteren Nachverfolgung. Das Szenario ist in der folgenden Abbildung dargestellt:

Tutorial application context diagramTutorial application context diagramTutorial application context diagram

Abbildung 1. Kontextdiagramm der Lernprogrammanwendung.

Das jQuery Mobile-Framework unterstützt eine Vielzahl von Browsern, darunter iOS-Geräte, Android-Geräte, Blackberry OS 6 und webOS (eine Support-Matrix finden Sie unter http://jquerymobile.com/gbs/). Die Anwendung in diesem Tutorial wurde mit einem Android 2.2-Gerät und einem iOS 4.1-Gerät getestet.

Überlegungen zum Entwurf

Bevor wir auf technische Details eingehen, lassen Sie uns die wichtigsten Überlegungen zum Design der Anwendung erläutern.

  • Kurze Antwortzeit: Es wird bevorzugt, dass die Webanwendung eine einzelne HTML-Seite mit einer einfachen Benutzeroberfläche enthält. Alle Konstrukte der Benutzeroberfläche, wie z. B. Fehlerdialog- und Bestätigungsseiten, sind Teil der HTML-Seite. Sobald die Seite in den Browser heruntergeladen wurde, werden dem Benutzer je nach Kontext unterschiedliche Abschnitte der Seite angezeigt. Es ist nicht erforderlich, mehrere Netzwerkverbindungen zu öffnen, um Seiten mehrmals herunterzuladen.
  • Fehlerbehandlung: Wenn der Benutzer vergisst, ein erforderliches Feld in das Formular einzugeben, sollte die Übermittlung mit einem Warndialog fehlschlagen. Fehlende Felder sollten für den Benutzer leicht zu finden sein.
  • Unterstützung für mehrere Geräte / Browser: Anwendungen sollten auf allen unterstützten Geräten und Browsern ein einheitliches Erscheinungsbild und Verhalten aufweisen.

Natürlich hat eine typische reale Anwendung zusätzliche oder andere Designprobleme. Für die Zwecke dieses Tutorials beschränkt sich unser Umfang auf die obigen Überlegungen.

jQuery Mobile Einführung

Der größte Teil der Diskussion in diesem Abschnitt wurde aus der Dokumentation unter http://jquerymobile.com entlehnt. Weitere Einzelheiten finden Sie in der Originalreferenz.

jQuery Mobile ist ein Benutzeroberflächensystem, das auf dem beliebten JavaScript-Framework jQuery basiert. Es besteht aus Elementen der Benutzeroberfläche und Programmierkonstrukten, die konsistente Funktionen für eine Vielzahl von mobilen und Desktop-Webbrowsern bieten. Die Prinzipien "Progressive Enhancement" und "Graceful Degradation" stehen hinter seinem Design. Die Kernfunktionalität des Frameworks unterstützt eine breite Palette von Plattformen, während neuere Plattformen von erweiterten Funktionen profitieren.

jQuery Mobile hat einen relativ geringen Platzbedarf. Da die Grundkonfiguration einer jQuery Mobile-Seite ausschließlich durch Markup erfolgt, können schnelle Entwicklungszyklen erzielt werden, insbesondere wenn Ihre Anwendung keine komplexen Programmierfunktionen benötigt. Obwohl das Theming-System von jQuery Mobile auf dem jQuery-Kern basiert, basiert es auf einem neuen CSS-Framework, das darauf abzielt, Farbe und Textur von Strukturstilen zu trennen, die Dinge wie Polsterung und Abmessungen definieren. Eine Ereignisbehandlungs-API verarbeitet auf Berührung, Maus und Cursor fokusbasierte Benutzereingabemethoden auf einheitliche Weise.

jQuery Mobile ist standardmäßig mit vielen Elementen der Benutzeroberfläche ausgestattet, z. B. Kopf- und Fußzeilen-Symbolleisten, Schaltflächen mit Symbolen, Formularelementen (einschließlich berührungsempfindlicher Schieberegler und Kippschalter) und Listen. Grundlegende HTML-Stile, zwei- oder dreispaltige Raster und reduzierbare Elemente werden ebenfalls bereitgestellt.

Aufnahme von jQuery Mobile Libraries

Ab jQuery Mobile 1.0 Alpha 2 müssen die folgenden Stylesheet- und JavaScript-Bibliotheken in Ihren HTML-Seiten enthalten sein. Sie können sie wie folgt referenzieren oder von Ihrem eigenen Server aus bedienen:

Container- und Inhaltsseiten

Lassen Sie uns die Grundstruktur einer Seite in jQuery Mobile vorstellen. Eine Seite im jQuery Mobile-Framework kann eine einzelne Seite oder eine lokal verknüpfte 'Seite' innerhalb einer Seite sein. Eine "Container"-Seite enthält eine oder mehrere "Inhalts" -Seiten. Die Grenze einer Containerseite ist wie folgt definiert:

Beachten Sie, dass der Wert des data-role-Attributs page ist. Andererseits ist die Grenze einer Inhaltsseite wie folgt definiert:

Beachten Sie, dass der Wert des data-role-Attributs content ist.

Einer Inhaltsseite können Kopf- und Fußzeilen zugeordnet sein. Beispielsweise kann eine Containerseite mit mehreren Inhaltsseiten die folgende Struktur haben:

Wenn eine Containerseite geladen wird, werden alle darin enthaltenen Inhaltsseiten angezeigt. In unserer Anwendung müssen wir jeweils nur einen Inhalt anzeigen. Daher müssen wir programmgesteuert steuern, welche Inhalte je nach Kontext angezeigt werden.

Ausblenden / Anzeigen von Inhaltsseiten

Verwenden Sie die Funktion hide() der jQuery Mobile API, um ein Element auszublenden:

versteckt den Header mit der id hdrMain. Hier haben wir den jQuery ID-Selektor verwendet, indem wir die id des Elements übergeben haben, das vor dem #-Zeichen ausgewählt werden soll. Umgekehrt zeigt die Funktion show() ein verstecktes Element:

Die Funktionen hide() und show() gelten für Elemente vieler verschiedener Typen, insbesondere für <div>-Tags und -Anker (<a>-Tags). In diesem Tutorial werden wir die Funktionen hide() und show() ausführlich verwenden, um dem Anwendungsbenutzer nur den relevanten Kontext anzuzeigen. Weitere Details sind unten angegeben.


Schritt 1: Struktur der Demo-Anwendungsseite

Unsere Demo-Anwendung besteht aus einer einzelnen HTML-Seite, index.html, die aus einer Containerseite besteht, wie unten gezeigt:

  • Der Hauptinhalt enthält das vom Benutzer auszufüllende Formular und enthält sowohl eine Kopf- als auch eine Fußzeile.
  • Dialoginhalte werden nur angezeigt, wenn beim Senden des Formulars ein erforderliches Formularfeld fehlt. Es besteht aus einer Warnung und einer OK-Schaltfläche zum Schließen des Dialogfelds. Beachten Sie, dass es keine Kopf- oder Fußzeile gibt.
  • Der Übergangsinhalt wird nach dem Absenden des Formulars angezeigt, bis die Antwort vom Server empfangen wird. Es besteht aus einem "Spinner"-Bild mit einem kurzen Text, der den Benutzer darüber informiert, dass sein Formular gesendet wird. Übergangsinhalte haben auch keine Kopf- oder Fußzeile.
  • Der Bestätigungsinhalt wird angezeigt, nachdem eine Antwort vom Server empfangen wurde. Es zeigt dem Benutzer die Bestätigungsnummer an. Der Bestätigungsinhalt hat sowohl eine Kopf- als auch eine Fußzeile.

Inhaltsübergänge sind in der folgenden Abbildung dargestellt:

Content transitionsContent transitionsContent transitions

Abbildung 2. Inhaltsübergänge.

Zusätzliche Bemerkungen zur obigen Codeliste:

  • Mit dem Attribut data-theme können wir aus verfügbaren Stilen im jQuery Mobile-Framework auswählen: <div data-role="page" data-theme="b" id="page1">. Das Standarddesign enthält verschiedene Farbfelder mit den Namen a, b, c, d, e, die jeweils einen konsistenten Satz von Farben für verschiedene Elemente auf der Seite bereitstellen. Für unsere Anwendung haben wir die Farbe gewählt, die b entspricht.
  • Header werden mit einem Zurück-Button geliefert. Wir brauchten keine Zurück-Schaltflächen und haben uns daher entschieden, sie über data-nobackbtn="true" auszublenden.
  • Es ist möglich, Text anzugeben, der in der Fußzeile zwischen den <div>-Tags angezeigt werden soll. In unserer Anwendung haben wir Text in der Fußzeile weggelassen. Infolgedessen sieht der Benutzer in der Fußzeile nur einen dünnen Balken, der die gleiche Farbe wie die Kopfzeile hat. Bei Text hat die Fußzeile eine ähnliche Höhe wie die Fußzeile mit dem Text darin.

Formularelemente

Unser Antragsformular besteht aus folgenden Feldern:

  • Mehrere input-Felder vom Typ Text: Versandnummer, Vorname, Nachname, E-Mail, Telefon, Straße, Stadt und Postleitzahl. Alle sind Pflichtfelder außer Telefon.
  • Ein select-Element für State. Dies ist ein Pflichtfeld.
  • Ein textarea-Element, in das ein Benutzer Informationen zur fehlenden oder beschädigten Sendung eingeben kann. Dies ist ein Pflichtfeld.

Schauen wir uns als Beispiel das Textfeld für die Versandnummer an:

Wir haben eine label mit einem for-Attribut verwendet, dessen Wert mit der id des input-Elements übereinstimmt, an das die label angehängt ist. Darüber hinaus haben wir das label und die input in ein div mit dem als fieldcontain bewerteten data-role-Attribut eingeschlossen. Das jQuery Mobile-Framework verwendet den Attributwert fieldcontain für ein spezielles Styling. Schauen Sie sich außerdem name="shipNo_r" an. Für diese spezielle Anwendung haben wir beschlossen, den Wert des name-Attributs eines erforderlichen Formularelements als den Wert des durch _r angehängten id-Attributs zu definieren. Wenn das Element nicht erforderlich ist, entspricht der Wert des name-Attributs dem Wert des id-Attributs. Da Telefon beispielsweise kein Pflichtfeld ist, wird es wie folgt definiert:

Wie wir später sehen werden, hilft uns diese spezielle Namenskonvention, fehlende Felder beim Senden des Formulars zu erkennen.

Ein weiteres bemerkenswertes select-Element ist das Auswahlelement. Ähnlich wie oben entspricht der Wert des for-Attributs der ID des select-Elements, an das die label angehängt ist. Außerdem werden die label und die select in ein div mit dem data-role-Attributwert als fieldcontain eingeschlossen. Mit der langen Liste der Optionen, die wir in dieser Anwendung haben, öffnet das jQuery Mobile-Framework die Liste auf einer neuen Seite, wenn sich der Benutzer auf das select-Element konzentriert.

Die in einem Android 2.2-Telefon angezeigte Formularseite wird unten angezeigt. Der Benutzer blättert durch die Seite, um auf die Elemente im Formular zuzugreifen:

Form pageForm pageForm page

Abbildung 3. Formularseite in einem Android-Telefon.

Das gleiche Formular wird auf einem iPod touch mit iOS 4.1 angezeigt:

Form pageForm pageForm page

Abbildung 4. Formularseite auf einem iPod touch.


Schritt 2: Variablendefinitionen

Wir werden in unserem gesamten Code auf verschiedene Elemente auf der HTML-Seite verweisen. Es ist sinnvoll, diese Referenzen nur einmal zu definieren und bei Bedarf wiederzuverwenden. Aus diesem Grund deklarieren wir im head-Bereich der Seite global verwendete Variablen sowie Konstanten:

Die Zuweisung dieser Variablen erfolgt in der Funktion jQuery $(document).ready() mithilfe von ID-Selektoren (siehe unten). (Denken Sie daran, dass die Funktion jQuery $(document).ready() aufgerufen wird, wenn die gesamte DOM-Hierarchie auf der Seite geladen wird. Diese Funktion ist der beste Ort, um unsere Variablen zu initialisieren.) Wir definieren inputMapVar auch als eine Sammlung, die aus allen input-Elementen besteht, deren name-Attribut _r enthält (Der Funktionsaufruf $('input [name*="_r"]') wählt alle aus solche Elemente).


Schritt 3: Inhaltsauswahlfunktionen

Betrachten wir nun die Funktionen zur Inhaltsauswahl, die von Ereignishandlern aufgerufen werden.

Zum Ausblenden und Anzeigen des Hauptinhalts und seiner Kopf- / Fußzeile verwenden wir die Funktionen hideMain() und showMain():

Zum Ausblenden und Anzeigen des Übergangsinhalts verwenden wir die Funktionen hideContentTransition() und showContentTransition():

Zum Ausblenden und Anzeigen des Dialoginhalts verwenden wir die Funktionen hideContentDialog() und showContentDialog():

Zum Ausblenden und Anzeigen des Bestätigungsinhalts und seiner Kopf- / Fußzeile verwenden wir die Funktionen hideConfirmation() und showConfirmation():

Wenn die Seite geladen wird, sollte nur der Hauptinhalt angezeigt werden. Aus diesem Grund werden andere Inhaltsseiten ausgeblendet:

Wir werden diskutieren, wie diese Inhaltsauswahlfunktionen mit den unten stehenden Ereignishandlern verknüpft werden können.


Schritt 4: Formularübermittlung

Wenn ein Benutzer auf die Schaltfläche "Senden" drückt, müssen die Formulardaten überprüft werden, bevor das Formular tatsächlich gesendet wird. Zur Vereinfachung prüfen wir nur, ob alle erforderlichen Felder vorhanden sind. Wenn die Formularvalidierung erfolgreich ist, zeigen wir den Übergangsinhalt an, der aus einem Spinnerbild mit einem kurzen Text besteht, der den Benutzer darüber informiert, dass sein Formular gesendet wird. Wenn die Validierung fehlschlägt, wird der Dialoginhalt angezeigt, der aus einer Warnung und einer OK-Schaltfläche zum Schließen des Dialogfelds besteht.

Formularvalidierung

Beschriftungen der Formularelemente mit fehlenden Daten werden rot hervorgehoben. Zu diesem Zweck fügen wir eine neue Stilklasse mit dem Namen "Missing" hinzu und erweitern die jQuery Mobile label-Klasse.

Unten finden Sie den Ereignishandler für die Formularübermittlung. In der typischen jQuery-Notation wird der Bezeichner für form1 an den jQuery-Objektaufruf übergeben, um das Übermittlungsereignis zu behandeln:

Wir setzen ein Fehlerflag auf false und verbergen den Hauptinhalt, der das Formular enthält. Anschließend setzen wir die zuvor hervorgehobenen Beschriftungen für jedes Mitglied der Sammlung inputMapVar zurück. Dazu übergeben wir each() eine Inline-Funktion als Argument, die einfach $(this).prev().removeClass(MISSING); enthält. Beachten Sie, dass this das ausgewählte input-Element ist und prev() sein unmittelbares vorheriges Geschwister zurückgibt, das die ihm zugeordnete label ist.

Der state für die Statusauswahl und what für die Anspruchsbeschreibung sind keine Textfelder. Daher werden die Stile der entsprechenden Beschriftungen separat zurückgesetzt.

Nachdem alle zuvor hervorgehobenen Beschriftungen zurückgesetzt wurden, überprüfen wir die erforderlichen input-Elemente erneut, um zu überprüfen, ob eines von ihnen einen fehlenden Wert hat. In diesem Fall fügen wir die fehlende Klasse der Beschriftung hinzu, die dem Eingabefeld zugeordnet ist:

Außerdem wird das Fehlerflag auf true gesetzt und der Fehlerdialog angezeigt. Die folgende Abbildung zeigt den Fehlerdialog in unserem Android 2.2-Telefon:

Error dialogError dialogError dialog

Abbildung 5. Fehlerdialog.

Nachdem der Benutzer die OK-Taste gedrückt hat, wird dem Benutzer die Formularseite mit den fehlenden Feldern angezeigt, wie unten gezeigt. In diesem Bild ist die Ausrichtung des Telefonbildschirms horizontal. Beachten Sie, dass jedes Etikett und sein Geschwistertextfeld in einer einzigen Zeile angezeigt werden, im Gegensatz zur vertikalen Ausrichtung in Abbildung 3, in der sich das Etikett über dem Textfeld befindet.

Form pageForm pageForm page

Abbildung 6. Formularseite mit hervorgehobenem fehlendem Feld.

Wenn die Validierung jedoch erfolgreich ist, zeigen wir den Übergangsinhalt an und senden das Formular wie unten beschrieben ab.

Senden des Formulars über Ajax

Die Formularübermittlung verwendet die jQuery Mobile post-Funktion, die drei Argumente akzeptiert:

  • Das erste Argument ist die Server-URL, an die das Formular gesendet werden soll.
  • Der zweite ist der zu sendende Formularinhalt. Um den Formularinhalt abzurufen, rufen wir einfach serialize() für das jQuery-Objekt auf, indem wir ihm den Bezeichner für unser Formular übergeben.
  • Das dritte Argument ist eine Inline-Funktion zum Verarbeiten der vom Server zurückgesendeten Antwort data.

Beachten Sie, dass die post-Funktion einen Ajax-Aufruf ausführt, der von Natur aus asynchron ist. Unmittelbar nach dem Aufruf des post wird die Programmausführung fortgesetzt, indem false von der submit-Funktion zurückgegeben wird, und der Benutzer beginnt, den Übergangsinhalt anzuzeigen.

TransitionTransitionTransition

Abbildung 7. Übergangsseite, die während der Formularverarbeitung angezeigt wird.

Die Inline-Funktion zum Verarbeiten der Antwort wird nur ausgeführt, wenn der Server seine Antwort zurückgibt. Der Einfachheit halber gibt die Serveranwendung, die die Formulardaten, requestProcessor.php, verarbeitet, eine fest codierte Anspruchs-ID zurück, die der Benutzer zur späteren Bezugnahme verwenden kann. Vor dem Senden der Anspruchs-ID requestProcessor.php dauert es 4 Sekunden, um die Serververarbeitungszeit zu emulieren. In diesem Zeitraum zeigt die Anwendung den Übergangsinhalt an.

Wenn die Serverantwort empfangen wird, wird der Ereignishandlercode ausgeführt. Der erste Schritt besteht darin, das span-Tag mit dem Namen confirmation mit dem vom Server zurückgegebenen Wert zu füllen. Dies geschieht einfach mit:

Anschließend blenden wir den Übergangsinhalt aus und zeigen den Bestätigungsinhalt an, der das span-Tag mit dem Namen confirmation enthält:

Die Bestätigungsseite, die in unserem Android 2.2-Telefon angezeigt wird, wird unten angezeigt (die Ausrichtung des Telefons ist horizontal):

ConfirmationConfirmationConfirmation

Abbildung 8. Bestätigungsseite in Android 2.2.

Auf einem iPod touch wird dieselbe Bestätigungsseite wie folgt angezeigt (Ausrichtung ist vertikal):

Confirmation

Abbildung 9. Bestätigungsseite im iPod touch.


Bereitstellen des Quellcodes

Der Quellcode für das Tutorial hat eine einfache Ordnerstruktur. Alle Ressourcen werden in einem Ordner namens forms gespeichert. In diesem Ordner befinden sich zwei Unterordner, css und img. Der css-Ordner enthält colors.css mit der Klasse label.missing und img speichert wait.gif, das Spinner-Image. Die Dateien index.html und requestProcessor.php befinden sich direkt im forms-Ordner. In unseren Tests haben wir einen Apache-Webserver mit Version 2.2.11 verwendet, auf dem PHP Version 5.3.0 ausgeführt wird. Wenn Sie den forms-Ordner direkt unter DocumentRoot des Webservers ablegen, können Sie über http://[your_host_name]/folder/index.html auf die Anwendung zugreifen.


Abschluss

In diesem Tutorial wurden grundlegende Konzepte aus dem jQuery Mobile-Framework vorgestellt, wobei der Schwerpunkt auf der Seitenstruktur, dem grundlegenden Stil, Formularelementen und der Übermittlung von Ajax-Formularen lag. Eine Beispielanwendung zur Bearbeitung von Ansprüchen wurde eingeführt, um diese Konzepte zu demonstrieren. Wir haben Screenshots von verschiedenen Seiten der Anwendung bereitgestellt, die auf einem Android 2.2-Telefon und einem iPod touch-Gerät mit iOS 4.1 ausgeführt werden. Einige Beobachtungen und abschließende Bemerkungen sind nachstehend aufgeführt:

  • Da jQuery Mobile auf dem jQuery-Kern basiert, können sich diejenigen, die bereits über Kenntnisse des jQuery-Frameworks verfügen, problemlos mit dem jQuery Mobile-Framework vertraut machen.
  • Die Fähigkeit des Frameworks, mehrere Inhaltsseiten in einer einzigen HTML-Seite mit integrierten Funktionen zum Ein- und Ausblenden dieser Inhaltsseiten darzustellen, erschien sehr praktisch, um je nach Status eine Formularanwendung mit unterschiedlichen Ansichten zu erstellen. Diese Technik kann beispielsweise angewendet werden, um Benutzerhandbücher im Assistentenstil oder mehrseitige Umfrageformulare zu implementieren.
  • Auf Desktop-, Android 2.2- und iOS 4.1-Plattformen getestet, waren sowohl das Erscheinungsbild als auch die funktionalen Aspekte der Beispielanwendung konsistent. Während der Entwicklung sollte es möglich sein, die Hauptaspekte einer jQuery Mobile-Anwendung auf einer Desktop-Plattform schnell zu testen und zu debuggen. Anschließend können weitere Tests auf den einzelnen Geräten und Browsern durchgeführt werden, die von der Anwendung voraussichtlich unterstützt werden.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.