C’est parti pour la suite des cours sur le Framework JavaScript Dojo.
Apprenez comment installer et utiliser les thèmes graphiques Dojo.
Tout est dans la formation vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Installation et utilisation des thèmes graphiques du framework dojo
Bonjour à tous et bienvenu sur Développement Facile.
Dans le cours précédent j’ai commencé à vous parler du Framework Dojo, je vous ai donné un exemple rapide, je vous ai présenté ses avantages, ses fonctionnalités, et dans ce cours, vous allez rentrer dans le vif du sujet justement, pour apprendre à utiliser le Framework Dojo.
Les thèmes graphiques
On va commencer ensemble par les thèmes graphiques, il faut savoir que Dojo vous propose quatre thèmes prêts à l’emploi, ce sont des thèmes modernes, visuellement très attractifs, ils sont très adaptés aux applications Web 2.0, ils jouent sur la transparence, les dégradés, la couleur et les ombres.
Vous avez claro, c’est un nouveau thème apporté avec la version 1.5 de Dojo, pour visualiser je vous ai mis une URL, il suffit de la rentrer dans votre navigateur, vous pourrez voir à quoi ressemble le thème claro, de toute façon à la fin de ce cours vidéo, je vais vous montrer les différents thèmes à travers une application. Pour utiliser un thème Dojo, c’est très simple, vous mettez un lien vers sa feuille de style CSS, soit vous utilisez la feuille de style locale claro.css, ou alors vous faites directement appel à la feuille de style en ligne, vous passez par le CDN de Dojo, et vous mettez l’URL qui s’affiche à votre écran. Et pour appliquer le thème à la page complète, vous ajoutez la classe claro, à la balise body.
On prend un autre thème, soria, c’est un grand classique de Dojo dans les tons bleus, toujours l’URL pour visualiser, pour l’utiliser vous ajouter un lien vers sa feuille de style CSS et dans la balise body vous rajoutez la classe soria, tout simplement.
Il y a également le thème tundra, c’est un thème un peu plus conventionnel, je vais vous montrer, tout à l’heure à quoi il ressemble, rajoutez un lien vers sa feuille de style CSS et la classe tundra à la balise body.
Et le dernier thème c’est nihilo, c’est un thème beaucoup plus minimaliste, très sobre, donc très simple comme thème. Vous rajoutez, comme d’habitude, un lien vers la feuille de style soit en ligne, soit en locale, comme vous préférez, et vous appliquez le thème à la page en rajoutant là, la classe nihilo à la balise body.
Le fonctionnement de Dojo
Alors pour implémenter Dojo, donc le fonctionnement de Dojo, pour implémenter Dojo dans une page Web, bien évidemment, il suffit d’ajouter le script dojo.js, tout simplement, et en fonction du code Dojo de votre application, ce fichier JavaScript, il va charger les autres fichiers JavaScript pour réaliser les différentes fonctionnalités. Donc les chargements Dojo se réalisent via des requêtes Ajax, et c’est des chargements totalement transparents pour l’utilisateur, ce système de chargement est utilisé par les widgets, vous n’avez pas à vous inquiéter. Si vous avez besoin d’un fichier spécifique, vous utilisez l’instruction dojo.require, c’est un peu comme les inputs de la programmation C, les inputs d’ActionScript, etc. Et Dojo va prendre uniquement les fichiers nécessaires pour l’application en cours d’exécution dans votre site Internet.
Exemple d’utilisation des thèmes Dojo
Je vous montre un exemple de code source. Alors, là je vous montre l’utilisation des différents thèmes, j’ai pris une application très simple avec des boutons, un calendrier, un champ de texte, voilà, on les ajoutes, on y reviendra plus tard ensemble pour ses différentes fonctionnalités, et donc, on fait des Dojo.require, on a besoin du toggle bouton, Dojo.require, on a besoin du calendrier, Dojo.requireDateTaqueBox etc.
Là on veut utiliser le thème tundra donc on fait un lien vers la feuille de style, en locale, moi je l’ai ici en local. Et la balise body classe tundra tout simplement. Ensuite vous avez la classe nihilo, un lien vers la feuille de style nihilo et tout simplement, body avec la classe nihilo, et pareil si vous souhaitez utiliser le thème soria, body classe soria.
Qu’est-ce que ça donne ?
Là c’est la classe nihilo, voyez la différence d’affichage des différents éléments, calendrier, date, ensuite vous avez le thème soria, encore un autre affichage différent, et là vous avez le thème tundra. Voilà des effets sympas en fonction de l’apparence de votre site Internet vous pouvez choisir le thème qui vous convient le mieux.
Votre plan d’actions !
Comme d’habitude vous trouverez le code source en téléchargement sous ce cours vidéo, donc téléchargez-le, si vous avez des questions posez-les sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple Dojo
Voici plusieurs exemples d’utilisation des thèmes Dojo.
Téléchargement du code source Exemple d'applications avec les thèmes Dojo
