Une application web est une application construite sur les technologies du web, optimisée pour les appareils mobiles. Elle présente plusieurs avantages :
- Réduction des coûts de développemant : L'utilisation des technologies web standard évite la complexité de la compatibilité multiplateforme et des adaptations système.
- Mise à jour transparente : Les modifications sont déployées côté serveur sans intervention requise de l'utilisateur final.
- Maintenance simplifiée : S'agissant fondamentalement d'un site web, la maintenance s'effectue par les procédures habituelles du développement web.
Le stack technique typique pour le développement front-end comprend HTML5, CSS et JavaScript, tandis que le back-end peut être implémenté avec PHP, Java ou .NET.
L'évolution d'HTML5 a considérablement étendu les capacités des applications web, incluant la géolocalisation, le stockage de données locales, la lecture de contenus audio/vidéo, l'accès à la caméra et l'accélération matérielle via le GPU. Ces applications possèdent ainsi des caractéristiques natives tout en conservant les avantages du web, comme la possibilité de navigation fluide entre différentes applications.
Présentation du framework jQuery Mobile
jQuery Mobile est un framework dédié à la création d'applications web mobiles. Il s'agit d'une adaptation de la bibliothèque jQuery pour les environnements smartphones et tabletes. Compatible avec la majorité des appareils populaires, il utilise HTML5 et CSS3 pour structurer les pages avec un minimum de code JavaScript.
Le framework gère automatiquement les disparités entre navigateurs : il exploite les fonctionnalités avancées des navigateurs modernes tout en assurant une dégradation gracieuse sur les navigateurs moins performants. Il propose un ensemble complet de composants d'interface utilisateur, d'événements et une documentation technique exhaustive.
Configuration initiale
Pour commencer, les ressources suivantes sont nécessaires :
| Ressource | Lien |
|---|---|
| Bibliothèque jQuery Mobile | jquerymobile.com/download/ |
| Documentation officielle | api.jquerymobile.com/category/all/ |
| Démonstrations officielles | demos.jquerymobile.com/1.4.5/ |
Structure d'une page de base
Un document HTML de base avec jQuery Mobile suit cette structure :
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>En-tête de l'application</h1>
</div>
<div data-role="content">
<p>Contenu principal de la page</p>
</div>
<div data-role="footer">
<h4>Pied de page</h4>
</div>
</div>
</body>
</html>
La balise meta viewport initialise l'affichage : la largeur de la page correspond à la largeur de l'écran, avec un zoom initial à 1.
Gestion de plusieurs pages
jQuery Mobile permet de définir plusieurs pages dans un même fichier HTML. Chaque page est identifiée par un attribut id unique, et les liens entre elles utilisent des ancres :
<body>
<div data-role="page" id="accueil">
<div data-role="header">
<h1>Mon Application</h1>
</div>
<div data-role="content">
<p>Bienvenue sur la page d'accueil</p>
<a href="#details" data-transition="slide">Voir les détails</a>
</div>
</div>
<div data-role="page" id="details">
<div data-role="header">
<h1>Détails</h1>
</div>
<div data-role="content">
<p>Informations détaillées</p>
<a href="#accueil" data-direction="reverse">Retour</a>
</div>
</div>
</body>
Événements de cycle de vie des pages
jQuery Mobile expose plusieurs événements liés au cycle de vie des pages :
- pagebeforecreate : Déclenché avant la création de la page
- pagecreate : Déclenché lors de la création, avant le rendu final
- pageinit : Déclenché après l'initialisation complète de la page
- pagebeforeshow : Déclenché avant l'affichage de la page destination
- pagehide : Déclenché après le masquage de la page source
Exemple d'utilisation :
$(document).on("pageinit", "#accueil", function() {
console.log("La page d'accueil est initialisée");
// Initialisation des composants spécifiques
initializeComponents();
});
function initializeComponents() {
// Code d'initialisation
}
Composants d'interface
Listes interactives
jQuery Mobile fournit des composants de liste avancés avec différentes options de configuration :
<ul data-role="listview" data-filter="true" data-inset="true">
<li data-role="list-divider">Catégorie 1</li>
<li><a href="#item1">Élément 1</a></li>
<li><a href="#item2">Élément 2</a></li>
<li data-role="list-divider">Catégorie 2</li>
<li><a href="#item3">Élément 3</a></li>
</ul>
Tableaux responsives
Pour les données tabulaires, le mode reflow adapte l'affichage aux petits écrans :
<table data-role="table" data-mode="reflow" class="ui-responsive">
<thead>
<tr>
<th>Identifiant</th>
<th>Description</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Premier élément</td>
<td>Actif</td>
</tr>
</tbody>
</table>
Gestion des événements
Contrairement à jQuery standard qui utilise souvent $(document).ready(), jQuery Mobile recommande l'utilisation de la méthode .on() pour une liaison plus fiable aux événements :
$(document).on("pageinit", "#page-cible", function() {
// Liaison d'événements sur les éléments de la page
$(this).find(".bouton-action").on("click", function(e) {
e.preventDefault();
performAction($(this).data("action-id"));
});
});
function performAction(actionId) {
// Traitement de l'action
console.log("Action exécutée : " + actionId);
}
Mise à jour dynamique des composants
Lors de modifications dynamiques du DOM, il est nécessaire de rafraîchir les composants jQuery Mobile pour maintenir la cohérence de l'interface :
// Ajout dynamique d'éléments à une liste
function ajouterElement(listId, nouvelleEntree) {
var $liste = $("#" + listId);
var itemCode = '<li><a href="#">' + nouvelleEntree + '</a></li>';
$liste.append(itemCode);
$liste.listview("refresh"); // Mise à jour indispensable
// Alternative pour les formulaires
$liste.trigger("create");
}
// Exemple d'utilisation
ajouterElement("liste-principale", "Nouvel élément ajouté");
Temporisation et fonctions
Pour les opérations différées, la fonction setTimeout reste aplicable :
// Méthode recommandée pour déclarer des fonctions
var gererTimeout = function(duree) {
setTimeout(function() {
console.log("Exécution après " + duree + " millisecondes");
effectuerTraitement();
}, duree);
};
// Alternative avec fonction nommée
function effectuerTraitement() {
// Logique métier
}