Premiers pas avec JQuery Mobile

Cet article présente mon approche personnelle de JQuery Mobile, et des différents éléments que j'ai utilisés dans un cas pratique. Il n'a pas pour but de présenter le langage de façon exhaustive, mais de montrer qu'il est possible d'avoir une interface mobile très rapidement avec quelques lignes de code.

Qu'est-ce que jQuery Mobile?

JQuery Mobile est un framework javascript Web-Mobile léger, open source, basé sur jQuery, HTML et CSS mettant à disposition un grand nombre de tags et markups et de convertir les éléments HTML en composants graphiques pour interfaces tactiles. Simple d'utilisation, il fournit une interface native-like qui s'adapte à la majorité des navigateurs et compatible avec la plupart des smartphones tactiles et tablettes (mais également ordinateurs).

Les bases

Pour produire une première page en jQuery mobile, nous allons créer un fichier HTML qui sera interprété par le navigateur mobile. Nos navigateurs comprennent le HTML5, alors utilisons-le !
Il est ensuite nécessaire d'importer le framework jQuery Mobile (ou de donner à notre page une référence vers les fichiers en ligne - ce que nous choisirons dans l'exemple ci-dessous).

<!doctype html>
<html>
  <head>
    <title>Mes premiers pas avec jQuery Mobile</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta charset='utf-8'>
    <link rel='stylesheet' href='http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css' />
    <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
  </head>
  <body>
    ...contenu de la page...
  </body>
</html>

Dans la première balise meta, "viewport" est l'endroit où sont affichées les pages dans le contexte du mobile. 'width=device-width, initial-scale=1' provoque l'ajustement de la largeur de la page à celle de l'écran du mobile.

Styles et rôles des éléments :

En HTML5, chaque élément a un rôle. C'est ce qui va permettre d'uniformiser nos pages en appliquant des styles bien définis selon le rôle attribué aux éléments dans une page.

L'attribut data-role permet d'attribuer ces rôles aux éléments (page, header, footer...), mais il est possible d'assigner d'autres paramètres afin de les customiser. Ainsi, data-position va imposer une position aux éléments, data-theme va leur attribuer un thème css, data-transition définir des animations pour passer d'une page à une autre (il en existe d'autres comme data-icondata-mini, etc.).

Par exemple,

<body>
  <div data-role='page' id='homePage' data-title='Page homePage'>
    <div data-role='header'>
      <h1>My First Phone App with jQuery Mobile</h1>
    </div>
    <div data-role='content'>
      <p>Ceci est le contenu de la page.</p>
    </div>
    <div data-role='footer' data-position='fixed'>
      <h4>©Ideo2012</h4>
    </div>
  </div>
</body>

data-position indique si l'élément est flottant ou fixe, donc s'ajuster au reste du contenu de la page, ou non.

A savoir : il est possible d'insérer des boutons dans les en-têtes et pieds de page comme sur une application mobile classique (cf. plus bas).

Boutons :

Il existe plusieurs méthodes pour afficher des boutons dans notre page.

Une première consiste à créer un lien, et à lui appliquer un rôle de bouton, comme dans l'exemple suivant :

<a href='#favoris' data-role='button' data-icon='star'>Favoris</a>

href est l'adresse du contenu à afficher lorsqu'on appuie sur le bouton.
data-icon - optionnel - permet d'assigner un pictogramme de base à afficher dans le bouton.

Inséré dans un élément de type div avec les data-role='navbar' et data-id='navBar', le bouton déclaré ci-dessus n'a plus besoin de l'argument data-role, JQuery Mobile l'interprètera bien comme un bouton.

<div data-role='navbar' data-id='navBar'>
  <a href='#favoris' data-icon='star'>Favoris</a>
</div>

Il en est de même pour les boutons dans l'en-tête ou pied de page au détail près que ceux-ci doivent étendre la classe CSS ui-btn-left ou ui-btn-right pour s'afficher correctement, respectivement à gauche ou à droite (les 4 classes .ui-header .ui-btn-left.ui-header .ui-btn-right.ui-footer .ui-btn-left et .ui-footer .ui-btn-right étant définies par défaut dans la CSS de jQuery Mobile).

<div data-role='header'>
  <h1>My First Phone App</h1>
  <a href='#favoris' data-icon='star'>Favoris</a>
</div>
Navigation :

Dans cet exemple, je n'aborde pas comment séparer le code d'un site en plusieurs fichiers afin de conserver et réutiliser certains éléments (header, footer...). Ceci dit, il est tout à fait possible de coder plusieurs pages et fenêtres dans un seul fichier et de naviguer parmi celles-ci. C'est encore une fois le but de l'attribut data-role. Vous allez donc pouvoir avoir autant de blocs div que vous voulez dans le body de votre fichier HTML en leur indiquant bien leur data-role='page' et en leur donnant un id. Cet id servira ensuite à naviguer sur cette page (div).

<!-- Page d'accueil --> <div data-role='page' id='homePage' data-title='homePage'>
  <div data-role='header'>
    <h1>My First Phone App</h1>
  </div>
<div data-role='content'>
<p>My Content</p>
<a href='#favoris' data-role='button' data-icon='star' data-theme='b' data-transition='slidedown'>Favoris</a>
</div>
<div data-role='footer' data-position='fixed'>
<h4><a href='#copyright' data-rel='dialog'>©Ideo2012</a></h4>
</div>
</div> <!-- Page de favoris --> <div data-role='page' id='favoris' data-title='Page Bar'> <div data-role='header' data-position='fixed'> <a href='#homePage' data-icon='delete' class='ui-btn-left'>Retour</a> <h1>Favoris</h1> </div> <div data-role='content'> <p>Mes Favoris</p> <p>... Contenu ...</p> <p><a href='#homePage'>Retour à l'accueil</a></p> </div> <div data-role='footer' data-position='fixed'> <h4><a href='#copyright' data-rel='dialog'>©Ideo2012</a></h4> </div> </div> <!-- Page Copyright --> <div data-role='page' id='copyright' data-title='©Ideo 2012'> <div data-role='header' data-position='fixed' data-theme='c'> <h1>Ideo Technologies 2012</h1> </div> <div data-role='content'> ...Tous droits réservés... </div> </div>
Transitions :

Afin d'améliorer l'expérience utilisateur sur notre page, nous voulons ajouter des effets visuels de transition entre les pages. Vous remarquerez dans l'exemple précédent 2 types d'appel à des pages.
De la page d'accueil à la page Favoris :

<a href='#favoris' data-role='button' data-icon='star' data-theme='b' data-transition='slidedown'>Favoris</a>

L'affichage de la page de favoris se fera avec un effet d'apparition de haut en bas. Il en existe bien évidemment d'autres : slide, slideup, pop, fade, flip.

Le deuxième appel est illustré lors de l'affichage de la page copyright, depuis les footers, avec :

<h4><a href="#copyright" data-rel="dialog">©Ideo2012</a></h4>

data-rel va ici indiquer que le bloc div id='copyright' va s'afficher sous forme de fenêtre dialogue (popup).

Pour composer un numéro de téléphone depuis le mobile, sur un simple tap, il suffit d'utiliser la balise de lien : a.
Exemple :

<a href='tel://01 46 25 09 60'>Appelez-nous!</a>

Thèmes :

JQuery Mobile définit par défaut 5 swatches (de "a" à "e"). Les swatches sont des thèmes de couleurs cohérents, permettant de changer l'apparence d'éléments graphiques. Il se modifie en utilisant l'attribut data-theme. Il est également possible d'en créer des nouveaux afin de les utiliser de la même manière.

Constations

A l'exécution dans un navigateur mobile, on a bien un site formaté au petit écran, les boutons sont jolis et l'interface assez soignée. Il apparait cependant vite nécessaire de construire son propre thème. Cependant, même si le framework se dit proche du look and feel natif, on en est tout de même assez loin. Les animations sous Safari IOS6 sont poussives et ne semblent pas se déclencher en même temps que le chargement de la page.

Conclusion

Pour conclure, on peut dire que JQuery Mobile est un framework compatible avec un grand nombre de terminaux mobiles (contrairement à son principal pendant Sencha Touch), facile et très rapide à prendre en main. L'affichage se fait correctement quelle que soit la résolution de l'écran mobile. La documentation est assez complète et suffisante pour des exemples simples mais le framework déçoit sur les animations qui ont des comportements améliorables. Il reste encore quelques finitions à apporter pour avoir une totale compatibilité entre les différents systèmes mobiles et se rapprocher davantage des visuels d'applications natives.

5 commentaires

  1. Bonjour Philippe,

    Pour que l’interface JQuery mobile soit bien prise en compte par la page, il faut ajouter le script spécifique dans le header :

    En tous cas, merci pour cette présentation. Elle est très claire et permet de faire une application mobile très rapidement.

    Cordialement,
    Serge Prod’homme

  2. Pour que l’interface JQuery mobile soit bien prise en compte par la page, il faut ajouter le script spécifique dans le header :



    En tous cas, merci pour cette présentation. Elle est très claire et permet de faire une application mobile très rapidement.

    Cordialement,
    Serge Prod’homme

  3. Pour que l’interface JQuery mobile soit bien prise en compte par la page, il faut ajouter le script spécifique dans le header :



    En tous cas, merci pour cette présentation. Elle est très claire et permet de faire une application mobile très rapidement.

    Cordialement,
    Serge Prod’homme

  4. Pour que l’interface JQuery mobile soit bien prise en compte par la page, il faut ajouter le script spécifique dans le header :


    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    En tous cas, merci pour cette présentation. Elle est très claire et permet de faire une application mobile très rapidement.

    Cordialement,
    Serge Prod’homme

  5. Bonjour,
    Je suis en cours de développer un site web mobile avec jQuery mobile mais je ne sais pas comment afficher le <> correctement sur le site ?
    merci et j’attends votre réponse

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.