Séance 3 : étude d'un framework Ajax (Dojo) et client RESTFUL

Etudes de quelques exemples simples faits en Dojo

Faites le exercices de cette page : TP Dojo 1.3.2, c'est une première prise en main de petites applications Dojo. Vous pouvez aussi aller voir des exemples sur le site dojocampus.org, cliquer sur le lien "Dojo explorer".

Etudier deux exemples de clients Dojo sur le web service (maintenant RESTFUL) des bookmarks des TPs précédents

Récupérer le projet ici :

• Projet pour Eclipse : BMServ_TP3.zip (19Mo, gros car il y a dojo dedans !)
• Projet pour Netbeans : webserv_tp3.zip (même taille)

Nous avons modifié le projet donné lors du TP1 pour que le serveur embarqué Grizzly puisse dorénavant servir convenablement des ressources statiques (pages html, javascript, etc), ce qui n'était pas le cas avant (les pages contenant des images par exemple, ne chargeaient pas les images, les en-têtes HTTP de réponses n'étaient pas complets). Le nouveau programme principal (dans TestGrizzly.java) créée une instance du serveur puis lui ajoute deux "adapters" :

• un pour des servlets jersey (comprendre : pour les web services REST utilisant la librairie Jersey, les web services étant en réalité transformés en Servlets par Jersey), mappé sur "/", on accèdera donc toujours aux web services comme dans le TP1, par exemple par http://localhost:9998/user/all
• un pour des servlets standards et des ressources classiques (pages html, images, css, javascript etc), mappé sur le répertoire "res" et sur l'URi http://localhost:9998/res, pour voir la page d'accueil on utilisera : http://localhost:9998/res/home.html

Regardez le fichier TestGrizzly.java :

// Le serveur écoute sur le port 9998 et cherche les ressources statiques dans le répertoire res        
        GrizzlyWebServer ws = new GrizzlyWebServer(9998, "res");

        // Premier adapter pour les web services Jersey (rest services)
        ServletAdapter jerseyAdapter = new ServletAdapter();
        // Package qui contient les classes des web services
        jerseyAdapter.addInitParameter("com.sun.jersey.config.property.packages",
                "bmserv.resources");
        jerseyAdapter.setContextPath("/");
        jerseyAdapter.setServletInstance(new ServletContainer());
        ws.addGrizzlyAdapter(jerseyAdapter, new String[]{"/"});

        // Second adpater pour les ressources statiques et les servlets normales accessible sours /res/home.html etc
        ws.addGrizzlyAdapter(new GrizzlyAdapter() {
            public void service(GrizzlyRequest request, GrizzlyResponse response) {
                try {
                    setHandleStaticResources(true);
                    // Ce message s'affiche si la ressource statique n'existe pas
                    response.getWriter().println("Le serveur ne trouve pas la ressource demandee, peut-etre que vous venez de lancer le serveur, attendez 3 secondes et faites reload !");
                } catch (IOException ex) {
                    Logger.getLogger(TestGrizzly.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        }, new String[]{"/res"});

        ...
        ws.start();

 Exécutez le projet, allez sur la page d'accueil, vous devriez voir en bas de la page deux liens pour tester deux clients Dojo : l'un très simple qui se contente de faire un GET sur la liste des utilisateurs pour les afficher dans un widget de type Grid de dojo, l'autre plus complet qui permet de faire le CRUD sur les utilisateurs.

@GET
    @Path("/all/")
    @Produces({"application/json", "application/xml"})
    public bmserv.model.handlers.UserHandler getAllUsers() {
        return Server.uh;
    }

{"user":[{"id":"fgandon","login":"fgandon","lastname":"Gandon","firstname":"Fabien"},
          {"id":"flimpens","login":"flimpens","lastname":"Limpens","firstname":"Freddy"},
          {"id":"gereteo","login":"gereteo","lastname":"Erétéo","firstname":"Guillaume"}   
        ]
}

function affiche(){
   dojo.xhrGet({
      url: targetURL,
      handleAs: "json",
      headers: {"Accept": "application/json"},
      load: handleResponse,
      error: handleError
    });
 }

 // Process the response from the items web service
 function handleResponse(responseObject, ioArgs){
   var tabResponse = responseObject.user;

   if(tabResponse.length >1) {
      var jsonStore = new dojo.data.ItemFileReadStore({data:{items: tabResponse}});
    } else{
      var jsonStore = new dojo.data.ItemFileReadStore({data:{items: [tabResponse]}});
    }
      grid.setStore(jsonStore);
 }

<table align="center"
               dojoType="dojox.grid.DataGrid"
               jsid="grid" id="grid"
               store="jsonStore"
               width="auto"
               >
    <thead>
        <tr>
          <th field="id" width="auto" >Id</th>
          <th field="login" width="auto" >Login</th>
          <th field="lastname" width="auto" >LastName</th>
          <th field="firstname" width="auto" >FirstName</th>
        </tr>
    </thead>
</table>