Share
In Teil 1 dieser Tutorialreihe haben wir unsere Beispielanwendung vorgestellt, den Seitenfluss beschrieben und erläutert, wie die Seiten in der Anwendung über jQuery Mobile erstellt werden. In Teil 2 haben wir die Implementierung unserer Webanwendung abgeschlossen. In diesem letzten Teil werden wir die Webanwendung in eine native Android-Anwendung migrieren.
Die in Teil 2 ausgeführte Webanwendung wird jetzt in eine native Android-Anwendung konvertiert. Die folgende Diskussion gilt für Android OS 2.2 und 2.3.
Die Android-Anwendung wird verwendet index.html als seine UI-Komponente. Wir werden eine schreiben android.app.Aktivität Klasse, um den Integrationspunkt zwischen zu definieren index.html und die native Anwendung. Wir werden auch eine schreiben android.webkit.WebViewClient Klasse, um sicherzustellen, dass die Seite mit den Nachrichtendetails im Original angezeigt wird android.webkit.WebView Instanz, in der die Nachrichtenanwendung gestartet wird.
Accentsconagua
index.html Wir werden das aktualisieren NEWS_URI Variable wie folgt:
var NEWS_URI = 'http://rss.news.yahoo.com/rss/';
Brauchen wir nicht bridge.php in der nativen Android-Anwendung, um AJAX-Anrufe an Yahoo! Nachrichten. Dies ist darauf zurückzuführen, dass die Einschränkung für denselben Ursprung hier nicht gilt. Wenn es als Teil der nativen Anwendung verpackt wird, wird die index.html Die Datei wird nicht von einem Webserver heruntergeladen. Als solches kann es AJAX-Aufrufe zu Remote-URLs machen.
Zusätzlich fügen wir folgende Funktion hinzu:
var EMPTY = ";? function changeLocation (varURI) showProgress (); $ .get (EMPTY, Funktion (Daten) window.location = varURI;);
Das den Ort wechseln() Funktion wird vom aufgerufen android.webkit.WebViewClient, das wird momentan gezeigt. Die Funktion dient dazu, die Fortschrittsseite während des Übergangs von der Nachrichtenseite zur Nachrichtendetailseite anzuzeigen.
den Ort wechseln() ist, um die Fortschrittsseite anzuzeigen.erhalten() Funktion ist eine spezialisierte jQuery Ajax () Funktion. Wir nennen erhalten() eine leere URL und einen Callback-Handler übergeben, der das festlegt window.location Variable zum Eingabeargument. Das Eingabeargument ist die URL in der ein Tag für eine Nachricht, wie in Teil 2, "Auf die Nachrichtendetailseite von der Nachrichtenseite" aus erörtert. Wenn die URL geladen wird, wird die Fortschrittsseite durch den Inhalt dieser URL ersetzt.den Ort wechseln() ist kein wesentlicher Bestandteil der Migration der Webanwendung in eine native. Es ist nur erforderlich, um eine Fortschrittsseite anzuzeigen, wenn Sie von der News-Seite zur News-Detailseite in der nativen Anwendung wechseln. Der erste Teil unseres Aktivität Klasse, benannt NewsActivity wird unten gezeigt:
Paket com.news; import android.app.Activity; import android.webkit.WebView; import android.os.Bundle ;? public class NewsActivity erweitert Aktivität WebView mWebView; public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); mWebView = (WebView) findViewById (R.id.webview); mWebView.setWebViewClient (new NewsClient ()); mWebView.getSettings (). setJavaScriptEnabled (true); mWebView.getSettings (). setDomStorageEnabled (true); mWebView.loadUrl ("android_asset / www / index.html"); onCreate () Methode rufen wir zuerst die Standardimplementierung aus der Superklasse auf und rufen dann auf setContentView () um die Layoutdatei für diese Aktivität zu laden. Das Eingabeargument zu setContentView () ist R.layout.main was ist ein Hinweis auf main.xml in dem res / layout Mappe.WebView über findViewById (R.id.webview). Wir setzen einen Brauch WebViewClient auf der WebView, genannt NewsClient (bald zu überprüfen). Dann konfigurieren wir das WebView um die Ausführung von JavaScript und die DOM-Speicher-API zu ermöglichen (letzteres ist für die Verwendung von HTML5 erforderlich lokaler Speicher).WebView laden die index.html Seite mit dem UI-Code.Wenn Sie auf der Seite mit den Nachrichtendetails die Zurück-Taste des Geräts drücken, wird der Benutzer zur Kategorieseite zurückkehren. Um sicher zu sein, müssen wir uns zuerst mit der onKeyDown Veranstaltung in unserem NewsActivity. Dies ist unten gezeigt:
public class NewsActivity erweitert Aktivität WebView mWebView; public void onCreate (Bundle savedInstanceState) ? public boolean onKeyDown (int keyCode, KeyEvent-Ereignis) if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack ()) mWebView.goBack (); wahr zurückgeben; return super.onKeyDown (keyCode, Ereignis);
Wenn das Schlüsselereignis der Zurück-Taste des Geräts entspricht und der WebView hat Geschichte, um zurück zu gehen, fragen wir dann die WebView einen einzigen Schritt in seiner Geschichte zurückgehen. Auf der Seite mit den Nachrichtendetails entspricht dies index.html. Wenn der Verlauf einen Schritt zurückgeht, wird die Seite "Kategorien" gemäß den in Teil 2, "Start der Anwendung", beschriebenen Schritten angezeigt..
Lassen Sie uns zum Schluss noch den Brauch betrachten WebViewClient die als innere Klasse von implementiert ist NewsActivity.
public class NewsActivity erweitert Aktivität WebView mWebView; public void onCreate (Bundle savedInstanceState) ? mWebView.setWebViewClient (neuer NewsClient ()) ;? public boolean onKeyDown (int keyCode, KeyEvent-Ereignis) ? private Klasse NewsClient erweitert WebViewClient public boolean shouldOverrideUrlLoading (WebView-Ansicht, String-URL) view.loadUrl ("javascript: changeLocation ('" + url + "')"); wahr zurückgeben; ? Die einzige Operation, die wir von der übergeordneten Klasse überschreiben, ist shouldOverrideUrlLoading () wo wir das anweisen WebView um die JavaScript-Funktion aufzurufen den Ort wechseln() im index.html.
WebViewClient, Die Seite mit den Nachrichtendetails wird in einer separaten Browseranwendung außerhalb der Nachrichtenanwendung angezeigt. Definieren Sie daher einen Brauch WebViewClient Es ist wichtig, die Seite mit den Nachrichtendetails als Teil der Anwendung "Nachrichten" anzuzeigen (d. h WebView das beherbergt die index.html).shouldOverrideUrlLoading () in vereinfachter Weise wie folgt: public boolean shouldOverrideUrlLoading (WebView-Ansicht, String-URL) view.loadUrl (url); wahr zurückgeben;
Das würde ausreichen, um die Seite mit den Nachrichtendetails auf derselben Seite anzuzeigen WebView diese Gastgeber index.html. Beim Übergang von der News-Seite zur News-Detailseite wird jedoch nicht die Fortschrittsseite angezeigt.
Nach der Überprüfung der Aktivität Klasse, lassen Sie uns andere Komponenten unserer Anwendung betrachten.
AndroidManifest.xmlFür eine allgemeine Diskussion über die AndroidManifest.xml Datei beziehen sich auf die offizielle Referenz. In dieser Datei gibt es zwei besondere Punkte, die es wert sind, kommentiert zu werden.
android.app.Aktivität Dokumentation: Standardmäßig führt eine Konfigurationsänderung, einschließlich einer Änderung der Ausrichtung oder der Tastaturzugänglichkeit, zur Zerstörung der aktuellen Aktivität. Um das Standardverhalten zu verhindern, konfigurieren wir unsere Anwendung, indem wir die Konfigurationsänderungen angeben, die von der Anwendung selbst verarbeitet werden. Dies ist in der definiert configChanges Attribut wo Orientierung entspricht der Orientierungsänderung und keyboardHidden entspricht einer Änderung der Tastaturzugänglichkeit (z. B. legt ein Benutzer die Gerätetastatur offen). Wir konfigurieren die Anwendung so, dass bei einer dieser Änderungen die aktuelle Aktivität nicht zerstört wird.strings.xmlNachrichten
Diese Datei definiert die Konstante mit dem Namen App Name die zur Identifizierung der Nachrichtenanwendung verwendet wird. Der Wert dieses Attributs wird an verschiedenen Stellen auf unserem Android-Gerät angezeigt (siehe unten). Von links nach rechts: Unter dem Anwendungsstartsymbol, der Titelleiste der Anwendung, Einstellungen - Anwendungen verwalten.
android.app.Aktivität Wir implementieren die Benutzeroberfläche in unsere native Android-Anwendung mit index.html und das unterstützende JavaScript und css Bibliotheken. Ein Integrationspunkt zwischen index.html und der Brauch android.app.Aktivität Klasse ist die folgende Zeile:
mWebView.loadUrl ("android_asset / www / index.html"); Beachten Sie außerdem in "Die Aktivitätsklasse", dass wir JavaScript und DOMStorage im aktivieren android.webkit.WebView Objekt als index.html muss JavaScript ausführen und auf HTML5 zugreifen lokaler Speicher.
mWebView.getSettings (). setJavaScriptEnabled (true); mWebView.getSettings (). setDomStorageEnabled (true);
Zum Schluss im AndroidManifest.xml Wir erlauben Internetverbindungen von unserer Anwendung aus über:
Die zuvor gezeigten Abbildungen 1 - 4 in Teil 1 dieser Serie sind die Bildschirmabbildungen der nativen Android-Anwendung.
Um das Startsymbol für die Nachrichtenanwendung zu erstellen, haben wir die Richtlinien für das Design von Symbolen für Android-Anwendungen befolgt. In dieser Ressource stehen verschiedene Vorlagen im Adobe PSD-Format zum Download zur Verfügung. Wir haben heruntergeladen icon_templates-v2.0.zip und extrahiert Launcher-icon-template.psd. In dieser Datei haben wir zwei Vorlagen zum Erstellen unseres Startsymbols ausgewählt:
Wir haben diese Vorlagen in zwei separaten Ebenen in Adobe Photoshop platziert und einen grafischen Text hinzugefügt, Nachrichten, auf einer zusätzlichen Ebene oben, um das Startsymbol zu erstellen. Gemäß der Richtlinie haben wir drei Versionen des Symbols für Bildschirme mit niedriger, mittlerer und hoher Dichte mit einer Pixelgröße von 36 x 36, 48 x 48 bzw. 72 x 72 Pixel erstellt. Jedes dieser Symbole hat einen Namen icon.png und sie werden in den Android-Projektordnern gemäß der folgenden Tabelle abgelegt:
| Ordnernamen | Dateiname | Pixel Größe |
res \ drawable-ldpi | icon.png | 36 x 36 |
res \ drawable-mdpi | icon.png | 48 x 48 |
res \ drawable-hdpi | icon.png | 72 x 72 |
Als Beispiel ist dies das Startsymbol 36 x 36:
In diesem Lernprogramm haben wir die erforderlichen Projektdateien bereitgestellt, um die native Android News-Anwendung in die Eclipse-Entwicklungsumgebung zu importieren. Die Projektvoraussetzungen sind:
Das Projekt wurde erfolgreich mit Android-Plattform 2.2-API-Ebene 8 und Plattform-2.3-API-Ebene 9 getestet.
Stellen Sie vor dem Importieren des Projekts in Ihre Eclipse-Umgebung sicher, dass das Eclipse ADT-Plugin auf den korrekten Speicherort des Android SDK in Ihrem lokalen System verweist. Um dies zu überprüfen, gehen Sie im Eclipse-Menü zu Fenster -> Einstellungen -> Android. Das SDK-Speicherort Das Fenster muss auf den Speicherort des Android SDK eingestellt sein. Nach der korrekten Einrichtung sollten Sie etwas wie in der folgenden Abbildung sehen:
Die Projektdateien befinden sich in einer Archivdatei mit dem Namen news.zip. Um das Projekt im Eclipse-Menü zu importieren, gehen Sie zu Datei -> Importieren und dann im Dateiimport-Assistenten auswählen Allgemein -> Vorhandene Projekte in den Arbeitsbereich (siehe unten).
Wählen Sie auf der nächsten Seite des Assistenten die Option Archivdatei auswählen Auswahlknopf und navigieren Sie zu wo news.zip befindet sich in Ihrem Dateisystem. Das Projekte Fenster wird automatisch aufgefüllt Nachrichten Projekt ist bereits ausgewählt. Dies ist unten gezeigt. Drücken Sie die Fertig Schaltfläche, um den Import abzuschließen.
Eclipse erstellt die Anwendung nach dem Import automatisch. Jetzt sollten Sie das News-Projekt im Projekt-Explorer sehen (siehe unten):
Für das Erstellen / Debuggen Ihres Projekts können Sie als Build-Ziel zwischen Android OS 2.3- und 2.2-Plattformen wählen. Wählen Sie dazu das Nachrichten Projekt im Projektexplorer und wählen Sie aus dem Rechtsklick-Menü Eigenschaften. Wählen Sie auf der linken Seite eine Liste der Eigenschaften aus Android als die Eigenschaft. Die verfügbaren Build-Ziele werden rechts wie folgt angezeigt:
Nachfolgend finden Sie eine Liste der Dateien im Projekt.
Wir haben bereits einige dieser Dateien besprochen. Nachfolgend finden Sie eine kurze Übersicht / Zusammenfassung:
src Ordner enthält den Quellcode für NewsActivity Klasse.gen Der Ordner enthält die von Eclipse ADT automatisch generierten Dateien.Vermögenswerte \ www Der Ordner und seine Unterordner enthalten alle für die Benutzeroberfläche erforderlichen Dateien, einschließlich index.html; Assets \ www \ css-js hat die css und JavaScript-Dateien, die von verwendet werden index.html. Im Speziellen: jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css sind die jQuery Mobile Framework-Bibliotheken.jquery.ba-dotimeout.js ist die Jquery-Dotimeout-Plugin-Bibliothek.jquery.dst.js ist die DST.js-Plugin-Bibliothek.Assets \ www \ css-js \ images \ icons-18-white.png ist eine Bilddatei, auf die von den Bibliotheken des jQuery Mobile-Frameworks verwiesen wird.assets \ www \ img \ wait.gif ist das sich drehende Symbol auf der Fortschrittseite.res \ drawable * In Ordnern werden die Startsymbole gespeichert, wie im Abschnitt "Application Launch Icon" dieses Tutorials beschrieben.res \ layout \ main.xml Datei ist die Android-XML-Layoutdatei. Da die Benutzeroberfläche in unserer Anwendung in definiert ist index.html Mit dem jQuery Mobile-Framework ist diese Datei sehr einfach und bedarf keiner weiteren Erläuterung.res \ values \ strings.xml und AndroidManifest.xml.default.properties Definiert das Build-Ziel und ist Teil von news.zip. Es wird von Eclipse ADT in Abhängigkeit von Ihrer Auswahl des Build-Ziels überschrieben.Neben der Entwicklung plattformübergreifender mobiler Webanwendungen können mit dem jQuery Mobile-Framework native Android-Anwendungen implementiert werden. In dieser Tutorialserie haben wir mit jQuery Mobile eine Webanwendung entwickelt und diese dann mit nur wenigen Änderungen in eine native Android-Anwendung migriert. Die Hauptidee ist die Verwendung der android.webkit.WebView object als Container zum Ausführen der HTML-Datei der Webanwendung und des darin enthaltenen jQuery Mobile-JavaScript-Codes. Einige abschließende Bemerkungen sind unten angegeben.
android.webkit.WebView unterliegt bei AJAX-Aufrufen keinen Beschränkungen mit dem gleichen Ursprung.