Advertisement
  1. Code
  2. Mobile Web Apps

Verwendung von jQuery Mobile, um eine native Android News Reader-App zu erstellen

by
Read Time:14 minsLanguages:
This post is part of a series called Use jQuery Mobile to Build a Native Android News Reader App.
Use jQuery Mobile to Build a Native Android News Reader App: Part 2

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

In dieser dreiteiligen Tutorialserie möchten wir vor allem beschreiben, wie mit jQuery Mobile eine native Android-Anwendung entwickelt werden kann. Zunächst werden wir eine eigenständige Beispiel-Webanwendung entwickeln, mit der Artikel von Yahoo! Nachrichten mit jQuery Mobile. Dann werden wir diese Webanwendung mit minimalem Aufwand in eine native Android-Anwendung konvertieren.

Das jQuery Mobile-Projekt ist ein mobiles Webframework, dessen Alpha 2-Version im November 2010 veröffentlicht wurde. Das Framework kann verwendet werden, um plattformübergreifende mobile Webanwendungen für Android OS, iOS, Blackberry OS und ähnliche Plattformen zu entwickeln (eine vollständige Tabelle zur Kreuzkompatibilität finden Sie unter http://jquerymobile.com/gbs/). Obwohl das Framework für die Erstellung mobiler Webanwendungen konzipiert wurde, können Sie mit jQuery Mobile auch native Android-Anwendungen entwickeln. Folglich verfolgt diese Tutorial-Reihe zwei Ziele:

Zuerst werden wir die dynamische Konstruktion grundlegender UI-Elemente in jQuery Mobile veranschaulichen. Zu diesem Zweck implementieren wir eine Beispiel-Webanwendung namens Nachrichtenanwendung, um Nachrichtenartikel von Yahoo! Nachrichten. Die Anwendung sendet AJAX-basierte HTTP-Anforderungen an einen Server und analysiert die XML-Antwort, um die Benutzeroberfläche zu erstellen. Wir werden das jquery-dotimeout-Plugin verwenden, um eine Animationstechnik zu veranschaulichen, bei der Nachrichtenüberschriften in regelmäßigen Abständen nacheinander mit einem Ein- / Ausblendeffekt angezeigt werden. Dies gibt dem Leser einen Einblick in die Formatierung von Inhalten für jQuery Mobile-Listen, insbesondere die "geteilte Liste". Wir werden auch das DST.js-Plugin zum Speichern der aktuellen Auswahl von Nachrichtenkategorien des Benutzers mit lokalem HTML5-Speicher verwenden. Die Webanwendung besteht aus einer HTML-Datei mit dem UI-Code, jQuery Mobile-Bibliotheken und jQuery-Plugins. Die HTML-Datei verwendet auch eine einfache PHP-Datei, die HTTP-Anforderungen an Yahoo! Nachrichten-URL und sendet die Antwort zurück an die HTML-Datei. Dies ist eine Methode, um die Einschränkung von AJAX-Anforderungen in Webbrowsern mit demselben Ursprung zu umgehen. Die PHP-Datei führt keine Manipulation der Anforderung oder Antwort durch, da das Hauptziel darin besteht, jQuery / jQuery Mobile-APIs zum Erstellen der Anforderung, Analysieren der Antwort und Erstellen der Benutzeroberfläche zu verwenden. Wir werden Bildschirmbilder der Webanwendung in Android-Betriebssystemen und iOS-Geräten bereitstellen, um die Tatsache zu veranschaulichen, dass die Benutzeroberfläche auf mehreren Plattformen ein einheitliches Erscheinungsbild aufweist.

Zweitens werden wir zeigen, wie eine native Android-Anwendung entwickelt wird, bei der die Benutzeroberfläche über das jQuery Mobile-Framework codiert wird. Zu diesem Zweck verwenden wir die zuvor entwickelte Webanwendung. Die Hauptidee besteht darin, das android.webkit.WebView-Objekt als Container zum Ausführen der HTML-Datei in der Webanwendung zu verwenden. Die einzige notwendige Änderung in der HTML-Datei besteht darin, die AJAX-Anforderungen an Yahoo! Nachrichten-URL anstelle der PHP-Datei. Wir werden zeigen, wie die HTML-Datei, die den UI-Code enthält, in eine android.app.Activity und einen android.webkit.WebViewClient integriert wird. Wir werden auch zeigen, wie Sie die Startsymbole für unsere Android-Anwendung basierend auf den Richtlinien für Android-Symbole erstellen.

Die zum Ausführen des Webs und der nativen Android-Anwendungen erforderlichen Dateien können im Rahmen dieser Lernserie heruntergeladen werden. Für die Android-Anwendung wird beschrieben, wie die Projektdateien in die Eclipse-IDE importiert werden.

Organisation dieser Reihe

Dieses Tutorial, das erste in unserer Reihe, ist wie folgt aufgebaut: Im Abschnitt "Seitenfluss" beginnen wir mit der Einführung der Anwendung, indem wir Bildschirmbilder geben und den Seitenfluss beschreiben. Anschließend werden einige technische Details der Webanwendung im Abschnitt "Anforderungs- / Antwortmodell" erläutert. Im Abschnitt "Seitenstruktur" präsentieren wir jQuery Mobile-Elemente zum Erstellen unserer Seiten.

Im zweiten Tutorial dieser Reihe schließen wir die Entwicklung der Webanwendung ab. Wir führen weiterhin den jQuery Mobile-Code ein, erstellen dynamisch eine geteilte Liste, diskutieren eine Animationstechnik für Text in einem geteilten Listenelement und stellen Übergänge zwischen den Seiten in unserer Anwendung bereit. In einem speziellen Abschnitt des zweiten Tutorials wird erläutert, wie wir die Einschränkung von AJAX-Anforderungen in der Webanwendung mit demselben Ursprung umgehen. Bildschirmbilder der endgültigen Webanwendung auf iOS- und Android-Geräten werden zum direkten Vergleich bereitgestellt.

Das dritte und letzte Tutorial dieser Reihe befasst sich mit der Migration der Webanwendung in eine native Android-Anwendung. Dieses Tutorial enthält eine allgemeine Beschreibung der Änderungen, die zum Konvertieren unserer Webanwendung in eine Android-App erforderlich sind, wobei den benutzerdefinierten Klassen android.app.Activity und android.webkit.WebViewClient besondere Aufmerksamkeit geschenkt wird und die Konfigurationsdateien überprüft werden AndroidManifest.xml und strings.xml. Das Festlegen eines Anwendungsstart-Symbols und die gesamte Dateistruktur unseres Android-Projekts werden ebenfalls erläutert.


Seitenfluss

Werfen wir einen Blick auf die einzelnen Seiten des Endprodukts, um einen Eindruck von der Funktionsweise der Anwendung zu erhalten. Der hier beschriebene Seitenfluss gilt sowohl für das Web als auch für native Android-Anwendungen:

Die erste Seite ist die Kategorieseite, auf der der Benutzer einen kurzen Überblick über alle Schlagzeilen in verschiedenen interessanten Kategorien erhalten kann:

Categories

Wie oben gezeigt, wird jede Nachrichtenkategorie in einem Split-Listenelement von jQuery Mobile angezeigt, das aus einem Abschnitt links mit Text und einem weiteren Abschnitt rechts mit einer Schaltfläche besteht. Im Textbereich wird der Kategorietitel über den Nachrichtenüberschriften für diese Kategorie angezeigt. Die Schlagzeilen einer Kategorie werden alle 2 Sekunden nacheinander in einer Schleife mit einem Ein- / Ausblende-Animationseffekt angezeigt. Auf dieser Seite kann der Benutzer:

  • Löschen Sie eine Kategorie, indem Sie auf die Schaltfläche Löschen klicken.
  • Gehen Sie zur Liste aller Nachrichten unter einer Kategorie, indem Sie auf den Textabschnitt des Listenelements für diese Kategorie klicken.
  • Fügen Sie eine neue Kategorie hinzu, indem Sie auf die Schaltfläche Hinzufügen klicken.

Wenn der Benutzer auf der Seite "Kategorien" die Schaltfläche "Hinzufügen" drückt, wird die Seite "Kategorieauswahl" (Abbildung 2) angezeigt:

Category Selection

Auf dieser Seite wählt der Benutzer eine Nachrichtenkategorie aus einer Liste aus und drückt auf die Schaltfläche Kategorie abrufen, um die Kategorie zur Seite Kategorien hinzuzufügen.

Wenn Sie auf der Seite "Kategorien" auf den Textabschnitt des Listenelements für eine Kategorie klicken, wird der Benutzer zur Seite "Nachrichten" weitergeleitet, auf der alle Nachrichten unter dieser Kategorie angezeigt werden (Abbildung 3):

News

Auf der Nachrichtenseite kann einer Nachricht ein Bild zugeordnet sein, das als Link für weitere Details zu der jeweiligen Nachricht dient. Durch Drücken des Bildes gelangt der Benutzer zur Seite "News Detail" (Abbildung 4):

News Detail

Beachten Sie, dass in der Webanwendung die Seite "News Detail" im Browser außerhalb der HTML-Seite angezeigt wird, auf der der Anwendungscode ausgeführt wird. Um zurück zu gelangen, muss der Benutzer die Zurück-Taste im Browser drücken. Diese Aktion führt den Benutzer zurück zur Seite "Kategorien". In der nativen Android-Anwendung wird die Seite "News Detail" in derselben android.webkit.WebView-Instanz angezeigt, in der die Anwendung gestartet wird, außerhalb der HTML-Seite, auf der der Anwendungscode ausgeführt wird. Durch Drücken der Zurück-Taste des Geräts kehrt der Benutzer zur Seite Kategorien zurück.

Das Diagramm in Abbildung 5 fasst das Flussmodell zwischen den Seiten in unserer News-Anwendung zusammen:

News DetailNews DetailNews Detail

Beachten Sie das sich drehende Symbol während bestimmter Übergänge. Dies zeigt an, dass dem Benutzer während des Übergangs eine Fortschrittsseite angezeigt wird. Die Fortschrittsseite ist nützlich, um dem Benutzer Feedback zu geben, dass die Anforderung verarbeitet wird. Beachten Sie, dass eine Fortschrittsseite beim Übergang von Nachrichten zu Nachrichtendetails nur in der nativen Android-Anwendung und nicht in der Webanwendung angezeigt wird. (Weitere Informationen hierzu finden Sie in Teil 3, "Änderungen in index.html".)


Anforderungs- / Antwortmodell

Lassen Sie uns darüber sprechen, wie Anfragen und Antworten in der Webanwendung behandelt werden. Es gibt eine einzelne HTML-Seite, die die Benutzeroberfläche und den Code für die Ereignisbehandlung für die Nachrichtenanwendung mit dem Namen index.html enthält. Diese Datei wird von einem Webserver in den mobilen Browser des Benutzers heruntergeladen (für unsere Tests haben wir einen Apache 2.2-Webserver verwendet). Die Seitenaktionen "Kategorie abrufen" und "Kategorie auswählen" umfassen AJAX-Anforderungen zum Abrufen von Nachrichteninformationen von Yahoo! URL des Nachrichtenservers, http://rss.news.yahoo.com/. Aufgrund der Einschränkung von AJAX-Anfragen mit demselben Ursprung ist es dem Browser nicht möglich, diese Anfragen direkt an Yahoo! Nachrichtenserver. Um dies zu umgehen, verwenden wir auf unserem Webserver eine PHP-Datei mit dem Namen bridge.php, die diese Anforderungen an Yahoo! Nachrichtenserver im Namen des Browsers und leitet die Antwort zurück. Auf der anderen Seite beinhaltet die Seitenaktion "News Detail" eine regelmäßige HTTP-GET-Anforderung an Yahoo! Nachrichtenserver. Aus diesem Grund wird bridge.php nicht benötigt.

Request/Response modelRequest/Response modelRequest/Response model

In Bezug auf das Anforderungs- / Antwortmodell unterscheidet sich die native Android-Anwendung in zweierlei Hinsicht von der Webanwendung. Erstens benötigt es keine bridge.php. Dies liegt daran, dass eine HTML-Seite, die in android.webkit.WebView ausgeführt wird, beim Packen als Teil einer nativen Android-Anwendung beim Tätigen von AJAX-Aufrufen keinen Einschränkungen gleichen Ursprungs unterliegt. Zweitens ist in der nativen Android-Anwendung die Seitenaktion "News Detail" eher ein AJAX-Aufruf als eine reguläre HTTP-GET-Anforderung. Wir werden dies in Teil 3, "Änderungen in index.html", weiter diskutieren.


Seitenstruktur

Eine "Seite" im jQuery Mobile-Framework kann eine einzelne Seite oder eine lokale interne verknüpfte Seite innerhalb einer Seite sein. Eine Containerseite enthält eine oder mehrere Inhaltsseiten. Es ist möglich, Inhaltsseiten selektiv anzuzeigen / auszublenden. Wie bereits erwähnt, besteht unsere Webanwendung aus einer einzelnen HTML-Seite mit dem Namen index.html, die den gesamten Code für die Benutzeroberfläche und die Ereignisbehandlung enthält. Wir definieren unsere Containerseite wie folgt:

Das data-theme-Attribut des Container-div-Tags hat den Wert b. Mit dem Attribut data-theme können wir aus verfügbaren jQuery Mobile-Stilen auswählen:

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.

Die Inhaltsseiten Kategorien, Kategorieauswahl und Nachrichten sind auf der Containerseite enthalten. Eine Inhaltsseite hat normalerweise eine Kopfzeile, einen Inhaltsbereich und eine Fußzeile, die jeweils in einem div-Tag definiert sind. Der Wert des data-role attributs im div-Tag definiert die Rolle des Tags.

  • Verwenden Sie zum Definieren eines Headers <div ... data-role="header" ... >
  • Verwenden Sie zum Definieren eines Inhaltsbereichs <div ... data-role="content" ... >
  • Verwenden Sie zum Definieren einer Fußzeile <div ... data-role="footer" ... >

Schauen wir uns nun die verschiedenen Inhaltsseiten in unserer Anwendung an.

Kategorien Seite

Categories

Beachten Sie im Header-Bereich das Attribut data-nobackbtn="true". Standardmäßig enthält das jQuery Mobile-Framework eine Schaltfläche "Zurück" im Kopfbereich. Indem Sie dieses Attribut explizit wie oben festlegen, vermeiden wir eine Schaltfläche "Zurück". Stattdessen fügen wir mit <a id="buttonAddCategory" ...> eine Schaltfläche Hinzufügen in die Kopfzeile ein. Da der Wert des data-icon attributs plus ist, hat die Schaltfläche ein plus zeichen. Außerdem stellt class="ui-btn-left" sicher, dass die Schaltfläche auf der linken Seite der Kopfzeile platziert ist. Wir möchten nichts in den Fußzeilenbereich aufnehmen und daher ist das div für die Fußzeile leer. Infolgedessen wird im Fußzeilenbereich nur eine dünne horizontale Linie angezeigt.

Der Inhaltsbereich verfügt über eine sogenannte jQuery Mobile-Split-Liste. In Abbildung 1, die die Seite "Kategorien" zeigt, besteht jedes Listenelement aus einem Abschnitt links mit Text und einem weiteren Abschnitt rechts mit einer Schaltfläche, daher "Teilen". Die Attribute data-split-icon und data-split-theme definieren die Liste als geteilte Liste. Beachten Sie, dass das jQuery Mobile-Framework die Flexibilität bietet, die geteilten Abschnitte auf unterschiedliche Weise zu formatieren. Sie können beispielsweise Symbole im Textbereich platzieren. Dies bedeutet, dass Sie anstelle einer Schaltfläche zum Löschen rechts ein anderes Symbol auswählen können. In unserer Nachrichtenanwendung entspricht jedes Listenelement einer bestimmten Nachrichtenkategorie. Die Listenelemente werden basierend auf der Benutzerauswahl dynamisch erstellt. Die Liste ist zunächst leer.

Kategorieauswahlseite

Category Selection

Auf der Seite "Kategorieauswahl" befindet sich im Inhaltsbereich ein Formular, mit dem der Benutzer eine Nachrichtenkategorie auswählen und hinzufügen kann. Die Nachrichtenkategorien sind eine Teilmenge der Kategorien in Yahoo! Nachrichten wie unter http://news.yahoo.com/rss aufgeführt. Die Kategorieauswahl wird verarbeitet, wenn der Benutzer die Schaltfläche mit id="buttonGetCategory" drückt.

Beachten Sie, dass es keine Zurück-Schaltfläche gibt und der Fußzeilenbereich leer ist.

Nachrichtenseite

News

Auf dieser Seite wird der Inhaltsbereich dynamisch mit allen Nachrichten gefüllt, die einer Kategorie zugeordnet sind, basierend auf der Benutzerauswahl. Der Inhaltsbereich ist zunächst leer. Im Header-Bereich befindet sich eine Zurück-Schaltfläche. Anstatt sich jedoch auf die Standard-Back-Aktion von jQuery Mobile zu verlassen, werden wir diese Aktion über einen Event-Handler implementieren. Wir definieren daher explizit eine Schaltfläche mit der id="buttonHdrShowCategories" (der Ereignishandlercode für die Schaltfläche wird in Teil 2, "Auf die Kategorieseite von der Nachrichtenseite gehen", überprüft). Das Attribut data-icon="arrow-l" verwendet ein integriertes jQuery Mobile-Symbol für Zurück-Schaltflächen. Informationen zu verfügbaren Symbolen für jQuery Mobile-Schaltflächen finden Sie unter http://jquerymobile.com/demos/1.0a2/#docs/buttons/buttons-icons.html. Auf dieser Seite haben wir auch einen Zurück-Button in der Fußzeile. Dies liegt daran, dass die Seite normalerweise lang ist und der Benutzer nach unten scrollen muss, um alle Nachrichten durchzugehen. Wir möchten, dass der Benutzer vom unteren Rand der Seite zurückkehren kann, ohne ganz nach oben scrollen zu müssen. Die Ereignishandler für die Schaltflächen oben und unten hinten sind identisch.

Fortschrittsseite

Zuvor haben wir erwähnt, dass wir bei verschiedenen Seitenübergängen eine Fortschrittsseite anzeigen, bis der Übergang abgeschlossen ist. Dies ist nur bei Übergängen erforderlich, die aufgrund der Erstellung einer Anforderung oder der Analyse der Antwort Verarbeitungszeit erfordern. Die Fortschrittsseite ist sehr einfach, mit beschreibendem Text und einem sich drehenden Symbol.

News Detail Seite

Der Inhalt der News Detail-Seite wird von Yahoo! Nachrichten-URL. Wie diese Seite angezeigt wird, wird in Teil 2, "Aufrufen der Nachrichtendetailseite von der Nachrichtenseite" beschrieben.

Seiten anzeigen

Das einfache Anzeigen einer Seite bedeutet, diese Seite anzuzeigen und alle anderen Seiten auszublenden. Lassen Sie uns diskutieren, wie dieses Verhalten erreicht werden kann. Den div-Elementen, die Kopf-, Inhalts- und Fußzeilen jeder Seite darstellen, werden Variablen zugewiesen, die sie in der jQuery-Konvention wie unten gezeigt identifizieren. Da diese wiederholt verwendet werden, bietet das Definieren globaler Variablen für sie einen Leistungsvorteil, da jede Variable nur einmal initialisiert wird, aber viele Male verwendet werden kann.

Um eine Seite auszublenden, rufen wir die Funktion jQuery hide() für die Kopf-, Inhalts- und Fußzeilenvariablen dieser Seite auf. So blenden Sie beispielsweise die Seite "Kategorien" aus:

In ähnlicher Weise haben wir für die Seiten "Kategorieauswahl", "Nachrichten" und "Fortschritt" die folgenden "Ausblenden" -Funktionen:

Um eine Seite anzuzeigen, verbergen wir alle anderen Seiten und rufen die Funktion jQuery show() für die Kopf-, Inhalts- und Fußzeilenvariablen dieser Seite auf. Um beispielsweise die Seite "Kategorien" anzuzeigen, haben wir die folgende Funktion:

In ähnlicher Weise haben wir für Kategorieauswahl-, Nachrichten- und Fortschrittsseiten die folgenden "Show" -Funktionen:

Anstatt eine einzige HTML-Seite zu haben, die den gesamten UI-Code enthält, hätten wir die UI in mehrere HTML-Seiten organisieren können. Für die Zwecke dieses Tutorials haben wir den früheren Ansatz gewählt. Für den letzteren Fall siehe das Navigationsmodell von jQuery Mobile, in dem erläutert wird, wie jQuery Mobile Seitennavigationen zwischen verschiedenen physischen Dateien durchführt.


Schlußbemerkungen

In diesem ersten Teil der Tutorial-Reihe haben wir die Ziele des Tutorials vorgestellt und die Beispielanwendung besprochen, die implementiert werden soll. Wir haben auch damit begonnen, das jQuery Mobile-Framework mit Schwerpunkt auf der Seitenstruktur vorzustellen. Nächste Woche werden wir den jQuery Mobile-Code weiter einführen und die Implementierung unserer Webanwendung in Teil zwei dieser Serie abschließen.

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.