Vous devriez avoir : C:\Sun\AppServer\domains\domain1\docroot\dojo-release-1.3.2 pour Glassfish 1.3.2 par exemple, et dedans 4 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 elle 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. 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).

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

Récupéré depuis "http://miageprojet2.unice.fr/index.php?title=Intranet_de_Michel_Buffa/Cours_web_2.0_2009/Frameworks_javascript%2F%2FAjax/TP_Dojo_1.3.2"