14 Application web MVC dans une architecture 3tier – Exemple 1 14.1 Présentation
14.7 Tests de la couche [service] Un test JUnit est écrit pour la couche [service] :
14.8.2 Les pages JSP / JSTL de l’application La vue [list.jsp]
Son code est le suivant :
1. <%@ page language="java" pageEncoding="ISO-8859-1" contentType="text/html;charset=ISO-8859-1"%> 2. <%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
3. <%@ taglib uri="/WEB-INF/taglibs-datetime.tld" prefix="dt" %> 4.
5. <html>
6. <head>
7. <title>MVC - Personnes</title>
8. </head>
9. <body background="<c:url value="/ressources/standard.jpg"/>">
10. <h2>Liste des personnes</h2>
11. <table border="1"> 12. <tr> 13. <th>Id</th> 14. <th>Version</th> 15. <th>Prénom</th> 16. <th>Nom</th> 17. <th>Date de naissance</th> 18. <th>Marié</th> 19. <th>Nombre d'enfants</th> 20. <th></th> 21. </tr>
22. <c:forEach var="personne" items="${personnes}">
23. <tr>
24. <td><c:out value="${personne.id}"/></td>
25. <td><c:out value="${personne.version}"/></td>
26. <td><c:out value="${personne.prenom}"/></td>
27. <td><c:out value="${personne.nom}"/></td>
28. <td><dt:format pattern="dd/MM/yyyy">${personne.dateNaissance.time}</dt:format></td>
29. <td><c:out value="${personne.marie}"/></td>
30. <td><c:out value="${personne.nbEnfants}"/></td>
31. <td><a href="<c:url value="/do/edit?id=${personne.id}"/>">Modifier</a></td>
32. <td><a href="<c:url value="/do/delete?id=${personne.id}"/>">Supprimer</a></td>
33. </tr>
34. </c:forEach>
35. </table>
36. <br>
37. <a href="<c:url value="/do/edit?id=-1"/>">Ajout</a>
38. </body>
39.</html>
40.
• cette vue reçoit un élément dans son modèle :
• l'élément [personnes] associé à un objet de type [ArrayList] d’objets de type [Personne]
• lignes 22-34 : on parcourt la liste ${personnes} pour afficher un tableau HTML contenant les personnes du groupe. • ligne 31 : l’url pointée par le lien [Modifier] est paramétrée par le champ [id] de la personne courante afin que le
contrôleur associé à l’url [/do/edit] sache quelle est la personne à modifier. • ligne 32 : il est fait de même pour le lien [Supprimer].
• ligne 28 : pour afficher la date de naissance de la personne sous la forme JJ/MM/AAAA, on utilise la balise <dt> de la bibliothèque de balise [DateTime] du projet Apache [Jakarta Taglibs] :
Le fichier de description de cette bibliothèque de balises est défini ligne 3.
• ligne 37 : le lien [Ajout] d'ajout d'une nouvelle personne a pour cible l'url [/do/edit] comme le lien [Modifier] de la ligne 31. C'est la valeur -1 du paramètre [id] qui indique qu'on a affaire à un ajout plutôt qu'une modification.
La vue [edit.jsp]
Elle sert à afficher le formulaire d’ajout d’une nouvelle personne ou de modification d’une personne existante :
la vue [list.jsp]
la vue [edit.jsp] Le code de la vue [edit.jsp] est le suivant :
1. <%@ page language="java" pageEncoding="ISO-8859-1" contentType="text/html;charset=ISO-8859-1"%> 2. <%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
3. <%@ taglib uri="/WEB-INF/taglibs-datetime.tld" prefix="dt" %> 4.
5. <html>
6. <head>
7. <title>MVC - Personnes</title>
8. </head>
9. <body background="../ressources/standard.jpg">
10. <h2>Ajout/Modification d'une personne</h2>
11. <c:if test="${erreurEdit != ''}">
12. <h3>Echec de la mise à jour :</h3>
13. L'erreur suivante s'est produite : ${erreurEdit}
14. <hr>
15. </c:if>
16. <form method="post" action="<c:url value="/do/validate"/>">
17. <table border="1"> 18. <tr> 19. <td>Id</td> 20. <td>${id}</td> 21. </tr> 22. <tr> 23. <td>Version</td> 24. <td>${version}</td> 25. </tr> 26. <tr> 27. <td>Prénom</td> 28. <td>
30. </td> 31. <td>${erreurPrenom}</td> 32. </tr> 33. <tr> 34. <td>Nom</td> 35. <td>
36. <input type="text" value="${nom}" name="nom" size="20">
37. </td>
38. <td>${erreurNom}</td>
39. </tr>
40. <tr>
41. <td>Date de naissance (JJ/MM/AAAA)</td>
42. <td>
43. <input type="text" value="${dateNaissance}" name="dateNaissance">
44. </td> 45. <td>${erreurDateNaissance}</td> 46. </tr> 47. <tr> 48. <td>Marié</td> 49. <td> 50. <c:choose>
51. <c:when test="${marie}">
52. <input type="radio" name="marie" value="true" checked>Oui 53. <input type="radio" name="marie" value="false">Non
54. </c:when>
55. <c:otherwise>
56. <input type="radio" name="marie" value="true">Oui
57. <input type="radio" name="marie" value="false" checked>Non 58. </c:otherwise> 59. </c:choose> 60. </td> 61. </tr> 62. <tr> 63. <td>Nombre d'enfants</td> 64. <td>
65. <input type="text" value="${nbEnfants}" name="nbEnfants">
66. </td>
67. <td>${erreurNbEnfants}</td>
68. </tr>
69. </table>
70. <br>
71. <input type="hidden" value="${id}" name="id">
72. <input type="hidden" value="${version}" name="version">
73. <input type="submit" value="Valider">
74. <a href="<c:url value="/do/list"/>">Annuler</a>
75. </form>
76. </body>
77.</html>
Cette vue présente un formulaire d'ajout d'une nouvelle personne ou de mise à jour d'une personne existante. Par la suite et pour simplifier l'écriture, nous utiliserons l'unique terme de [mise à jour]. Le bouton [Valider] (ligne 73) provoque le POST du formulaire à l'url [/do/validate] (ligne 16). Si le POST échoue, la vue [edit.jsp] est réaffichée avec la ou les erreurs qui se sont produites, sinon la vue [list.jsp] est affichée.
• la vue [edit.jsp] affichée aussi bien sur un GET que sur un POST qui échoue, reçoit les éléments suivants dans son modèle :
attribut GET POST
id identifiant de la personne mise à jour
idem
version sa version idem
prenom son prénom prénom saisi
nom son nom nom saisi
dateNaissance sa date de naissance date de naissance saisie
marie son état marital état marital saisi
nbEnfants son nombre d'enfants nombre d'enfants saisi
erreurEdit vide un message d'erreur signalant un échec de l'ajout ou de la
modification au moment du POST provoqué par le bouton [Envoyer]. Vide si pas d'erreur.
erreurPrenom vide signale un prénom erroné – vide sinon
erreurNom vide signale un nom erroné – vide sinon
attribut GET POST
erreurNbEnfants vide signale un nombre d'enfants erroné – vide sinon
• lignes 11-15 : si le POST du formulaire se passe mal, on aura [erreurEdit!=''] et un message d'erreur sera affiché. • ligne 16 : le formulaire sera posté à l’url [/do/validate]
• ligne 20 : l'élément [id] du modèle est affiché • ligne 24 : l'élément [version] du modèle est affiché • lignes 26-32 : saisie du prénom de la personne :
• lors de l’affichage initial du formulaire (GET), ${prenom} affiche la valeur actuelle du champ [prenom] de l’objet [Personne] mis à jour et ${erreurPrenom} est vide.
• en cas d’erreur après le POST, on réaffiche la valeur saisie ${prenom} ainsi que le message d’erreur éventuel ${erreurPrenom}
• lignes 33-39 : saisie du nom de la personne
• lignes 40-46 : saisie de la date de naissance de la personne
• lignes 47-61 : saisie de l’état marié ou non de la personne avec un bouton radio. On utilise la valeur du champ [marie] de l’objet [Personne] pour savoir lequel des deux boutons radio doit être coché.
• lignes 62-68 : saisie du nombre d’enfants de la personne
• ligne 71 : un champ HTML caché nommé [id] et ayant pour valeur le champ [id] de la personne en cours de mise à jour, -1 pour un ajout, autre chose pour une modification.
• ligne 72 : un champ HTML caché nommé [version] et ayant pour valeur le champ [id] de la personne en cours de mise à jour.
• ligne 73 : le bouton [Valider] de type [Submit] du formulaire
• ligne 74 : un lien permettant de revenir à la liste des personnes. Il a été libellé [Annuler] parce qu’il permet de quitter le formulaire sans le valider.
La vue [exception.jsp]
Elle sert à afficher une page signalant qu’il s’est produit une exception non gérée par l’application et qui est remontée jusqu’àu serveur web.
Par exemple, supprimons une personne qui n’existe pas dans le groupe :
la vue [list.jsp] - il n’y a pas de personne d’id=7 la vue [exception.jsp] – on a demandé la suppression de la personne d’id=7 en tapant à la main l’url dans le navigateur.
Le code de la vue [exception.jsp] est le suivant :
1. <%@ page language="java" pageEncoding="ISO-8859-1" contentType="text/html;charset=ISO-8859-1"%> 2. <%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
3. <%@ page isErrorPage="true" %> 4. 5. <% 6. response.setStatus(200); 7. %> 8. 9. <html> 10. <head>
11. <title>MVC - Personnes</title>
12. </head>
13. <body background="<c:url value="/ressources/standard.jpg"/>">
14. <h2>MVC - personnes</h2>
15. L'exception suivante s'est produite :
16. <%= exception.getMessage()%> 17. <br><br>
18. <a href="<c:url value="/do/list"/>">Retour à la liste</a>
19. </body>
20.</html>
• cette vue reçoit une clé dans son modèle l'élément [exception] qui est l’exception qui a été interceptée par le serveur web. Pour que cet élément soit inclus dans le modèle de la page JSP par le serveur web, il faut que la page ait défini la balise de la ligne 3.
• ligne 6 : on fixe à 200 le code d'état HTTP de la réponse. C'est le premier entête HTTP de la réponse. Le code 200 signifie au client que sa demande a été honorée. Généralement un document HTML a été intégré dans la réponse du serveur. C'est le cas ici. Si on ne fixe pas à 200 le code d'état HTTP de la réponse, il aura ici la valeur 500 qui signifie qu'il s'est produit une erreur. En effet, le serveur web ayant intercepté une exception non gérée trouve cette situation anormale et le signale par le code 500. La réaction au code HTTP 500 diffère selon les navigateurs : Firefox affiche le document HTML qui peut accompagner cette réponse alors qu'IE ignore ce document et affiche sa propre page. C'est pour cette raison que nous avons remplacé le code 500 par le code 200.
• ligne 16 : le texte de l’exception est affiché
• ligne 18 : on propose à l’utilisateur un lien pour revenir à la liste des personnes
La vue [erreurs.jsp]
Elle sert à afficher une page signalant les erreurs d'initialisation de l'application, c.a.d. les erreurs détectées lors de l'exécution de la méthode [init] de la servlet du contrôleur. Ce peut être par exemple l'absence d'un paramètre dans le fichier [web.xml] comme le montre l'exemple ci-dessous :
Le code de la page [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. <%@ taglib uri="/WEB-INF/c.tld" prefix="c" %> 5.
6. <html>
7. <head>
8. <title>MVC - Personnes</title>
9. </head>
10. <body>
11. <h2>Les erreurs suivantes se sont produites</h2>
12. <ul>
13. <c:forEach var="erreur" items="${erreurs}">
14. <li>${erreur}</li>
15. </c:forEach>
16. </ul>
17. </body>
18.</html>
La page reçoit dans son modèle un élément [erreurs] qui est un objet de type [ArrayList] d'objets [String], ces derniers étant des messages d'erreurs. Ils sont affichés par la boucle des lignes 13-15.