Share
Dans la partie 1 de cette série de didacticiels, nous avons présenté notre exemple d’application, décrit le flux de pages et expliqué comment construire les pages dans l’application via jQuery Mobile. Dans la deuxième partie, nous avons terminé la mise en œuvre de notre application Web. Dans cette dernière partie, nous allons migrer l'application Web vers une application Android native.
L’application Web complétée dans la partie 2 sera maintenant convertie en une application Android native. La discussion ci-dessous s’applique à Android OS 2.2 et 2.3.
L'application Android utilisera index.html en tant que composant d'interface utilisateur. Nous écrirons un android.app.Activity classe pour définir le point d'intégration entre index.html et l'application native. Nous allons aussi écrire un android.webkit.WebViewClient classe pour vous assurer que la page Détail des actualités est affichée à l'intérieur de l'original android.webkit.WebView exemple où l'application Nouvelles est lancée.
Accentsconagua
index.html Nous mettrons à jour le NEWS_URI variable comme suit:
var NEWS_URI = 'http://rss.news.yahoo.com/rss/';
Nous n'avons pas besoin bridge.php dans l'application Android native pour transférer les appels AJAX vers Yahoo! Nouvelles. En effet, la restriction de même origine ne s'applique pas ici. Lorsqu'il est intégré à l'application native, le index.html le fichier n'est pas téléchargé à partir d'un serveur Web. En tant que tel, il peut effectuer des appels AJAX vers des URL distantes.
De plus, nous ajoutons la fonction suivante:
var EMPTY = ";? function changeLocation (varURI) showProgress (); $ .get (EMPTY, fonction (données) window.location = varURI;);
le changer de lieu() la fonction sera appelée à partir du android.webkit.WebViewClient, qui sera montré momentanément. Le but de cette fonction est d’afficher la page de progression pendant la transition de la page Actualités à la page Détail des informations..
changer de lieu() est d'afficher la page de progression.obtenir() fonction est un jQuery spécialisé ajax () une fonction. Nous appelons obtenir() en lui passant une URL vide et un gestionnaire de rappel, qui définit la window.location variable à l'argument d'entrée. L'argument d'entrée est l'URL dans le une balise pour une nouvelle, comme indiqué dans la partie 2, "Aller à la page d'informations détaillée de la page d'informations". Lors du chargement de l'URL, la page de progression est remplacée par le contenu de cette URL..changer de lieu() n’est pas un élément essentiel de la migration de l’application Web vers une application native. Il est uniquement nécessaire d'afficher une page de progression lors de la transition de la page Actualités vers la page Détail des nouvelles dans l'application native.. La partie initiale de notre Activité classe, nommée NewsActivité est indiqué ci-dessous:
package com.news; importer android.app.Activity; importer android.webkit.WebView; importer android.os.Bundle ;? Classe publique NewsActivity étend Activity 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 () méthode, nous appelons d’abord l’implémentation par défaut de la super classe, puis appelons setContentView () charger le fichier de mise en page pour cette activité. L'argument d'entrée à setContentView () est R.layout.main qui est une référence à main.xml dans le res / mise en page dossier.WebView via findViewById (R.id.webview). Nous établissons une coutume WebViewClient sur le WebView, nommé NewsClient (à revoir bientôt). Ensuite, nous configurons le WebView pour permettre l'exécution de JavaScript et l'API de stockage DOM (cette dernière est nécessaire pour utiliser HTML5 stockage local).WebView charger le index.html page qui a le code d'interface utilisateur.Sur la page Détail des informations, appuyez sur le bouton Précédent de l'appareil pour ramener l'utilisateur à la page Catégories. Pour être assuré de cela, nous devons d’abord gérer le onKeyDown événement dans notre NewsActivité. Ceci est montré ci-dessous:
Classe publique NewsActivity étend Activity WebView mWebView; public void onCreate (Bundle savedInstanceState) ? booléen public onKeyDown (int keyCode, événement KeyEvent) if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack ()) mWebView.goBack (); retourne vrai; return super.onKeyDown (keyCode, event); ?
Si l'événement clé correspond au bouton retour de l'appareil et au bouton WebView a une histoire à remonter, nous demandons alors au WebView remonter un pas dans son histoire. Dans la page Détail des actualités, cela correspond à index.html. Lorsque l'historique recule d'un pas, la page Catégories s'affiche en suivant les étapes décrites dans la partie 2, "Démarrage de l'application"..
Enfin, regardons la coutume WebViewClient qui est mis en œuvre en tant que classe interne de NewsActivité.
Classe publique NewsActivity étend Activity WebView mWebView; public void onCreate (Bundle savedInstanceState) ? mWebView.setWebViewClient (new NewsClient ()) ;? booléen public onKeyDown (int keyCode, événement KeyEvent) ? classe privée NewsClient étend WebViewClient public boolean shouldOverrideUrlLoading (vue WebView, URL de chaîne) view.loadUrl ("javascript: changeLocation ('" + url + "')"); retourne vrai; ? La seule opération que nous substituons à la classe parent est shouldOverrideUrlLoading () où nous instruisons le WebView appeler la fonction JavaScript changer de lieu() dans index.html.
WebViewClient, la page Détail des informations serait affichée dans une application de navigateur distincte, en dehors de l'application Actualités. Par conséquent, définir une coutume WebViewClient est essentiel pour afficher la page Détail des informations dans le cadre de l'application Actualités (c'est-à-dire dans le même WebView qui accueille le index.html).shouldOverrideUrlLoading () de manière plus simplifiée, comme suit: public boolean shouldOverrideUrlLoading (vue WebView, URL de chaîne) view.loadUrl (url); retourne vrai;
Cela serait suffisant pour afficher la page de détail des nouvelles dans le même WebView qui accueille index.html. Toutefois, le passage de la page Actualités à la page Détails de la publication ne comprend pas l'affichage de la page de progression..
Ayant examiné le Activité classe, regardons les autres composants de notre application.
AndroidManifest.xmlPour une discussion générale sur le AndroidManifest.xml fichier se référer à la référence officielle. Dans ce dossier, il y a deux éléments particuliers qui méritent d'être commentés..
android.app.Activity documentation, par défaut, un changement de configuration, y compris un changement d’orientation ou d’accessibilité au clavier, entraîne la destruction de l’activité en cours. Pour éviter le comportement par défaut, nous configurons notre application en spécifiant les modifications de configuration qui seront gérées par l'application elle-même. Ceci est défini dans le configChanges attribuer où orientation correspond au changement d'orientation et keyboardHidden correspond à un changement d'accessibilité du clavier (par exemple, un utilisateur ouvre le clavier de l'appareil). Nous configurons l'application de sorte que, si l'un de ces changements se produit, l'activité en cours ne soit pas détruite..strings.xmlNouvelles
Ce fichier définit la constante nommée nom de l'application qui est utilisé pour identifier l'application News. La valeur de cet attribut est affichée à différents endroits de notre appareil Android, comme indiqué ci-dessous. De gauche à droite: sous l'icône de lancement de l'application, la barre de titre de l'application, Paramètres - Gérer les applications.
android.app.Activity Nous implémentons l'interface utilisateur dans notre application Android native à l'aide de index.html et le support JavaScript et css bibliothèques. Un point d'intégration entre index.html et la coutume android.app.Activity classe est la ligne suivante:
mWebView.loadUrl ("android_asset / www / index.html"); En outre, observez dans "The Activity Class" que nous activons JavaScript et DOMStorage dans le android.webkit.WebView objet comme index.html doit exécuter JavaScript et accéder à HTML5 stockage local.
mWebView.getSettings (). setJavaScriptEnabled (true); mWebView.getSettings (). setDomStorageEnabled (true);
Enfin, dans le AndroidManifest.xml nous autorisons les connexions Internet depuis notre application via:
Les figures 1 à 4 précédemment présentées dans la partie 1 de cette série sont les images d'écran de l'application Android native..
Pour créer l'icône de lancement de l'application Actualités, nous avons suivi les instructions de conception des icônes pour les applications Android. Dans cette ressource, divers modèles au format Adobe PSD sont disponibles au téléchargement. Nous avons téléchargé icon_templates-v2.0.zip et extrait Launcher-icon-template.psd. Dans ce fichier, nous avons sélectionné deux modèles pour créer notre icône de lancement:
Nous avons placé ces modèles dans deux couches distinctes dans Adobe Photoshop et ajouté un texte graphique, Nouvelles, sur une couche supplémentaire en haut pour composer l’icône de lancement. Selon le guide, nous avons créé trois versions de l'icône pour les écrans de densité faible, moyenne et élevée avec des tailles de pixels de 36 x 36, 48 x 48 et 72 x 72 pixels, respectivement. Chacune de ces icônes est nommée icon.png et ils sont placés dans les dossiers du projet Android selon le tableau suivant:
| Nom de dossier | Nom de fichier | Taille de pixel |
res \ drawable-ldpi | icon.png | 36 x 36 |
res \ drawable-mdpi | icon.png | 48 x 48 |
res \ drawable-hdpi | icon.png | 72 x 72 |
A titre d'exemple, voici l'icône de lancement 36 x 36:
Dans le cadre de ce didacticiel, nous avons fourni les fichiers de projet nécessaires pour importer l'application Android News native dans l'environnement de développement Eclipse. Les prérequis du projet sont:
Le projet a été testé avec succès à la fois sur la plateforme Android 2.2 API de niveau 8 et sur la plateforme 2.3 API de niveau 9..
Avant d'importer le projet dans votre environnement Eclipse, assurez-vous que le plug-in Eclipse ADT pointe vers l'emplacement correct du SDK Android dans votre système local. Pour vérifier cela, dans le menu Eclipse, allez à Fenêtre -> Préférences -> Android. le SDK Emplacement La fenêtre doit être définie sur l'emplacement du SDK Android. Une fois configuré correctement, vous devriez voir quelque chose de similaire à l'image ci-dessous:
Les fichiers de projet sont fournis dans un fichier d’archive nommé news.zip. Pour importer le projet dans le menu Eclipse, allez à Fichier -> Importer puis dans l'assistant d'importation de fichier, sélectionnez Général -> Projets existants dans l'espace de travail (voir ci-dessous).
Sur la page suivante de l’assistant, choisissez le Sélectionnez le fichier d'archive bouton radio et naviguez jusqu'à où news.zip se trouve dans votre système de fichiers. le Projets fenêtre sera automatiquement rempli où la Nouvelles le projet est déjà sélectionné. Ceci est montré ci-dessous. appuyez sur la terminer bouton pour terminer l'importation.
Eclipse construira l'application automatiquement après l'importation. Vous devriez maintenant voir le projet News dans l'explorateur de projet, comme indiqué ci-dessous:
Pour construire / déboguer votre projet, vous pouvez choisir entre les plates-formes Android OS 2.3 et 2.2 comme cible de génération. Pour ce faire, sélectionnez le Nouvelles projet dans l'explorateur de projet et dans le menu contextuel, choisissez Propriétés. Sur la liste de gauche des propriétés, sélectionnez Android comme la propriété. Les cibles de construction disponibles sont affichées à droite, comme indiqué ci-dessous:
Une liste des fichiers du projet est donnée ci-dessous.
Nous avons déjà discuté de certains de ces fichiers. Vous trouverez ci-dessous un résumé / récapitulatif:
src dossier contient le code source pour le NewsActivité classe.gen dossier contient les fichiers générés automatiquement par Eclipse ADT.actifs \ www Le dossier et ses sous-dossiers contiennent tous les fichiers nécessaires à l'interface utilisateur, y compris index.html; assets \ www \ css-js a la css et les fichiers JavaScript utilisés par index.html. En particulier: jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css sont les bibliothèques du framework jQuery Mobile.jquery.ba-dotimeout.js est la bibliothèque jquery-dotimeout-plugin.jquery.dst.js est la bibliothèque du plugin DST.js.assets \ www \ css-js \ images \ icons-18-white.png est un fichier image référencé par les bibliothèques du framework jQuery Mobile.actifs \ www \ img \ wait.gif est l'icône en rotation utilisée dans la page en cours.res \ drawable * les dossiers stockent les icônes de lancement, comme indiqué dans la section "Icône de lancement d'application" de ce didacticiel.res \ layout \ main.xml fichier est le fichier de mise en forme XML Android. Puisque l'interface utilisateur dans notre application est définie dans index.html utilisant le cadre jQuery Mobile, ce fichier est très simple et n’a pas besoin d’être expliqué plus avant..res \ values \ strings.xml et AndroidManifest.xml.default.properties définit la cible de construction et fait partie de news.zip. Il sera écrasé par Eclipse ADT en fonction de votre sélection de la cible de construction..En plus de développer des applications Web mobiles multiplates-formes, le framework jQuery Mobile peut être utilisé pour implémenter des applications Android natives. Dans cette série de didacticiels, nous avons développé une application Web à l'aide de jQuery Mobile, puis l'avons transférée dans une application Android native avec de légères modifications. L'idée principale est d'utiliser le android.webkit.WebView objet en tant que conteneur pour exécuter le fichier html de l'application Web et le code JavaScript jQuery Mobile qu'il contient. Quelques remarques finales sont données ci-dessous.
android.webkit.WebView n'est pas soumis à des restrictions de même origine lors d'appels AJAX.