TP Dojo

Introduction

Pour ce premier contact avec Dojo, vous allez tout d'abord installer Dojo sur un serveur, soit dans Tomcat soit dans Glassfish. Puis vous ouvrirez un projet netbeans contenant de nombreux exemples...

Installation de Dojo 1.3.2 sur les serveurs Tomcat et Glassfish

Note du 15/3/2010 : la version actuelle est 1.4.x mais la version que je vous propose ici vient avec des démos et des tests que je vous ai préparé. Tout fonctionne pareil avec dojo 1.4 mais la distribution officielle ne vient pas avec les tests et les démos. En résumé : si vous voulez faire du dojo 1.4 (je déconseille pour ce tp, pour ne pas vous compliquer la vie), tout le code de ce tp et des exemples fournis marchera pareil, il faudra juste changer quelques chemins d'inclusion dans les scripts. (M.Buffa)

Installer Dojo sur vos serveur : dezipper l'archive "dojo-release-1.3.2 avec demos et tests.rar" dans le docroot de vos serveurs. Je donne ici les répertoires que j'ai sous windows, cherchez l'équivalent sous Linux, pour ceux qui utilisent ce système, et remplacez évidemment "michel" par votre nom d'utilisateur. J'ai donné les répertoires comme exemple. Avec netbeans, pour connaitre le répertoire exact où se trouve le docroot, allez dans Tools/Server/Glassfish et regardez le répertoire d'installation.

• Pour tomcat dans : C:\Program Files\Apache Software Foundation\Apache Tomcat 6.0.18\webapps\ROOT

• Pour Glassfish v3 : dans C:\Users\michel\.netbeans\6.9\config\GF3\domain1\docroot

Vous devriez avoir : C:\Users\michel\.netbeans\6.9\config\GF3\domain1\docroot\dojo-release-1.3.2 pour Glassfish v3 par exemple, et dans le répertoire dojo-release1.3.2, quatre répertoires : demos, dojo, dijit et dojox

Lancer le premier projet contenant de nombreux exemples

• Dezipper le projet netbeans "TP2 Dojo 1.3.2.rar" quelque part, par exemple là où vous stockez les projets netbeans... et ouvrez le projet dans netbeans

• Faites run du projet, une page html avec un menu doit s'afficher. Ce sont des démos et des exemples à étudier.

• Etudiez les exemples, en particulier les exemples 2, 3, 9 et 10, et la démo sur les formulaires.

Je vous recommande de passer du temps surtout sur les exemples 2 et 3 utilisant les appels ajax XhrGet et XhrPost, regardez en particulier le 3 qui montre comment Dojo facilite la gestion de formulaires en ajax, avec l'envoi automatique des champs du formulaire. La démo sur les formulaires montre la même chose mais avec des widgets Dojo évolués.

Modifiez cet exemple (XhrForm) pour rajouter de nouveaux champs de formulaire (Nom et Prénom par exemple), modifiez la JSP correspondant à l'appel Ajax pour qu'elle récupère l'ensemble des valeurs et les affiche dans la chaine de caractère résultatnte.

REMARQUE : Certains exemples utilisent la bibliothèque dojo qui est installée sur le serveur (regardez les exemples 2, 3 et 4), les autres une version de Dojo qui est déployée avec l'application (les autres). C'est 100% équivalent, seule la manière dont on déclare les librairies diffère, regardez d'ailleurs ce qui change lors de l'insertion du sci. Il vaut mieux utiliser la version sur le serveur car cela accélère le temps de déploiement.
 

Etude du format JSON et de la manière dont Dojo gère le MVC

Etudiez maintenant les exemples 9 et 10 qui montrent comment Dojo sait manipuler le format JSON et faire du MVC à l'aide des différents "stores" (modèles) qu'il peut associer à des widgets comme des tableaux (grid, qui sont des vues).

Etude d'un projet simple de gestion d'annuaire en JSON

• Dezippez le projet "ProjetAnnuaireTelephoniqueDojo.rar" là où vous mettez les projets netbeans. Ouvrez le projet, exécutez-le. Maitenant étudiez le code. Regardez la servlet qui sauvegarde la base de données, regardez sa simplicité. Cet exemple utilise un ItemFileWriteStore, soit un modèle de données en lecture ecriture. La vue est dans widget DataGrid de dojo :

modèle :
 

<span dojoType="dojo.data.ItemFileWriteStore"
              jsId="jsonStore" url="bdAnnuaire.json">
        </span>

vue :
 

<table align="center"
               dojoType="dojox.grid.DataGrid"
               jsid="grid" id="grid"
               store="jsonStore"
               query="{ nom: '*' }"
               width="auto"
               >
            <thead>
                <tr>
                    <th field="nom" width="auto" editable="true">Nom</th>
                    <th field="prenom" width="auto" editable="true">Prenom</th>
                    <th field="adresse" width="auto" editable="true">Adresse</th>
                    <th field="numero" width="auto" editable="true">Numero</th>
                </tr>
            </thead>
        </table>

C'est simple non ?
 

Le même projet mais avec une BD, une classe Entity et un web service REST (Pour ceux qui s'ennuient. Demander de l'aide au prof pour installer et faire tourner)

Pour les plus curieux, vous pourrez regarder le projet "ProjetAnnuaireTelephoniqueDojo_REST_entity_DB.rar" qui est le même que le précédent mais avec une base de donnée et un web service REST en frontal, construit automatiquement à partir d'une classe entity. Cd démo du prof...