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

Etudes de quelques exemples simples faits en Dojo

Etudier deux exemples de clients Dojo sur le web service (maintenant RESTFUL) des bookmarks

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. Cet exemple utilise le support du MVC de Dojo : on demande avec un XhRGet la ressource située sur /usr/all et on indique qu'on souhaite avoir la resource au format application/json (voir la ligne "header" de la requête), on indique aussi que la réponse va être interprétée par Dojo en Json (la ligne "handleAs"). Ensuite on récupère l'objet Json dans la fonction qui traite la réponse et on associe ce modèle à la Grid qui est une vue sur ce modèle. Regardez aussi le fichier UserResource.java pour voir comment est traité l'envoi en Json.

Dans UserResource.java, on a légèrement modifié le web service qui répond à /user/all par un GET. On a juste modifié la ligne @Produces pour indiquer qu'on pouvait maitenant envoyer une réponse au format "application/json" en plus du format "application/xml". C'est la bibliothèque JAXB qui s'occupe de sérialiser dans ces deux formats les instances de User.

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

Exemple de réponse JSON du web service http://localhost:9998/user/all :

{"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"}          ] }

Et voici la fonction Dojo (dans res/clientDojoSimple.html) qui envoie la requête, récupère la réponse en JSON et initialise un modèle (Store) avec la réponse puis le met sur une Grid.

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);
 }

 La grille est une table HTML légèrement "boostée" par Dojo (dans clientDojoSimple.html). Notons les attributs qui donnent le type (dojox.grid.DataGrid), le modèle (jsonstore, cf javascript ci-dessus) et l'id.

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