Introduction à Dojo

Dojo est un framework JavaScript Open source.

La version actuelle est la version 1.2.3. Elle peut être téléchargée sur le site suivant : Download

La documentation est accessible sur le site suivant : Documentation

DojoCampus est un site montrant une mise en application des fonctionnalités de Dojo.

Dojo n'est pas un nouveau projet  : les premières versions datent d'août 2005 (version 0.4.3) et une refonte totale a eu lieu pour la version 0.9 en 2006.

La reconnaissance de Dojo est très importante et de nombreux acteurs ont fait de Dojo la brique de base de leur développement web 2.0  :

• Orange (France Telecom) ;
• IBM ;
• AOL ;
• SUN ;
• OpenLaszlo ;
• Apple ;
• …

Dojo est composé de 2800 fichiers, dont environ 1300 fichiers JavaScript! Cette profusion de fichiers peut faire peur quand on connaît un peu les problématiques de performance des applications web. Pourtant, Dojo possède un système de « build » très efficace nommé ShrinkSafe qui permet de réduire le nombre de fichiers JavaScript en production à 2! Ce système de build sera détaillé dans un futur article. Gardez surtout à l'esprit que le nombre impressionnant de fichiers n'est pas pénalisant pour le futur de votre application web.

Le framewok Dojo est composé des éléments suivants :

• Dojo : Le cœur du framework
• Dijit : Les widgets d'IHM
• Dojox : Les fonctionnalités et widgets expérimentaux

Dojo est basé sur un noyau très petit (26 K gzippé) qui a les fonctionnalités suivantes :

• détection de navigateur ;
• encodeur-décodeur JSON ;
• chargement de package ;
• gestion événementielle ;
• support des animations ;
• programmation asynchrone ;
• moteur de requetage CSS3 très performant ;
• fonctions de gestion des langues ;
• fonctions de traitement du CSS et du positionnement ;
• programmation orientée objet ;
• protection contre les fuites mémoire ;
• intégration de Firebug.

En plus des fonctionnalités de base, les fonctionnalités optionnelles suivantes peuvent être ajoutées :

• accès aux données unifié (dojo.data) ;
• outils de debug multinavigateur (Firebug Lite) ;
• drag and drop ;
• support accessibilité ;
• support multilingue ;
• formatage des dates ;
• formatage des nombres ;
• utilitaire de gestion de chaîne ;
• couche de transport avancée (IFRAME, JSON-P) ;
• gestion des cookies ;
• animations avancées ;
• appel procédures distantes (RPC), y compris JSON-P ;
• gestion du bouton de retour du navigateur.

L'élément le plus important de Dojo (à mon sens) est sa capacité à programmer en objet. Cette capacité permet de retrouver une typologie de programmation basée sur les concepts objet notamment l'héritage. La réalisation d'applications web 2.0 se trouve facilitée par la création de composants (ou Widgets) réutilisables.

Bien entendu, la bibliothèque de fonctions est très complète et ne nécessite pas l'utilisation d'une bibliothèque complémentaire telle jQuery, Prototype,…

Dijit est la bibliothèque de composants ou widgets de Dojo. Cette bibliothèque permet d'aborder de nombreux points problématiques lors de la conception d'application web 2.0 :

• les formulaires de saisie de données et leur validation ;
• le layout des pages ;
• les commandes de type menu, boite d'outils… ;
• assistance utilisateur ;
• la saisie avancée type éditeur riche, édition arborescence, tabulaire…

Un petit exemple tiré du site dojoCampus  :

Et un autre montrant un treeview avec un menu déroulant :

III-A. Les formulaires▲

Afin de réaliser des formulaires ou des saisies utilisateur, dijit comprend un ensemble de composants tout faits :

• des boutons évolués (Dropdown, Combo, CheckBox, Radio) ;
• des ComboBox avec fonctionnalités « Filtering select » (filtre de sélection) ;
• des zones de saisie évoluées telles des DateTextBox, CurrencyTextBox… ;
• des spinners ;
• des sliders…

Un exemple de composant « filtering select » :

III-B. Le layout▲

Un ensemble de widgets orientés layout sont disponibles dans Dijit. Ces widgets permettent d'agencer le contenu d'une page web de manière simple. On arrive ainsi à avoir un comportement proche d'une application Win32.

Un autre avantage et non des moindres à mon avis est que le layout est uniforme quel que soit le navigateur. Ainsi, un même widget de layout présentera le même comportement qu'on soit sous Firefox ou bien sous IE 6. Ce n'est vraiment pas négligeable quand on connaît le comportement inconstant du JavaScript sous IE6.

La liste des layouts de Dijit :

• AccordionContainer (Layout sous forme d'accordéon) ;
• BorderContainer (Layout séparé en 5 régions : gauche, droite, haut, bas et centre) ;
• ContentPane (Layout de base) ;
• StackContainer (Layout sous forme d'empilement) ;
• TabContainer (Layout sous forme de tabulation).

Un exemple d'un layout sous forme d'accordéon :

III-C. Les commandes▲

Les widgets de commandes permettent de mettre en œuvre aisément des interactions avec l'utilisateur. Par exemple, une boite à outils peut être ajoutée en haut d'un layout BorderContainer. Quelques exemples de widgets disponibles :

• les Popup Menu ;
• les Toolbars.

Un exemple de popup menu extrait du site DojoCampus.org.

III-D. Les autres Widgets disponibles en Vrac▲

Dojox est l'antichambre de dijit et Dojo pour la création de widgets. Une fois que le widget a été mis au point et sérieusement testé dans Dojox, il passe dans Dojo ou dijit. On retrouve dans Dojox des composants d'IHM tel qu'un Bar Chart ainsi que des outils tels que des composants de chargement d'images à partir de Flickr

L'utilisation des widgets de dojoX n'est pas conseillée en production. Pourtant, certains de ces composants ont déjà une maturité très importante. Par exemple, le widget Grid est utilisé dans beaucoup de sites en production sans poser de problème.

Quelques exemples de widgets de dojoX :

• la gestion des graphiques ;
• la gestion des images avec des composants Gallery, Thumbnail… ;
• des compléments à Dojo pour le chargement de données XML, Picasa, Flickr…

Un exemple de composant Gallery de dojoX (extrait du site dojocampus) :

On va quand même coder un petit peu… On va réaliser un exemple de site contenant un widget Accordéon. Je sais, c'est impressionnant :)

Au niveau de l'outillage, n'importe quel éditeur peut faire l'affaire bien sûr, mais je conseille quand même l'excellent Aptana et son Apatana Studio. L'avantage principal est qu'il prend en compte Dojo directement…

Une fois Aptana installé sur votre poste, cliquez sur Fichier/Nouveau/Projet. Sélectionnez « Default Web Project » et cliquez sur « Next> ». Saisissez un nom pour votre projet ainsi qu'un répertoire et cliquez sur « Next> ».

Aptana vous propose une liste de choix de Framework JavaScript dont Dojo :)

Sélectionnez Dojo 1.2. Et aller jusqu'au bout de l'assistant sans rien sélectionner. Vous devriez obtenir le code suivant :

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New web Project</title>
    </head>
    <body>
        <h1>New web Project Page</h1>
    </body>
</html>

Et votre répertoire de projet doit ressembler à ça :

On va maintenant charger le moteur Dojo et les CSS de Dojo à l'aide des lignes suivantes à rajouter dans la section head :

<script type="text/javascript" src="./lib/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<style  type="text/css">
    @import "./lib/dojo/dijit/themes/tundra/tundra.css";
    @import ".lib/dojo/dojo/resources/dojo.css"
</style>

Ensuite on va charger la bibliothèque Dijit contenant le code de l'accordéon. Ça correspond à une sorte d'include en C ou uses pour les DelphiNautes :)

<script  type="text/javascript">
    dojo.require("dijit.layout.AccordionContainer");
</script>

Petite information sur l'utilisation de Dojo en mode déclaratif (dans le code HTML) :

Une fois le « dojo.require » utilisé pour charger la bibliothèque correspondant au widget qu'on veut utiliser, on peut déclarer notre composant à l'aide de l'attribut : « dojoType ». Le nom du composant doit être écrit comme valeur de l'attribut. Le composant peut avoir besoin d'attributs supplémentaires qui seront à rajouter dans la même déclaration.

Pour terminer, on va créer la structure de notre page : un « div » contenant d'autres « div ». Le premier « div » sera déclaré en tant que Widget « dijit.Layout.AccordionContainer » : le container. Et les « div » inclus seront déclarés comme widget de type « dijit.layout.AccordionPane ». Les plus attentifs auront noté qu'on n'a pas fait d'include de « dijit.layout.AccodionPane » : en fait c'est normal, le fichier contenant le code de l'AccordionContainer contient aussi le code de l'AccordionPane.

<body  class="tundra"> <!-- Nom du thème utilisé par notre fenêtre -->
    <!-- Déclaration de l'AccordeonContainer avec son "chemin" complet -->
    <div  dojoType="dijit.layout.AccordionContainer" id="monId    " style="width:500px;height:200px">
        <!-- Déclaration du premier AccordionPane avec son "chemin" complet -->
        <div  dojoType="dijit.layout.AccordionPane" title= "Premier panneau">
        Contenu du premier panneau
    </div>
    <div  dojoType="dijit.layout.AccordionPane" title="Deuxième panneau">
        Contenu du deuxième panneau
    </div>
    <div  dojoType="dijit.layout.AccordionPane" title="Troisième panneau">
        Contenu du troisième panneau
    </div>
    </div>
</body>

Voilà, on a terminé !

Lancez la compilation avec Aptana et vous devriez voir l'image suivante :

Dojo est un framework JavaScript très complet permettant de réaliser des applications web 2.0 full JavaScript. Ce framework possède non seulement un socle technique très complet et très robuste, mais il donne également accès à un ensemble de widgets prêt à l'emploi.

La reconnaissance de Dojo par une communauté professionnelle de plus en plus grande et des acteurs prestigieux en fait un choix d'avenir. De plus, une communauté importante permet d'obtenir de l'aide en cas de problème. Enfin, une documentation fournie et une bibliographie importante permettent d'être opérationnel rapidement.

Pour moi, Dojo est vraiment un framework JavaScript incontournable pour la réalisation d'applications web 2.0. La grande force de Dojo réside, à mon sens, dans la facilité de créer des Widgets personnalisés et réutilisables. La réalisation d'une application web 2.0 revient à créer un ensemble de Widgets Dojo s'agrégeant autour d'un moteur événementiel lui aussi réalisé en Dojo.

Bien entendu, tout framework demande un temps d'adaptation pour permettre d'être opérationnel. Je vous proposerai dans un futur article un tutoriel sur la création de widgets en Dojo ainsi que sur le système de build très particulier.

Quelques liens nécessaires pour Dojo

Le site de référence : DojoToolkit.org

Le site de démonstration : DojoCampus.org

LE livre de référence sur Dojo : Dojo : The Definitive Guide

Un autre livre très intéressant donnant les meilleures recettes : Mastering Dojo

Je voudrais remercier Kerod et Jim_Nastiq pour la correction de ma prose ainsi que leurs conseils.