La technique pour créer des pages avec le framework jQuery Mobile

Une page HTML contient un en-tête (header), un contenu (content) et un pied de page (footer). Ces 3 éléments sont présents avec jQuery Mobile.

Apprenez comment créer rapidement des pages, des pages multiples avec le Framework jQuery Mobile.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La technique pour créer des pages avec le framework jQuery Mobile

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble ou continue la série de cours dédiée au framework JavaScript jQuery Mobile, et cette fois vous allez apprendre à construire les pages de votre application Web, toutes les possibilités qui existes pour créer vos pages très simplement.

Les pages

Généralement une page HTML contient un en-tête header, le contenu content, et un pied de page footer. Ces trois éléments sont bien évidemment disponibles avec le framework jQuery Mobile. Il faut savoir qu’une page avec jQuery Mobile, elle se défini par une div, et vous rajoutez l’attribut data-role = page, header, footer, tout ça. Ca va vous permettre de définir une page, data-role page dans une div, à l’intérieur de cette page, vous allez mettre le header, le contenu et le footer.

Pour le header, il faut mettre data-role = header, dans une div et vous mettez le contenu, vous pouvez mettre une image, du texte, un formulaire, c’est de l’header, en principe on met une bannière ou du texte, pour un périphérique mobile je vous conseille d’utiliser les images le moins possible, vous mettez du texte. Ensuite vous avez le contenu de votre page avec le texte, les images, les boutons, les liens, les formulaires, là vous créez une div data-role = content et le contenu de votre page dans cette div et à la fin vous avez le pied de page avec une div data-role = footer toujours div data-role tout ça, c’est aussi simple que ça pour créer une page.

Et après quand vous créez une page vous n’êtes pas obligés de mettre le header, content et le footer, vous pouvez mettre une page que avec un header, un content, ou contenu et footer, c’est vous qui voyez. Vous pouvez faire tout ce que vous souhaitez avec jQuery Mobile pour concevoir vos pages.

Les pages multiples

Il existe aussi les pages multiples, jQuery Moile permet de créer plusieurs pages dans un seul document HTML, ça peut être très pratique, dans le même document HTML vous avez plusieurs pages et il suffit de créer plusieurs divs page avec data-role = page, et avec le lien avec un identifiant, vous accédez à # identifiant, l’identifiant de votre page, c’est comme une ancre, si vous connaissez les ancres pour les liens HTML, c’est le même principe je vous montrerais un exemple de code source à la fin de ce cours.

Les pages

Le framework jQuery Mobile bien évidemment, prend en charge la balise a de tous les liens HTML, il faut savoir que tous les liens avec cette balise a, href quoi, jQuery Mobile les transforment automatiquement en requête Ajax. Plutôt que de recharger la page complètement, ils sont chargés via Ajax, ça permet d’ajouter des effets de transitions, de rendre l’application Web beaucoup plus fluide sur un périphérique mobile.
Pour créer un lien vers la page précédemment visitée, vous avez la possibilité de revenir en arrière avec l’attribut data-rel back, je vais vous montrer tout ça à travers un exemple de code source, au lieu que ce soit chargé de manière classique comme sur les ordinateurs de bureau, on fait appel à la technologie Ajax, jQuery Mobile effectue cela automatiquement pour vous.

Le préchargement des pages

Vous avez une option qui peut améliorer la réactivité de votre application web avec le pré chargement des pages externes, si vous avez des pages externe dans votre application mobile, les pages externes sont pré chargées par jQuery Mobile et elles sont alors instantanément disponibles lorsque l’utilisateur clique sur le lien vers celle-ci, c’est très utile dans le cas des galeries photos, ça permet d’afficher des photos beaucoup plus rapidement, il suffit d’utiliser l’attribut data-prefetch pour un pré chargement des pages externes.
Lorsqu’une page est chargée, jQuery Mobile va analyser tous les liens de la page, il va repérer les liens avec l’attribut prefetch, il va alors les pré charger en arrière-plan et les inclure dans le DOM de la page d’origine. L’avantage c’est que utilisateur n’a pas de temps d’attente, les pages vont s’affichées instantanément, par contre, l’inconvénient c’est que la taille du DOM, la taille de la page d’origine va augmenter fortement, utilisez cette fonctionnalité avec précaution, par exemple dans des cas bien spécifiques comme des galeries photos, des boutiques en ligne, vous avez beaucoup de vignettes à afficher, des liens vers d’’autres pages, faites attention parce que ça va augmenter le poids de la page, qui dis poids de la page plus grand dit chargement beaucoup plus long sur un périphérique mobile connecté en 3G. Faites bien attention.

La mise en cache des pages

Vous pouvez mettre les pages en cache, bien évidemment, il faut savoir que pour avoir une taille raisonnable du DOM, jQuery utilise une stratégie particulière, chaque fois qu’une page est chargée en Ajax, celle-ci est marquée après qu’elle soit retirée du DOM dès que l’utilisateur la quitte. Ça permet de réduire en temps réel, le poids du DOM, le poids de la page, si une page est chargée, l’utilisateur la visite, il la quitte, elle est supprimée du DOM.
Si une page ainsi supprimée est revisitée, le navigateur est en mesure de la récupérée dans son cache ou de la recharger à partir du serveur. Pour mettre en cache une page, vous pouvez utiliser l’attribut data-dom cache = true dans la div. Vous avez un exemple sur la div data-dom cache true, ça va mettre cette page en cache.
Il y a un inconvénient à la mise en cache dans le DOM, c’est que bien évidemment, le DOM va devenir de plus en plus volumineux avec une taille imposante, ça peut poser des problèmes de mémoire sur certains appareils, des ralentissements. Utilisez la mise en cache des pages avec une grande précaution, faites attention.

Les thèmes graphiques de jQuery

Vous avez également des thème intégrés à jQuery Mobile, c’est plus des nuances, les thèmes sont avec le fichier CSS de base que vous chargez avec themeroller, sur jquerymobile.com, mais vous pouvez utiliser des nuances, ça permet de modifier l’aspect des boutons, des listes, des barres d’entête, des pieds de page, des icônes, les pop-up, un thème est décliné en plusieurs nuances qui modifie la couleur des éléments qui constituent cette page, donc si vous avez des nuances identifiées par une lettre de A à Z, les lettres de A à E ça utilise le nuancier de jQuery Mobile, les lettres de F à Z sont pour les nuances personnalisées que vous pouvez concevoir.
Voyez jQuery Mobile est très souple, vous pouvez concevoir vos propres nuances, F à Z ça vous laisse un large choix de possibilité, sachant qu’il y a 26 lettres dans l’alphabet, et de A à E vous pouvez utiliser le nuancier de jQuery Mobile. Avec l’attribut data-theme la valeur entre A et Z, ça va s’appliquer à la div de la page, la nouvelle nuance que vous avez choisie.
La nuance s’applique à toute la page, à tous ses éléments, ou alors vous pouvez choisir d’appliquer la nuance qu’au header, qu’au footer, qu’au contenu ou qu’a un formulaire. C’est vraiment vous qui choisissez, vous avez toutes les possibilités qui existes. Je vous ai mis un exemple de code pour appliquer le nuancier D sur toute la page.

Les transitions de pages

Vous avez également des transitions de pages qui existes, jQuery Mobile ajoute par défaut un effet de transition, à chaque fois qu’une page est affichée, après que l’utilisateur ai cliqué sur un lien, ça rend l’application mobile beaucoup plus fluide, beaucoup plus sympa à regarder pour l’utilisateur. Pour ajouter une transition sur une page, il suffit d’utiliser l’attribut data-transition et le nom de la transition, sur un lien, vous avez un exemple de code source, nouvelle page.htm, data-transition le nom de la transition, vous avez slide, none pour pas de transition, fade etc. Vous avez tout un tas de transitions.

Qu’est-ce qu’elles font ces transitions ?
Fade la nouvelle page apparaît au-dessus de l’ancienne en jouant sur l’opacité pour terminer par une image nette,
Pop la nouvelle page est présentée en dimension réduite et elle zoom pour remplir toute la fenêtre,
flip c’est un effet 3D, la nouvelle page apparaît après une rotation à 180°,
turn la nouvelle page apparaît du bord gauche et subi une rotation à 90°,
flow l’ancienne page est réduite et disparaît vers la gauche, tandis que la nouvelle page apparaît en dimension réduite à partir du côté droit et augmente pour prendre la taille de la fenêtre totale.

Vous avez sliefade, je vous laisserais mettre la vidéo sur pause, ou sont expliquées toutes les transitions, none, il n’y a pas de transition entre les pages, il faut savoir, comme je vous l’ai dit, jQuery Mobile applique par défaut la transition slide pour afficher toutes les nouvelles pages, je vous laisse mettre cette vidéo sur pause et vous avez un descriptif de toutes les transitions, ou encore mieux, vous pouvez tester grâce au code source disponible sous cette vidéo, toutes les transitions par vous-même dans vos applications pour mobile.

Exemple d’application

On va voir un exemple de code source ensemble, comme d’habitude on intègre la feuille CSS jQuery Mobile, ont créé une page, la div de la page, on peut créer plusieurs pages dans le même fichier HTML, comme je vous ai expliqué, très puissant dans un fichier HTML il y a 3 pages là, et vous mettez votre contenu le header, le pieds de page, et le contenu donc le menu ici, là on a le header et le contenu de la page accueil, avec un lien pour revenir sur la page d’accueil, là c’est le contenu de la page formation, l’Id formation, regardez le système d’ancre, formation, questions, le contenu de la page questions est ici, et toujours un lien pour revenir sur la page d’accueil, id accueil du site.
Qu’est-ce que ça donne ?
Ça donne ça, on clique sur formation, la formation s’affiche avec un effet, vous avez remarqué un effet, on revient à l’accueil il y a un effet de transition de page, il y a une nouvelle transition.
On revient à l’accueil, on va rajouter une transition, car j’ai vu qu’il n’y n’avait pas de transition, alors la transition, voilà, on va mettre un flip pour la transition ici, flip, et ici une transition également, flip, je recharge la page, je reviens à l’accueil, vous avez vu l’intégration de la transition, c’est vraiment très simple, dans un seul fichier HTML je modifie en direct les transitions et il faut faire attention d’intégrer dans un seul document HTML toutes vos pages ce sera un document HTML beaucoup trop lourd à charger pour l’utilisateur, beaucoup trop gros, par contre vous pouvez intégrer deux, trois pages ici il y a trois pages, pour que la taille du fichier HTML soit raisonnable pour l’utilisateur. Je vous montre avec les effets, voilà il y a plusieurs effets, ce sera à vous de les utiliser.

Votre plan d’actions !

Maintenant vous pouvez commencer à utiliser jQuery Mobile pour vos applications web pour les smartphones et les tablettes. Si vous avez des questions, posez-les sous ce cours vidéo, vous retrouverez également sous ce cours vidéo le code source complet que vous pouvez réutiliser dans vos applications web, si vous voulez aller plus loin, au-dessus de cette vidéo il y a une image avec un lien, ou à la fin de cette vidéo il y a un lien cliquable qui va s’afficher, ça va vous permettre d’accéder à une nouvelle page ou vous avez la possibilité de consulter énormément de cours pour tout savoir sur l’utilisation de jQuery, jQuery UI, jQuery Mobile, à la fin de cette vidéo un lien apparaît, vous cliquez dessus et une nouvelle page s’affichera avec toutes les options que vous avez pour accéder à ces nouveaux cours, en attendant je vous dis à très bientôt sur Développement Facile pour la suite de cette série.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple jQuery Mobile

Et voici le code source commenté pour créer des pages avec jQuery Mobile.

Choisissez les prochains cours jQuery Mobile

Dites-moi dans les commentaires ci-dessous, le thème prochains cours jQuery Mobile.