Utiliser jQuery Mobile pour créer une application native Android News Reader

Dans cette série de didacticiels en trois parties, notre objectif principal est de décrire comment jQuery Mobile peut être utilisé pour développer une application Android native. Tout d'abord, nous allons développer un exemple d'application Web autonome permettant de parcourir les articles de Yahoo! Nouvelles utilisant jQuery Mobile. Ensuite, nous convertirons cette application Web en une application Android native avec un minimum d'effort..

Le projet jQuery Mobile est un framework Web mobile avec sa version alpha 2 publiée en novembre 2010. Ce cadre peut être utilisé pour développer des applications Web mobiles multiplates-formes pour Android OS, iOS, Blackberry OS, et des plates-formes similaires. Tableau de compatibilité, voir http://jquerymobile.com/gbs/). Bien que le cadre ait été conçu pour créer des applications Web multi-mobiles, il est également possible d'utiliser jQuery Mobile pour développer des applications Android natives. Par conséquent, le but de cette série de tutoriels est double:

Dans un premier temps, nous illustrerons la construction dynamique des éléments de base de l’interface utilisateur dans jQuery Mobile.. Pour ce faire, nous allons implémenter un exemple d’application Web, appelée application News, permettant de parcourir les articles de presse publiés sur Yahoo! Nouvelles. L'application enverra des requêtes HTTP basées sur AJAX à un serveur et analysera la réponse XML pour construire l'interface utilisateur. Nous utiliserons le plugin jquery-dotimeout pour illustrer une technique d’animation dans laquelle les titres de nouvelles sont affichés les uns après les autres à intervalles réguliers avec un effet de fondu. Cela donnera au lecteur un aperçu du formatage du contenu des listes de jQuery Mobile, en particulier de la "liste divisée". Nous utiliserons également le plug-in DST.js pour stocker les sélections de catégories d'actualités actuelles de l'utilisateur avec le stockage local HTML5. L'application Web consiste en un fichier HTML contenant le code de l'interface utilisateur, les bibliothèques jQuery Mobile et les plug-ins jQuery. Le fichier HTML utilise également un simple fichier PHP qui transfère les requêtes HTTP à Yahoo! News URL et renvoie la réponse au fichier HTML. Il s'agit d'une méthode permettant de contourner la restriction d'origine identique des requêtes AJAX dans les navigateurs Web. Le fichier PHP n'effectue aucune manipulation de la demande ou de la réponse car l'objectif principal est d'utiliser les API jQuery / jQuery Mobile pour créer la demande, analyser la réponse et construire l'interface utilisateur. Nous fournirons des images d'écran de l'application Web sous Android OS et sur des appareils iOS pour illustrer le fait que l'interface utilisateur est cohérente sur plusieurs plates-formes..

Deuxièmement, nous montrerons comment développer une application Android native dans laquelle l'interface utilisateur est codée via le framework jQuery Mobile.. À cette fin, nous utiliserons l'application Web développée précédemment. L'idée principale est d'utiliser le android.webkit.WebView objet en tant que conteneur pour exécuter le fichier HTML dans l'application Web. Le seul changement nécessaire dans le fichier HTML consiste à diriger les requêtes AJAX vers Yahoo! URL de nouvelles au lieu du fichier PHP. Nous montrerons comment intégrer le fichier HTML contenant le code de l’interface utilisateur à un android.app.Activity Et un android.webkit.WebViewClient. Nous montrerons également comment créer les icônes de lancement de notre application Android sur la base des directives relatives aux icônes Android..

Les fichiers nécessaires à l'exécution du Web et les applications natives Android peuvent être téléchargés dans le cadre de cette série de didacticiels. Pour l'application Android, nous allons décrire comment importer les fichiers de projet dans l'IDE Eclipse..

Organisation de cette série

Ce tutoriel, le premier de notre série, est organisé comme suit: dans la section "Flux de page", nous commençons à présenter l'application en donnant des images d'écran et en décrivant le flux de page. Nous abordons ensuite certains détails techniques de l’application Web dans la section "Modèle de demande / réponse". C’est dans la section "Structure de la page" que nous présentons les éléments jQuery Mobile pour construire nos pages..

Dans le deuxième tutoriel de cette série, nous complétons le développement de l'application Web. Nous continuons à introduire le code jQuery Mobile, construisons dynamiquement une liste divisée, discutons d'une technique d'animation pour le texte d'un élément de liste divisée et fournissons des transitions entre les pages de notre application. Une section spéciale du deuxième didacticiel explique comment nous travaillons sur la restriction d'origine identique des demandes AJAX dans l'application Web. Des images d'écran de l'application Web finale sur les appareils iOS et Android sont fournies pour une comparaison côte à côte..

Le troisième et dernier tutoriel de cette série est consacré à la migration de l'application Web vers une application Android native. Ce didacticiel comprendra une description détaillée des modifications nécessaires pour convertir notre application Web en une application Android, avec une attention particulière portée à la personnalisation. android.app.Activity et android.webkit.WebViewClient classes et un examen des fichiers de configuration AndroidManifest.xml et strings.xml. Le processus de définition d'une icône de lancement d'application et de la structure générale des fichiers de notre projet Android sera également abordé..

Flux de page

Jetons un coup d'œil aux différentes pages du produit final pour avoir une idée du fonctionnement de l'application. Le flux de pages présenté ici s’applique à la fois aux applications Web et Android natives:

La première page est la page Catégories où l’utilisateur peut consulter rapidement tous les titres d’actualité dans différentes catégories:

Comme indiqué ci-dessus, chaque catégorie d'actualités est affichée dans un élément de la liste partagée de jQuery Mobile, constitué d'une section à gauche avec du texte et d'une autre section à droite avec un bouton. Dans la section texte, le titre de la catégorie est affiché au-dessus des titres de nouvelles pour cette catégorie. Les titres d'actualités d'une catégorie sont affichés successivement dans une boucle toutes les 2 secondes avec un effet d'animation en fondu. Sur cette page, l'utilisateur peut:

Supprimer une catégorie en appuyant sur le bouton de suppression.
Accédez à la liste de toutes les actualités d'une catégorie en appuyant sur la section de texte de l'élément de liste correspondant à cette catégorie..
Ajouter une nouvelle catégorie en appuyant sur le bouton Ajouter.

Sur la page Catégories, si l'utilisateur appuie sur le bouton Ajouter, la page Sélection de catégorie (Figure 2) s'affiche:

Sur cette page, l'utilisateur sélectionne une catégorie d'actualités dans une liste et appuie sur le bouton Obtenir une catégorie pour ajouter cette catégorie à la page Catégories..

Sur la page Catégories, appuyer sur la section de texte de l'élément de liste pour une catégorie conduit l'utilisateur à la page Actualités où sont affichés tous les éléments d'actualités de cette catégorie (Figure 3):

Sur la page Nouvelles, une image peut être associée à une nouvelle, ce qui sert de lien pour plus de détails sur la nouvelle. En appuyant sur la photo, l'utilisateur accède à la page Détail de l'actualité (Figure 4):

Notez que, dans l’application Web, la page Détail de l’information est affichée dans le navigateur en dehors de la page HTML exécutant le code de l’application. Pour pouvoir revenir en arrière, l'utilisateur doit appuyer sur le bouton Précédent du navigateur. Cette action ramène l'utilisateur à la page Catégories. Dans l’application Android native, la page Détail de l’information s’affiche de la même manière. android.webkit.WebView exemple où l'application est lancée, en dehors de la page HTML exécutant le code de l'application. En appuyant sur le bouton de retour de l'appareil, l'utilisateur retourne à la page Catégories..

Le diagramme de la figure 5 résume le modèle de flux entre les pages de notre application News:

Observez l'icône en rotation lors de certaines transitions. Cela indique qu'une page de progression est affichée à l'utilisateur pendant la transition. La page de progression est utile pour informer l'utilisateur que la demande est en cours de traitement. Notez qu'une page de progression au cours de la transition de News à News Detail est uniquement affichée dans l'application Android native, pas dans l'application Web. (Plus de détails à ce sujet seront donnés dans la troisième partie, "Changes In index.html".)

Modèle de demande / réponse

Parlons de la manière dont les demandes et les réponses sont traitées dans l'application Web. Il existe une seule page HTML contenant l’UI et le code de gestion des événements pour l’application News, nommée index.html. Ce fichier est téléchargé sur le navigateur mobile de l'utilisateur à partir d'un serveur Web (pour nos tests, nous avons utilisé un serveur Web Apache 2.2). Les actions de page "Obtenir la catégorie" et "Choisir la catégorie" impliquent des requêtes AJAX pour obtenir des informations d'actualité à partir du compte Yahoo! URL du serveur de news, http://rss.news.yahoo.com/. En raison de la restriction d'origine des requêtes AJAX sur la même origine, il n'est pas possible pour le navigateur d'envoyer ces requêtes directement à Yahoo! Serveur de nouvelles. Pour contourner le problème, nous utilisons un fichier PHP sur notre serveur web, nommé bridge.php, qui envoie ces demandes à Yahoo! Serveur de nouvelles pour le compte du navigateur et relaie la réponse. D'autre part, l'action de page Action Detail implique une requête HTTP GET régulière à destination de Yahoo! Serveur de nouvelles. Pour cette raison, bridge.php n'est pas nécessaire.

En termes de modèle demande / réponse, l'application Android native diffère de l'application Web de deux manières. Tout d'abord, il n'a pas besoin bridge.php. En effet, lorsqu'une application HTML native est intégrée à une application Android native, android.webkit.WebView n'est pas soumis à des restrictions d'origine identique lors d'appels AJAX. Deuxièmement, dans l'application Android native, l'action de page News Detail est un appel AJAX plutôt qu'une requête HTTP GET classique. Nous en discuterons plus en détail dans la troisième partie, "Changes In index.html"..

Structure de la page

Une "page" dans la structure jQuery Mobile peut être une page unique ou une page liée interne interne à une page. Une page de conteneur inclura une ou plusieurs pages de contenu. Il est possible d'afficher / masquer les pages de contenu de manière sélective. Comme mentionné précédemment, notre application Web consiste en une seule page HTML nommée index.html qui contient toute l’interface utilisateur et le code de gestion des événements. Nous définissons notre page conteneur comme suit:

le thème de données attribut du conteneur div tag a la valeur b. le thème de données Cet attribut nous permet de choisir parmi les styles jQuery Mobile disponibles:

Le thème par défaut comporte différentes nuances de couleurs nommées a, b, c, d, e, chacun fournissant un ensemble cohérent de couleurs pour différents éléments de la page. Pour notre application, nous avons choisi la couleur correspondant à b.

Les pages de contenu Catégories, Sélection de catégorie et Actualités seront contenues dans la page Conteneur. Une page de contenu aura généralement un en-tête, une zone de contenu et un pied de page, chacun étant défini dans un div étiquette. La valeur de la data-role attribuer dans le div balise définit le rôle de la balise.

Pour définir un en-tête, utilisez
Pour définir une zone de contenu, utilisez
Pour définir un pied de page, utilisez

Voyons maintenant les différentes pages de contenu de notre application.

Page Catégories

   Les catégories
 Ajouter

Dans la section en-tête, observez le data-nobackbtn = "true" attribut. Par défaut, l'infrastructure de jQuery Mobile comprend un bouton Précédent dans la section d'en-tête. En définissant explicitement cet attribut comme ci-dessus, nous évitons d’avoir un bouton Précédent. Au lieu de cela, nous incluons un bouton Ajouter dans l'en-tête en utilisant . Depuis la valeur de la icône de données attribut est plus, le bouton aura un signe plus. Également, class = "ui-btn-left" s'assure que le bouton est placé du côté gauche de l'en-tête. Nous ne voulons rien inclure dans la section de pied de page et donc le div pour le pied de page est vide. En conséquence, seule une mince ligne horizontale sera affichée dans la section de pied de page..

La zone de contenu contient une liste fractionnée appelée jQuery Mobile. En vous référant à la Figure 1 illustrant la page Catégories, chaque élément de la liste se compose d'une section à gauche avec du texte et d'une autre section à droite avec un bouton, d'où le libellé "divisé". le icône de partage de données et thème de partage de données les attributs définissent la liste comme une liste scindée. Notez que la structure jQuery Mobile offre la possibilité de formater les sections divisées de différentes manières. Par exemple, vous pouvez placer des icônes sur la section de texte, ce qui signifie qu'au lieu d'un bouton de suppression à droite, vous pouvez choisir une autre icône. Dans notre application Actualités, chaque élément de la liste correspond à une catégorie d’actualités particulière. Les éléments de la liste seront construits de manière dynamique en fonction des sélections de l'utilisateur. Au départ, la liste est vide.

Page de sélection de catégorie

   Sélectionner
 
     
 Obtenir la catégorie

Sur la page Sélection de catégorie, dans la zone de contenu, un formulaire permet à l'utilisateur de sélectionner et d'ajouter une catégorie d'actualités. Les catégories d'actualités sont un sous-ensemble de catégories dans Yahoo! Actualités répertoriées dans http://news.yahoo.com/rss. La sélection de la catégorie est traitée lorsque l'utilisateur appuie sur le bouton avec id = "buttonGetCategory".

Observez qu'il n'y a pas de bouton de retour et que la section de pied de page est vide.

Nouvelles page

   Nouvelles
 Retour 
 
  Retour aux catégories d'actualités

Sur cette page, la zone de contenu sera renseignée de manière dynamique avec tous les éléments d'actualité associés à une catégorie en fonction de la sélection de l'utilisateur. Initialement, la zone de contenu est vide. Dans la section d'en-tête, il y a un bouton de retour. Cependant, plutôt que de compter sur l'action de retour par défaut de jQuery Mobile, nous allons l'implémenter via un gestionnaire d'événements. Nous définissons donc explicitement un bouton avec id = "buttonHdrShowCategories" (Le code du gestionnaire d’événements pour le bouton sera examiné dans la deuxième partie, «Accéder à la page Catégories de la page Actualités»). L'attribut data-icon = "arrow-l" utilise une icône intégrée de jQuery Mobile désignée pour les boutons de retour. Pour connaître les icônes de bouton jQuery Mobile disponibles, voir http://jquerymobile.com/demos/1.0a2/#docs/buttons/buttons-icons.html. Sur cette page, nous avons également un bouton de retour sur le pied de page. En effet, la page sera généralement longue et l'utilisateur devra faire défiler l'écran pour parcourir tous les éléments d'actualité. Nous voulons que l'utilisateur puisse revenir en arrière du bas de la page sans avoir à faire défiler l'écran jusqu'en haut. Les gestionnaires d’événements pour les boutons haut et bas au dos seront identiques.

Page de progrès

Auparavant, nous avions indiqué que lors de diverses transitions de page, nous affichions une page de progression jusqu'à la fin de la transition. Cela n'est nécessaire que dans les transitions nécessitant du temps de traitement en raison de la création d'une demande ou de l'analyse de la réponse. La page de progression est très simple, avec un texte descriptif et une icône en rotation.

   En traitement? 
 
  S'il vous plaît, attendez.

Nouvelles page de détail

Le contenu de la page d'informations détaillées est fourni par Yahoo! URL de nouvelles. Le mode d’affichage de cette page est décrit dans la partie 2, «Aller à la page de détail de la page de nouvelles».

Affichage des pages

Afficher une page revient à afficher cette page et à masquer toutes les autres pages. Laissez-nous discuter de la façon d’obtenir ce comportement. le div les variables représentant l’en-tête, le contenu et le pied de page de chaque page sont affectées à des variables les identifiant dans la convention jQuery, comme indiqué ci-dessous. Comme ils sont utilisés de manière répétée, la définition de variables globales pour celles-ci offre un avantage en termes de performances car chaque variable est initialisée une seule fois mais peut être utilisée plusieurs fois..

Pour masquer une page, nous appelons le jQuery cacher() fonction sur les variables d'en-tête, de contenu et de pied de page de cette page. Par exemple, pour masquer la page Catégories:

 fonction hideCategories () hdrCategoriesVar.hide (); contentCategoriesVar.hide (); ftrCategoriesVar.hide ();

De même, pour les pages Sélection de catégorie, Nouvelles et Progression, nous avons les fonctions 'masquer' suivantes:

 fonction hideSelect () hdrSelectVar.hide (); contentSelectVar.hide (); ftrSelectVar.hide (); ? fonction hideNews () hdrNewsVar.hide (); contentNewsVar.hide (); ftrNewsVar.hide (); ? fonction hideProgress () hdrProgressVar.hide (); contentProgressVar.hide (); ftrProgressVar.hide ();

Pour afficher une page, nous masquons toutes les autres pages et appelons jQuery. spectacle() fonction sur les variables d'en-tête, de contenu et de pied de page de cette page. Par exemple, pour afficher la page Catégories, nous avons la fonction suivante:

 fonction showCategories () hideSelect (); hideProgress (); hideNews (); hdrCategoriesVar.show (); contentCategoriesVar.show (); ftrCategoriesVar.show ();

De la même manière, pour les pages de sélection de catégorie, d'actualités et de progression, nous avons les fonctions 'show' suivantes:

 fonction showSelect () hideCategories (); hideProgress (); hideNews (); hdrSelectVar.show (); contentSelectVar.show (); ftrSelectVar.show (); ? fonction showNews () hideCategories (); hideSelect (); hideProgress (); hdrNewsVar.show (); contentNewsVar.show (); ftrNewsVar.show (); ? fonction showProgress () hideCategories (); hideSelect (); hideNews (); hdrProgressVar.show (); contentProgressVar.show (); ftrProgressVar.show ();

Au lieu d'avoir une seule page HTML contenant tout le code de l'interface utilisateur, nous aurions pu l'organiser en plusieurs pages HTML. Pour les besoins de ce tutoriel, nous avons choisi la première approche. Pour ce dernier cas, voir le modèle de navigation de jQuery Mobile qui explique comment jQuery Mobile effectue des navigations de page entre différents fichiers physiques..

Remarques de clôture

Dans cette partie initiale de la série de didacticiels, nous avons présenté les objectifs du didacticiel et discuté de l'exemple d'application à implémenter. Nous avons également commencé à présenter le framework jQuery Mobile en mettant l’accent sur la structure de la page. La semaine prochaine, nous continuerons à introduire le code jQuery Mobile et à terminer la mise en œuvre de notre application Web dans la deuxième partie de cette série..

Code