Tp1 Ema EMACS Développement Web

Transcription

1 Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application instance:application addtodo(texte,actif) deletetodo(texte) getlestodos() updatetodo( texte, actif ) * lestodos Todo texte: String actif : boolean Pour la gestion d une seule et unique application, on va utiliser le Design Pattern Singleton: public class Application { private static Application instance = null; public static Application getinstance() { if (instance == null) { instance = new Application (); return instance; private Application() { 2/ Création du projet et de la partie métier File > New > Dynamic Web Project Les codes de la partie métiers doivent être dans le dossier "Java Ressources :src" et dans un package metier. Préparez aussi des packages controleur et test. Codez les deux classes du diagramme UML ci-dessus et les méthodes nécessaires au fonctionnement.

2 Génération des getters et setters : 3/ Tests unitaires Dans le package test, faire clic droit New > Other > JUnit Test Case, puis remplir l interface comme la capture d écran ci-dessous :

3 Voici un extrait en exemple de code pour le test unitaire de la classe Todo. Essayez de coder quelques tests pertinents et exécutez les via clic droit sur le projet > Run As > Junit Test public class TodoTest public final void testtodo() { Todo todo = new Todo("du lait", false); assertnotnull( todo public final void testgettexte() { Todo todo = new Todo("du lait", false); assertequals ( todo.gettexte(), "du public final void testisactif() { Todo todo = new Todo("du lait", false); assertfalse( todo.isactif()); Faites de même pour la classe Application en codant les tests. A chaque fois que vous développerez une méthode importante, pensez à coder le test unitaire et à relancer la batterie de test pour vérifier la non régression de votre application.

4 Faite une JSP de test pour l affichage de 4 todos : Voici un exemple de code pour créer Application (noter que la construction de la liste est faite dans le constructeur) : private Application() { lestodos = new ArrayList<Todo>(); create4testtodos(); private void create4testtodos(){ addtodo( "Test1 ", false ); addtodo( "Test2 ", false ); addtodo( "Test1actif ", true ); addtodo( "Test2actif ", true ); Importation des classes métier dans la JSP, habituellement en tête de page <%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> <%@ page import="fr.ema.lgi2p.emacs.metier.*" %> Parcours de la liste des Todos de type «foreach» : <% for(todo todo : Application.getInstance().getLesTodos() ){ %> <p> <%=todo.gettexte() %> </p> <% %>

5 4/ Partie pur Web Notre contrôleur va utiliser la technologie de Servet pour recevoir les données (Menu clic droit > New > Servlet ). La servlet devra être dans un package controleur. L URL Mapping permet de faire la liaison entre l URL et la servlet appelée (Nota : je en recommande pas de mapper *.jsp en développement mais uniquement en production). Développez votre contrôleur en vous inspirant de cet exemple : protected void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { String vue = request.getparameter("vue"); if ("liste_todos".equals(vue)) { String vuefinale = this.doaction(request); request.getrequestdispatcher(vuefinale).forward(request, response);

6 private String doaction(httpservletrequest request) { String vueafficher = "erreur.jsp"; String action = request.getparameter("action"); if ("ajoutertodo".equals(action)) { String texte = request.getparameter("todo_texte"); Application.getInstance().addTodo(texte, false); vueafficher = "liste_todos.jsp"; return vueafficher; Développez une JSP pour présenter cette vue : Ajouter un formulaire pour mettre à jour là où les checkbox sélectionnées. 5/ Ajout de fonctionnalité Ajouter une vue pour présenter les données au format xml appelé par un hyperlien pour proposer un fil d actualité <?xml version="1.0" encoding="utf-8"?> <todos> <todo id="1" texte="a faire" actif="false" /> <todo id="2" texte="a ne pas faire" actif="true" /> <todo id="3" texte="surtout a faire" actif="false" /> </todos> Modifiez la vue pour obtenir un flux d actualité en RSS <rss version="2.0"> <channel> <title>application todo</title> <description>application todo by EMA 3 GSI </description> <link> <item> <title>todo 1</title> <link> <description><![cdata[penser au lait]]></description> </item> <item> <title>todo 2</title> <link> <description><![cdata[penser au pain]]></description> </item> </channel>

7 </rss> Ajouter un bouton pour cocher toutes les checkbox en javascript en vous inspirant du code cidessous : $(document).ready(function(){ $("input#checkallbutton").click(function(event){ $("input[type='checkbox']").each( function() { $(this).prop('checked', true); ); ); ); L insertion de jquery peut se faire via ce code : <script src=" </body> Faites un bouton qui inverse la sélection de checkbox réalisée à la fois en javascript et en Java.côté serveur. Ajouter un bouton qui coche toutes les checkbox en soumettant le formulaire côté serveur. Ajout d un fichier de style css contenant le code Css suivant : div#central{ position:absolute; left: 50%; top: 10%; width: 800px; height: 800px; margin-top: -50px; margin-left: -400px; color: black; background-color:rgb(200,220,200); padding: 20px; ul { list-style: none; margin: 0; padding: 4px 4px 4px 4px; ul > li{ display: inline; div#menu{

8 position:relative; left:10%; width:80%; background-color:rgb(200,240,220); Ajouter deux div dans la partie Vue avec les id référencés dans le code Css sachant que l un doit être inclus dans l autre. Faite un lien entre avec le fichier Css. Créer un menu horizontal utilisant une liste d éléments comme proposé par le site suivant : Modifier les noms des menus pour les faire correspondre aux actions javascript initialement créées. Ajouter un évènement javascript/jquery sur tous les liens du menu : $(document).ready(function(){ $("a").click(function(event){ alert("menu 1!"); event.preventdefault(); ); ); Comment pensez vous qu il faut faire pour différencier les différents clics sur les menus?