Vous n'êtes pas connecté. Connexion
|
|
Création d'un blog avec Web Services + client AjaxDe $1Table des matières
IntroductionDans ce TP nous allons partir d'un projet existant, le faire tourner, et l'améliorer. Il s'agit d'un petit projet simulant un blog. Nous allons commencer par créer le projet, créer une classe entité représentant les articles du blog, ajouter des web services permettant de manipuler ces données via des URIs, et enfin développer un client en HTML + JavaScript utilisant la bibliothèque jQuery pour la manipulation du DOM et pour les requêtes Ajax. Création du projet, d'une classe entité Article, et d'un session bean façade
Nous devrons par la suite certainement améliorer/modifier/ajouter des choses dans cette classe (de nouveaux Web Services par exemple, accepter de nouveaux formats d'entrée ou de sortie, etc.). Création d'un petit client pour ajouter des données dans la base via un web service.Dans la page index.jsp ou index.html, nous allons ajouter un formulaire permettant d'ajouter des articles. Mettez donc un formulaire de ce type : <form method="post" enctype="application/x-www-form-urlencoded" action="resources/articles"> <p> <label for="titre">Titre</label> <input type="text" name="titre"/> </p> <p> <label for="content">Texte</label> <textarea id="content" name="contenu"></textarea> </p> <p> <input name="soumettre" type="submit"> </p> </form> Ce formulaire va nous permettre de remplir la base de données sans trop se fatiguer. Il va falloir néanmoins ajouter un web service indiquant que l'on va travailler avec en entrée le type de données provenant d'un formulaire HTTP. Ce type n'est ni XML ni JSON... Notez que le formulaire fait un POST (action="POST"), ce qui dans le vocabulaire REST signifie "insère dans la collection des Articles" un nouvel article, puisque l'URI de la collection sur laquelle on pointe ("resources/articles") est bien "articles". Voir le cours.
Ajoutez donc dans le fichier .java de vos Web Services un truc qui ressemble à cela : @POST @Consumes({MediaType.APPLICATION_FORM_URLENCODED}) public Response createFromFormulaire(@FormParam("titre") String titre, @FormParam("contenu") String contenu) { Article a = new Article(titre, contenu); super.create(a); // Create URI for Response UriBuilder b = uriInfo.getBaseUriBuilder(); URI u = null; try { u = new URI(b.path(ArticleFacadeREST.class).build() + "/" + a.getId()); System.out.println("Donnée créée avec comme URI : " + u); System.out.println("Dans create titre: " + a.getTitre() + " content: " + a.getContenu()); } catch (URISyntaxException ex) { Logger.getLogger(ArticleFacadeREST.class.getName()).log(Level.SEVERE, null, ex); } return Response.created(u).build(); } Rajoutez également comme attribut de cette classe une variable de type UriInfo, annotée par @Context. Cette variable nous permettra dans le code de connaitre l'URI du web service invoqué. @Context UriInfo uriInfo; Dans le fichier ApplicationConfig.java, changez le chemin "de base" d'accès à vos web services (ligne 14) /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package service; import java.util.Set; import javax.ws.rs.core.Application; /** * * @author tirius */ // MICHEL BUFFA : changer la ligne ci-dessous ! @javax.ws.rs.ApplicationPath("resources") public class ApplicationConfig extends Application { @Override public Set<Class<?>> getClasses() { Set<Class<?>> resources = new java.util.HashSet<Class<?>>(); // following code can be used to customize Jersey 2.0 JSON provider: try { Class jsonProvider = Class.forName("org.glassfish.jersey.jackson.JacksonFeature"); // Class jsonProvider = Class.forName("org.glassfish.jersey.moxy.json.MoxyJsonFeature"); // Class jsonProvider = Class.forName("org.glassfish.jersey.jettison.JettisonFeature"); resources.add(jsonProvider); } catch (ClassNotFoundException ex) { java.util.logging.Logger.getLogger(getClass().getName()).log(java.util.logging.Level.SEVERE, null, ex); } addRestResourceClasses(resources); return resources; } /** * Do not modify addRestResourceClasses() method. * It is automatically re-generated by NetBeans REST support to populate * given list with all resources defined in the project. */ private void addRestResourceClasses(Set<Class<?>> resources) { resources.add(service.ArticleFacadeREST.class); } } Quelques remarques :
Exécutez votre application, utilisez le formulaire pour créer des articles, regardez à l'aide de Firebug ou équivalent la réponse envoyée chaque fois que l'on soumet le formulaire. Vous devriez avoir Location: suivi de l'URI de la donnée ajoutée.
Avant d'aller plus loin, nous allons tester rapidement les autres web services, maintenant que nous avons des données... Test de vos Web ServicesNous allons maintenant rapidement tester les Web Services. Pour cela il faut créer un second projet de test, de type web application. Créez donc un second projet appelé testBlogWS, de type web. Ne mettez rien dedans. Revenez sur le premier projet, celui du blog et faites clic droit/testRestFul Web Services. Une fenêtre de dialogue apparait, proposant de générer un client de test pour vos web services. Ne prenez pas la première option, mais la seconde, qui vous demande de choisir parmis les projets, celui dans lequel le client de test va être généré. Choisissez le projet testBlogWS. Cliquez sur ok, attendez un peu... Normalement une fenêtre permettant de tester vos web services va apparaitre. Essayez de lister les données que vous avez créées dans la section précédente. Implémentation d'un blog à l'aide d'appels AJAXNous allons utiliser la librairie jQuery pour ajouter/modifier/supprimer/mettre à jour les données que nous avons créées. Je vous propose de récupérer dans son intégralité un TP que m'a rendu un étudiant de M2 Miage. Tout n'est pas parfait dans ce code (notamment, la manière dont les web services renvoient des réponses). Récupérez le projet, dézippez le, ouvrez-le dans netbeans, regardez le fichier de configuration de la base de données utilisée (glassfish-resources.xml), créez la base, lancez le projet, étudiez-le ! Comparez les classes Article.java, les web services que vous avez écrits dans votre projet, etc. avec ceux de ce projet. Regardez les fichiers Pour ceux qui ne connaissent pas jQuerySi vous ne connaissez pas Ajax et jQuery, allez faire un tour sur la page de ressources jQuery que j'ai réalisée :Ressources JQuery. Voir aussi pour de nombreux tutoriaux interactifs sur jQuery : http://www.w3schools.com/jquery/default.asp les sections "jquery selectors" et "ajax". Je fais un TP en M1 sur jQuery : TP jQuery, support de cours recommandé pour débuter : http://ejohn.org/apps/workshop/intro/ Upload de fichiers images avec le formulaire pour posterJe vous propose dans cette partie d'implémenter l'upload d'images avec les posts dans el blog. Regarder dans les transparents du cours de M.Buffa les chapitres 4 (formulaires) et chapitre 6 (persistence, File API et XmlHttpRequest level 2) les techniques proposées par HTML5 :
Ici deux un blog qui réalise l'upload de fichiers attachés via un web service jersey (à venir) : |
Powered by MindTouch Deki Open Source Edition v.8.08 |