Créer sa première application jQuery Mobile À la découverte de jQuery Mobile
JQuery Mobile est un ensemble de plug-ins et de widgets de jQuery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au niveau de l'implémentation du code, jQuery Mobile est donc très proche de jQuery UI à un détail près : alors que ce dernier se concentre sur le développement d'applications bureautiques, jQuery Mobile se cantonne exclusivement au développement pour les appareils mobiles.
À l'heure où nous mettons sous presse, jQuery Mobile en est à sa version 1.2.0. La bibliothèque fait toujours l'objet d'un développement actif, mais l'équipe qui en est à l'origine a déjà abouti à une version parfaitement stable depuis plusieurs mois. La documentation est toutefois encore à l'ébauche, par rapport aux innombrables pages se rapportant au projet jQuery lui-même, mais vous trouverez de nombreux détails complémentaires dans les forums officiels, particulièrement actifs. N'hésitez pas non plus à vous reporter au projet de traduction en français de la documentation de jQuery Mobile. Stable et performante, la bibliothèque jQuery Mobile est ainsi pleinement utilisée par des milliers de développeurs à travers le monde, ce qui témoigne de la simplicité de sa mise en place.
Vue d'ensemble de la bibliothèque jQuery Mobile
À l'heure actuelle, la version complète de jQuery Mobile comprend une douzaine de fichiers : une série de fichiers JavaScript (englobant un nombre plus ou moins grand de méthodes), des feuilles de styles CSS qui s'y rapportent, et des images au format PNG correspondant à des icônes pratiques.
Vous devez charger le fichier JavaScript de référence (ou sa version réduite à sa plus simple expression) après la bibliothèque de base de jQuery. Ce script effectue différentes tâches, comme la création de widgets, le chargement d'écouteurs d'événements et la mise en place de l'API.
jQuery Mobile comprend aussi une feuille de styles qui définit la mise en forme et l'apparence des éléments d'une page. Elle prépare également les transitions et les animations à l'aide de transformations en CSS 3.
Enfin, jQuery Mobile inclut une série de petits éléments graphiques que l'on utilise en tant qu'éléments d'interface utilisateur. Il s'agit d'icônes standard employées essentiellement pour soutenir la navigation.
Vous pouvez télécharger la bibliothèque entière de jQuery Mobile (les fichiers JavaScript, CSS et les images) ou y accéder à travers le CDN du projet. Reportez-vous à la section "Download" du site officiel, à cette adresse. Tous les exemples de cet ouvrage s'appuieront sur un accès direct au CDN du projet.
Le fonctionnement de jQuery Mobile
jQuery Mobile s'appuie sur les fonctionnalités de HTML 5 et de CSS 3 afin de mettre en place des balises HTML visant à déployer une interface mobile sur toutes les plates-formes supportées. Il respecte tout particulièrement les spécifications de HTML 5 relatives aux attributs data- personnalisés (reportez-vous à l'adresse pour plus de détails à leur sujet). Grâce à cette méthode, il est possible d'intégrer des données dans des balises conformes au HTML 5. jQuery Mobile dispose d'un large ensemble d'attributs data-.
Lors de son initialisation, jQuery Mobile sélectionne les éléments en fonction de leur attribut data- et les met à jour en insérant des balises complémentaires, de nouvelles classes CSS, et en leur appliquant des gestionnaires d'événement. Vous pouvez ainsi rapidement développer du langage sémantique de base et laisser au programme le soin de transformer ce code épuré en de complexes interfaces utilisateur.
Astuce
Découvrir ce qu'ajoute jQuery Mobile à votre code de base est un exercice intéressant. Pour cela, vous devez pouvoir parcourir le code source avant et après avoir appliqué le JavaScript à la page - dans la plupart des navigateurs Web, l'option "Afficher la source" permet de visualiser le code non modifié. Sachez que de nombreux navigateurs disposent de plug-ins permettant de parcourir la "source générée" et ainsi de comparer les deux versions. Reportez-vous aux barres d'outils réservées aux développeurs pour profiter d'une telle possibilité.