Accueil

Une introduction aux servlets et aux JSP

Deuxième partie


Partie  1  2  3

Quelle heure est-il ?

Nous voudrions, maintenant, afficher la date courante à la place de "Ceci est une date." Pour cela, nous allons utiliser la classe java.util.Date.

Pour créer une instance de la classe java.util.Date qui contient la date courante, il suffit d'appeler son constructeur sans argument — new java.util.Date(). Reste à savoir comment l'afficher dans notre JSP !

En fait, c'est relativement simple : il suffit d'encadrer l'appel du constructeur avec <%= et %>. On obtient alors ce que l'on appelle une expression.

Dans la JSP, remplacez "Ceci est une date" par l'expression <%= new java.util.Date() %>, sauvegardez le fichier et appelez à nouveau la JSP dans votre navigateur. Vous constatez que la page affiche la date — et l'heure — courante. Que s'est-il passé ?

Tout d'abord, le serveur HTTP a reçu la requête et l'a transmise au moteur de servlet. Celui-ci s'est rendu compte que la JSP avait été modifiée et, par conséquent, il l'a compilée à nouveau. Ensuite, il l'a exécutée. Lors de cette exécution, la JSP a généré un document HTML correspondant au code JSP dans lequel l'expression a été remplacée par sa valeur, c'est-à-dire la date et l'heure du jour. Enfin, le moteur de servlet a transmis ce document au serveur HTTP qui lui-même l'a renvoyé au navigateur.

Gardez toujours à l'esprit que les instructions Java exprimées dans la page JSP sont exécutées du côté du moteur de servlet et non pas du côté du navigateur ! Pour vous en assurer, vous pouvez afficher le code source du document reçu par votre navigateur — pour cela, vous pouvez choisir l'option "Source" dans le menu "Afficher" si votre navigateur est Internet Explorer. Vous constaterez que l'instruction <%= new java.util.Date() %> a été remplacé par la date courante.

Vous pourriez répéter ?

Si nous sommes effectivement parvenus à afficher la date, il faut bien avouer qu'elle n'est pas très lisible. Heureusement, il existe une classe — java.text.SimpleDateFormat — qui permet d'obtenir une présentation plus adaptée.

Afin de pouvoir utiliser cette classe, il faut d'abord l'instancier. Ensuite, il suffira de fournir la date fraîchement créée à la méthode format de cet objet. Celle-ci retournera la date correctement mise en forme.

Pour ce qui est de l'affichage de la valeur retournée par la méthode format, nous savons qu'il suffit d'utiliser une expression. Mais pour l'instanciation de la classe, il nous faut introduire une nouvelle structure JSP, la scriptlet, qui est délimitée par <% et %>.

Une scriplet, c'est un bloc de code dans lequel on peut déclarer des variables, appeler des fonctions, réaliser des tests et des boucles. Elle ne produit aucun affichage mais permet souvent d'en préparer un.

Dans notre cas, la préparation va consister à créer un objet de type java.text.SimpleDateFormat. Placez la scriptlet suivante avant l'affichage de la date — par exemple, et pour des raisons de lisibilité, juste avant la balise <table> :

<% java.text.SimpleDateFormat dateFormatter = new java.text.SimpleDateFormat(); %>

Cette scriplet déclare une variable dateFormatter et lui affecte un objet de type java.text.SimpleDateFormat. Il suffit alors de remplacer <%= new java.util.Date() %> par <%= dateFormatter.format(new java.util.Date()) %> et le tour est joué !

Vive la simplicité !

Ce qui est dommage dans le code précédent, c'est que nous avons dû utiliser les noms complets des classes — par exemple java.util.Date — plutôt que les noms courts — par exemple Date — parce que dans le dernier cas, le compilateur de JSP ne saurait pas quelle classe utiliser.

Ce que nous voudrions c'est utiliser les noms courts pour rendre le code plus lisible tout en indiquant au compilateur de JSP dans quel package se trouvent nos classes. Pour cela, on peut utiliser une directive — c'est une information que l'on fournit au compilateur. Les directives sont délimitées par <%@ et %> et peuvent apparaître n'importe où dans la page — mais on préfère les placer tout au début.

Ajoutez donc les directives qui suivent en haut de la JSP après avoir remplacé java.uti.Date par Date et java.text.SimpleDateFormat par SimpleDateFormat :

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>

Ces directives sont des directives d'importation ; la première indique que dans la JSP, SimpleDateFormat correspondra à java.text.SimpleDateFormat.

Quel est ton nom ?

Notre JSP s'anime peu à peu ; nous allons maintenant permettre à l'utilisateur de spécifier son nom dans le message. Pour atteindre ce but, deux questions se posent à nous : comment fournir son nom à la JSP et comment le récupérer à l'intérieur de celle-ci.

Il est possible de passer des paramètres à toute page HTML et a fortiori à toutes les JSP. Par exemple, l'URL suivante permet d'appeler notre JSP :

http://localhost:8080/forum/viewMessage.jsp

Mais on peut aussi l'appeler en lui fournissant un paramètre dont le nom est "author" et la valeur est "Mangez" en utilisant :

http://localhost:8080/forum/viewMessage.jsp?author=Mangez

Bien ! Vous devez maintenant vous demander comment récupérer la valeur du paramètre de la JSP. C'est très simple : dans toute JSP, il existe un objet prédéfini nommé request — du type javax.servlet.http.HttpServletRequest — qui encapsule la requête du client — ici notre URL. À partir de cet objet, il est notamment possible de récupérer la valeur de notre paramètre. Pour cela, il suffit de passer le nom de ce dernier à la méthode getParameter de l'objet request. Celle-ci retourne alors sa valeur.

Par conséquent, vous vous en doutez peut-être, nous allons remplacer "ceci est un auteur" par <%= request.getParameter("author") %> dans notre JSP.

Testez votre JSP avec différentes valeurs — pour l'instant n'utilisez que des lettres : évitez les espaces et les caractères de ponctuation ; la JSP affiche les valeurs que vous spécifiez.

Mais que se passe-t-il lorsque le paramètre n'est pas spécifié — c'est à dire quand vous utilisez l'URL http://localhost:8080/forum/viewMessage.jsp ? Vous devriez voir apparaître "null." C'est ce que la méthode getParameter retourne lorsqu'elle ne trouve pas le paramètre spécifié.

J'imagine que vous souhaiteriez afficher un message plus explicite. Pour cela, nous allons tout d'abord stocker dans une variable le retour de la fonction et ce en utilisant une scriptlet :

<% String author = request.getParameter("author"); %>

Puis nous allons remplacer l'expression <%= request.getParameter("author") %> par l'expression suivante qui utilise l'opérateur ternaire :

<%= (author != null) ? author : "auteur non spécifié" %>

L'opérateur ternaire possède la structure suivante :

Vous l'avez deviné, l'expression précédente affiche le contenu de la variable author si celle-ci n'est pas nulle, sinon elle affiche "auteur non spécifié."

Faciliter la saisie

Et si nous apportions un peu de confort à l'utilisateur et un peu d'ergonomie à notre application. Parce qu'il faut bien avouer que saisir son nom dans l'URL n'est pas ce qu'il y a de plus pratique !

Pour cela, nous allons créer un formulaire. C'est-à-dire, dans notre cas, une page web comprenant un champ à remplir — le nom de l'auteur — et un bouton de validation pour transmettre les informations à notre JSP.

Copiez simplement le code HTML suivant dans un fichier nommé editMessage.html que vous placerez dans le même répertoire que la JSP.

<title>Editer un message</title>

<form action="viewMessage.jsp">
  Auteur <input type="text" name="author"> <input type="submit" value="Valider">
</form>

Que signifie ce code ? La portion encadrée par les balises <form> et </form> désigne le formulaire. Le paramètre action de la balise <form> précise l'URL du document auquel transmettre les données. Dans notre cas, il s'agit du fichier viewMessage.jsp. Comme celui-ci se trouve dans le même répertoire que le formulaire, nous pouvons nous contenter du nom de la JSP comme URL.

La première balise <input> est un champ texte — ce qui est indiqué par type="text" — qui va permettre de saisir le paramètre author — le nom du paramètre est spécifié avec l'attribut name. Quant à la deuxième balise <input>, il s'agit du bouton qui permet d'envoyer les données à notre JSP — c'est indiqué par type="submit". Le nom affiché dans le bouton est spécifié dans l'attribut value.

Testez ce formulaire. Pour cela, saisissez son URL — http://localhost:8080/forum/editMessage.html — dans votre navigateur. Le formulaire s'affiche. Tapez votre nom dans le champ correspondant et appuyez sur le bouton de validation : viewMessage.jsp apparaît et affiche le nom saisi. Examinez l'URL affichée dans le navigateur : elle est similaire à celle que nous tapions à la main tout à l'heure.

Revenez au formulaire et saisissez maintenant votre prénom suivi de votre nom — séparés par une espace. Examinez à nouveau l'URL, vous remarquerez que l'espace a été transformée en + : il existe de nombreux caractères qui sont ainsi transformés parce qu'il ont un sens particulier dans une URL. Mais rassurez-vous, la méthode getParameter se charge de faire la transformation inverse afin de retrouver le texte initial !

Allons plus loin

Nous savons maintenant comment passer un paramètre à une JSP. Le mécanisme est le même pour en passer plusieurs. Nous allons donc en profiter pour compléter notre formulaire et pour mettre à jour notre JSP d'affichage.

Comme pour viewMessage.jsp, nous allons utiliser un tableau pour mettre en page editMessage.html. Modifiez ce dernier pour que le formulaire permette de saisir le titre et le corps du message en plus du nom de l'auteur. Vous devriez obtenir quelque chose ressemblant à ceci :

<title>Editer un message</title>

<form action="viewMessage.jsp">
  <table>
    <tr> <td>Titre</td>  <td><input type="text" name="title"></td>      </tr>  
    <tr> <td>Corps</td>  <td><input type="text" name="body"></td>       </tr>
    <tr> <td>Auteur</td> <td><input type="text" name="author"></td>     </tr>
    <tr> <td></td>       <td><input type="submit" value="Valider"></td> </tr>
  </table>
</form>

Parallèlement, modifiez la JSP pour qu'elle puisse récupérer et afficher les différents paramètres :

<%@ page import="java.text.*" %>
<%@ page import="java.util.*" %>

<title>Afficher un message</title>

<%
  String title = request.getParameter("title");
  String body = request.getParameter("body");
  String author = request.getParameter("author");
%>

<% SimpleDateFormat dateFormatter = new SimpleDateFormat(); %>

<table>
  <tr> <td>Titre :</td>  <td><%= (title != null) ? title : "titre non spécifié" %></td>    </tr>
  <tr> <td>Corps :</td>  <td><%= (body != null) ? body : "corps non spécifié" %></td>      </tr>
  <tr> <td>Auteur :</td> <td><%= (author != null) ? author : "auteur non spécifié" %></td> </tr>
  <tr> <td>Date :</td>   <td><%= dateFormatter.format(new Date()) %></td>                  </tr>
</table>

Vous constaterez que les scriptlets correspondant à la récupération des 3 paramètres ont été fusionnées. Nous aurions pu ne pas le faire comme nous aurions pu fusionner aussi la scriptlet définissant la variable dateFormatter. Sachez que vous êtes totalement libre ! Utilisez donc le choix qui vous semble le plus logique et le plus lisible.

Testez votre nouveau formulaire avec des valeurs simples et observez l'URL affichée dans votre navigateur après avoir appuyé sur le bouton de validation, vous remarquerez que les différents paramètres sont séparés par des esperluettes & :

http://.../viewMessage.jsp?title=titre&body=corps&author=auteur

Améliorer la saisie du corps du message

Un corps de message est en général assez long. Le champ qui permet de le saisir est donc peu adapté. Il existe un autre type de champ qui est plus adéquat ici. Pour le mettre en œuvre, remplacez simplement dans le formulaire <input type="text" name="body"> par <textarea name="body"></textarea>. Il s'agit d'une zone de saisie multi-lignes qui affiche une barre de défilement lorsque le texte saisi est trop long pour être affiché.

Masquer les paramètres dans l'URL

Jusqu'à présent, nous avons constaté que lorsque nous validions le formulaire, les paramètres s'affichaient dans l'URL. Il existe un moyen de les masquer. Il suffit de remplacer, dans editMessage.html, <form action="viewMessage.jsp"> par <form action="viewMessage.jsp" method="POST">.

Pour le tester, remplissez le formulaire et validez-le. Vous constaterez que les données sont bien transmises — puisqu'elles sont affichées — mais qu'elles n'apparaissent plus dans l'URL.

Partie  1  2  3