TP Dojo 1.3.2

Installation de Dojo 1.3.2 sur les serveurs Tomcat et Glassfish

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.

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

• Pour Glassfish 2.1 dans C:\Sun\AppServer\domains\domain1\docroot

• Pour Glassfish v3 : dans C:\Program Files\sges-v3\glassfish\domains\domain1\docroot

Vous devriez avoir : C:\Program Files\sges-v3\glassfish\domains\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 (pas pour les minfo option web 2.0 2010, ou bien facultatif à faire à la fin du TP si vous vous ennuyez)

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...