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) getlestodos() * lestodos Todo texte: String actif : boolean 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 4/ Partie pur Web 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); 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 la ou 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>

5 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> </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); ); ); ); 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;

6 ul { list-style: none; margin: 0; padding: 4px 4px 4px 4px; ul > li{ display: inline; div#menu{ 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?