4 Développement MVC (Modèle – Vue – Contrôleur) Une application web a souvent une architecture 3tier :
1. POST /URL HTTP/1 2 Host: localhost:
5.5 Le code des vues
Nous commençons notre écriture de l'application web par celle de ses vues. Celles-ci permettent de cerner les besoins de l'utilisateur en termes d'interface graphique et peuvent être testées sans la présence du contrôleur.
5.5.1 La vue [formulaire]
Cette vue est celle du formulaire de saisie du nom et de l'âge :
n° type HTML nom rôle
1 <input type= "text "> txtNom saisie du nom 2 <input type= "text "> txtAge saisie de l'âge
3 <input type= "submit "> envoi des valeurs saisies au serveur à l'url /personne1/main
4 <input type= "reset "> pour remettre la page dans l'état où elle a été reçue initialement par le navigateur 5 <input type= "button "> pour effacer les contenu des champs de saisie [1] et [2]
1
2
Elle est générée par la page JSP [formulaire.jsp]. Son modèle est constitué des éléments suivants :
• [nom] : un nom (String) trouvé dans les attributs de session associé à la clé "nom" • [age] : un âge (String) trouvé dans les attributs de session associé à la clé "age"
La vue [formulaire] est obtenue lorsque l'utilisateur demande l'url [/personne1/main], c.a.d. l'url du contrôleur [ServletPersonne]. Le code de la page JSP [formulaire.jsp] qui génère la vue [formulaire] est le suivant :
1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" 2. pageEncoding="ISO-8859-1"%>
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4. <%
5. // on récupère les données du modèle
6. String nom=(String)request.getAttribute("nom"); 7. String age=(String)request.getAttribute("age"); 8. %> 9. 10.<html> 11. <head>
12. <title>Personne - formulaire</title>
13. </head>
14. <body>
15. <center>
16. <h2>Personne - formulaire</h2>
17. <hr>
18. <form method="post">
19. <table>
20. <tr>
21. <td>Nom</td>
22. <td><input name="txtNom" value="<%= nom %>" type="text" size="20"></td>
23. </tr>
24. <tr>
25. <td>Age</td>
26. <td><input name="txtAge" value="<%= age %>" type="text" size="3"></td>
27. </tr>
28. <tr>
29. </table>
30. <table>
31. <tr>
32. <td><input type="submit" value="Envoyer"></td>
33. <td><input type="reset" value="Rétablir"></td>
34. <td><input type="button" value="Effacer"></td>
35. </tr>
36. </table>
37. <input type="hidden" name="action" value="validationFormulaire">
38. </form>
39. </center>
40. </body>
41.</html>
42.
• lignes 6-7 : la page JSP commence par récupérer dans la requête [request] les éléments [nom, age] de son modèle. Dans le fonctionnement normal de l'application, ce sera le contrôleur [ServletPersonne] qui construira ce modèle. • lignes 18-38 : la page JSP va générer un formulaire HTML (balise <form>)
• ligne 18 : la balise <form> n'a pas d'attribut action pour désigner l'url qui devra traiter les valeurs postées par le bouton [Envoyer] de type submit (ligne 32). Les valeurs du formulaire seront alors postées à l'url à partir de laquelle a été obtenue le formulaire, c'est à dire l'url du contrôleur [ServletPersonne]. Ainsi celui-ci est-il utilisé à la fois pour générer le formulaire vide demandé initialement par un GET et traiter les données saisies qui lui seront postées avec le bouton [Envoyer].
• les valeurs postées sont celles des champs HTML [txtNom] (ligne 22) et [txtAge] (ligne 26) et [action] (ligne 37). Ce dernier paramètre va permettre au contrôleur de savoir ce qu'il doit faire.
• à l'affichage initial du formulaire, les champs de saisie [txtNom, txtAge] sont initialisés respectivement avec les variables [nom] (ligne 22) et [age] (ligne 26). Ces variables obtiennent leurs valeurs d'attributs de la requête (lignes 6- 7), attributs qu'on sait initialisés par la servlet. C'est donc cette dernière qui fixe le contenu initial des champs de saisie du formulaire.
• ligne 33 : le bouton [Rétablir] de type [reset] permet de remettre le formulaire dans l'état où il était lorsque le navigateur l'a reçu.
• ligne 34 : le bouton [Effacer] de type [reset] n'a pour l'instant aucune fonction.
Par la suite, nous appellerons cette vue, la vue [formulaire(nom, age)] lorsque nous voudrons préciser à la fois le nom de la vue et son modèle. Par ailleurs, on se rappellera que lorsque l'utilisateur clique sur le bouton [Envoyer], les paramètres [txtNom, txtAge] sont postés à l'url [/personne1/main].
5.5.2 La vue [reponse]
Cette vue affiche les valeurs saisies dans le formulaire lorsque celles-ci sont valides :
vue [formulaire]
vue [réponse]
Elle est générée par la page JSP [reponse.jsp]. Son modèle est constitué des éléments suivants :
• [nom] : un nom (String) qui sera trouvé dans les attributs de session, associé à la clé "nom" • [age] : un âge (String) qui sera trouvé dans les attributs de session, associé à la clé "age" Le code de la page JSP [reponse.jsp] est le suivant :
1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" 2. pageEncoding="ISO-8859-1"%>
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4. <%
5. // on récupère les données du modèle
6. String nom=(String)request.getAttribute("nom"); 7. String age=(String)request.getAttribute("age"); 8. %> 9. 10.<html> 11. <head>
12. <title>Personne</title>
13. </head> 14. <body> 15. <h2>Personne - réponse</h2> 16. <hr> 17. <table> 18. <tr> 19. <td>Nom</td> 20. <td><%= nom %> 21. </tr> 22. <tr> 23. <td>Age</td> 24. <td><%= age %> 25. </tr> 26. </table> 27. </body> 28.</html> 29.
• lignes 6-7 : la page JSP commence par récupérer dans la requête [request] les éléments [nom, age] de son modèle. Dans le fonctionnement normal de l'application, ce sera le contrôleur [ServletPersonne] qui construira ce modèle. • les éléments [nom, age] du modèle sont ensuite affichés lignes 20 et 24
Par la suite, nous appelons cette vue, la vue [réponse(nom, age)].
5.5.3 La vue [erreurs]
vue [formulaire]
vue [erreurs]
Elle est générée par la page JSP [erreurs.jsp]. Son modèle est constitué des éléments suivants :
• [erreurs] : une liste (ArrayList) de messages d'erreur qui sera trouvée dans les attributs de requête, associée à la clé "erreurs"
Le code de la page JSP [erreurs.jsp] est le suivant :
1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" 2. pageEncoding="ISO-8859-1"%>
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4. <%@ page import="java.util.ArrayList" %> 5.
6. <%
7. // on récupère les données du modèle
8. ArrayList erreurs=(ArrayList)request.getAttribute("erreurs"); 9. %>
10. 11.<html>
12. <head>
13. <title>Personne</title>
14. </head>
15. <body>
16. <h2>Les erreurs suivantes se sont produites</h2>
17. <ul>
18. <%
19. for(int i=0;i<erreurs.size();i++){
20. out.println("<li>" + (String) erreurs.get(i) + "</li>\n"); 21. }//for 22. %> 23. </ul> 24. </body> 25.</html> 26.
• ligne 8 : la page JSP commence par récupérer dans la requête [request] l'élément [erreurs] de son modèle. Cet élément représente un objet de type ArrayList d'éléments de type String. Ces éléments sont des messages d'erreurs. Dans le fonctionnement normal de l'application, ce sera le contrôleur [ServletPersonne] qui construira ce modèle.
• lignes 18-22 : affichent la liste des messages d'erreur. Pour cela, on est amené à écrire du code Java dans le corps HTML de la page. On doit toujours viser à réduire celui-ci au minimum pour ne pas polluer le code HTML. Nous verrons ultérieurement qu'il existe des solution permettant de réduire la quantité de code Java dans les pages JSP. • ligne 4 : à noter la balise d'importation des paquetages nécessaires à la page JSP
Par la suite, nous appelons cette vue, la vue [erreurs(erreurs)].