jQuery Mobile : un framework jQuery pour les applications Web Mobiles

jQuery Mobile est un framework crée par le projet jQuery dont la première version est sortie en octobre 2010. Il est actuellement disponible en version 1.0 alpha 4.1 (depuis le 7 avril) et sous les licenses MIT et GPL2.

Le principal atout de jQuery Mobile est sa compatibilité avec un grand nombre de plateformes mobiles et navigateurs :

• Apple iOS (3.1-4.2): iPhone, iPod Touch, iPad
• Android (1.6-2.3)
• Blackberry 6
• Windows Phone 7
• Palm WebOS (1.4)
• Opera Mobile (10.1): Android
• Opera Mini (5.02): iOS, Android
• Firefox Mobile (beta): Android

Le support de Blackberry 5 et Nokia/Symbian est prévu pour la version bêta (annoncée pour mi-avril).
Dans cet article, je vais vous montrer comment utiliser ce nouveau framework pour faciliter le développement de vos applications web pour mobiles. Pour l’exemple, je reprendrai mon application de démonstration Agenda que j’ai développé avec jQTouch dans mon dernier billet.

Utilisation

On commence d’abord par créer une page HTML5. Ensuite, on référence les fichiers du framework dans la balise head, à savoir la dernière version de jQuery, le script jQueryMobile, et son CSS.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

 
Ces fichiers sont également téléchargeables sur le site de jQueryMobile.
Ensuite, dans la balise body on crée une page de notre application en spécifiant l’attribut data-role="page" dans un élément div.
Cet attribut fait partie des « custom data attributs » introduits par HTML5. Ils sont sous la forme data-* et permettent d’ajouter une donnée ou une information sur l’élément HTML sans qu’elle ne soit visible par l’utilisateur. Et ce sont ces données que jQuery Mobile utilise pour structurer et transformer la page web en une application mobile.
Ainsi, une page « typique » jQuery Mobile est organisée de la manière suivante :

<div data-role="page">
        <div data-role="header">...</div>
        <div data-role="content">...</div>
        <div data-role="footer">...</div>
</div>

Pas besoin de chercher les classes dans les CSS du framework, il suffit à chaque fois de spécifier le data-role de chaque élément pour que jQuery Mobile lui associe le style adapté. Par ailleurs, dans la version alpha 4, le framework introduit l’utilisation de « namespace » pour ces attributs afin d’éviter d’éventuels conflits avec d’autres librairies.

Thèmes

jQuery Mobile propose 5 thèmes de styles et de couleurs, appelés par des lettres (a,b,c,d,e), pour mieux personnaliser les pages. Ces thèmes sont utilisables indépendamment pour chaque élément et cela en étant déclarés dans l’attribut data-theme. On peut ainsi choisir de mettre un bouton en jaune avec le thème e, la barre d’outil en noir avec le thème a, le footer en bleu (thème b), etc… On peut également définir un thème unique pour toute la page en le déclarant dans la balise div (le thème par défaut étant a) :

<div data-role="page" data-theme="b">
        <!--contenu-->
</div>

Ce qui aura pour effet ici de colorier en bleu le header et le footer, et laisser en gris clair le contenu (pour plus de contraste). Ces thèmes ne modifient pas l’organisation ni la forme ou dimension des éléments. Ils agissent uniquement sur leur couleur et texture.

Configuration

Ce qu’il faut savoir c’est que jQuery Mobile effectue des transformations automatiquement avant que le document ne soit chargé. Ces « transformations » sont basées sur la configuration par défaut du framework. Lorsque jQueryMobile s’exécute, il déclenche un évènement mobileinit qu’on peut récupérer pour le configurer :

$(document).bind("mobileinit", function(){
  //configurations...
});

Les options configurables sont accessibles via l’objet $.mobile. La liste de ces options est disponible sur le site de documentation de jQuery Mobile. Ce script doit être ajouté dans la balise head du document après la référence à jQuery et avant celle de jQuery Mobile.

Application

A présent, passons à la pratique. Je reprend mon application agenda que j’ai développé avec jQTouch lors de mon billet précédent, pour l’adapter avec jQuery Mobile. Je rappelle son principe : l’application permet de créer des événements et de les enregistrer en local sur le navigateur. Ils sont listés sur la page d’accueil et chaque événement a son propre panel avec ses informations. Parmis ces infos, on peut spécifier son adresse et ensuite l’afficher sur une Google Map par rapport à la localisation de l’utilisateur.
Les deux frameworks se ressemblant assez, je n’ai pas eu beaucoup de modifications à faire pour porter l’application.
Voici ma page d’accueil :

<div id="home" data-role="page" data-theme="b">
	<div data-role="header">
		<h1>My Agenda</h1>
		<a data-role="button" href="#new" class="ui-btn-right">New Event</a>
	</div>
	<div data-role="content" id="events"></div>
</div>

 

On peut remarquer le « data-role » button qui permet d’afficher un bouton à la place du lien. Par défaut, les boutons sont affichés de gauche à droite. Pour le positionner à droite, j’utilise la classe ui-btn-right. Par ailleurs, jQuery Mobile ajoute automatiquement à gauche sur le « header » un bouton back dès qu’on navigue à une autre page pour permettre de revenir à la page précédente.
Ensuite, je passe à la page d’ajout d’évènement. Cette page se présente sous forme d’un formulaire avec différents champs à remplir. Pour créer un formulaire avec jQuery Mobile, on commence par ajouter la balise form dans l’élément div représentant le contenu de la page (data-role="content"). Pour un meilleur rendu, le formulaire peut être affiché sous forme de liste, chaque item encadrant un champ et son label, et ayant pour attribut data-role="fieldcontain" :

<form>
     <ul data-role="listview" data-inset="true">
	   <li data-role="fieldcontain">
		    <label for="name">Event : </label>
		    <input type="text" id="name" name="name" placeholder="Enter the event's name" required/>
	   </li>
           <!-- ... -->
     </ul>
</form>

Cette organisation du formulaire est très récente (ajout dans la version alpha 4) et améliore considérablement son affichage.

Par défaut, jQuery Mobile « transforme » automatiquement les types d’inputs les plus communs en des composants adaptés aux mobiles, désactivant pour certains l’affichage natif. Cependant depuis la version alpha 4, pour le type select, jQuery Mobile affiche le menu natif au lieu de son « selectmenu » pour des raisons de performances. Pour l’activer, il suffit d’ajouter l’attribut data-native-menu="false" à l’élément .

D’autre part, le framework propose un composant « toggle switch » qu’on peut afficher pour un élément select qui aurai deux options et en lui ajoutant un attribut data-role="slider :

<div data-role="fieldcontain">
	<label for="alarm">Alarm :</label>
	<select name="alarm" id="alarm" data-role="slider">
                <option value="off">OFF</option>
		<option value="on">ON</option>
	</select>
</div>

Cependant, les derniers inpus HTML5 tels que date et time ne sont pas « customisés » par jQuery Mobile. Tout dépend donc de l’implémentation du navigateurs (sur iphone et android, les navigateurs natifs ne les implémentent pas). Un plugin DatePicker est encore en experimentation mais ne fait pas partie de la version actuelle du framework.
En ce qui concerne les boutons, jQuery Mobile transforme automatiquement tous les inputs de types button, submit, reset et image sans ajout de l’attribut data-role="button". Par ailleurs, le framework propose des icones pour personnaliser les boutons avec l’attribut data-icon.
A présent passons au panel de localisation de l’évènement. De même que pour jQTouch, l’attribut style="width:100%; height:100%;" doit être ajouté au panel et au div de la carte pour qu’elle soit affichée sur tout l’écran.

<div id="map" data-role="page" data-theme="d" style="width:100%; height:100%;">
   	<div data-role="header" data-theme="b">
   		<h1>Map Location</h1>
   		<a data-role="button" data-icon="home" href="#home" class="ui-btn-right">Home</a>
   	</div>
   	<div id="map_canvas" style="width:100%; height:85%;"></div>
   	<a data-role="button" href="#" id="traceButton" data-theme="b">Go to my Event</a>
</div>

 

Voila pour la page HTML. En ce qui concerne la gestion des évènements et la géolocalisation, les scripts développés avec jQTouch restent quasiment les mêmes. Le seul changement se situe au niveau de l’ajout du panel détaillant chaque évènement (qui doit être adapté à jQuery Mobile) ainsi que son affichage sur la page d’accueil. Ces ajouts dynamiques ont posé quelques problèmes d’affichage. En effet jQuery Mobile modifie le DOM de la page au chargement (en ajoutant des éléments et des attributs de style). Ainsi lorsque j’ajoute un élément en javascript, il n’est pas « transformé » par jQuery Mobile et ne s’affiche pas correctement. Pour contrer ce problème, plusieurs solutions se présentent. En ce qui concerne l’affichage du panel de chaque événement, j’ai utilisé la fonction page() sur le panel qui va obliger jQuery Mobile à appliquer ses modifications. En ce qui concerne les listes déja définies pour lesquelles on souhaite ajouter un item, on utilise la fonction suivante :

$('#list_id').listview('refresh');

Vous trouverez le code complet de l’application sur le Github de Zenika.

Tests et critique

Tout comme pour jQTouch, j’ai testé mon application sur différents systèmes iPhone, iPad, et Android. Et de même qu’avec jQTouch, l’application fonctionne beaucoup mieux sur iphone que sur Android. Sur ce dernier, le temps de réaction aux ‘tap’ est particulièrement long. Les transitions sont néanmoins plus stables. Le framework est un peu plus riche et s’adresse à un plus grand nombre de plateformes. D’autre part, les différents thèmes proposés permettent une meilleure personnalisation de l’application.

Ressources

• Documentation et Démos sur le site de jQuery Mobile

Pour cloturer ce volet consacré aux frameworks JavaScript mobiles, mon prochain billet introduira Sencha Touch, une API javascript pure, basée sur ExtJS.

A suivre…