docLes vues en Java EE : XHTML, CSS et JSP
download 
Plainte Transcription
Les vues en Java EE : XHTML, CSS et JSP
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
Les vues en Java EE : XHTML, CSS et JSP
La partie vue dans une application java EE concerne la conception et la création des pages
visualisées par le client (navigateur dans le cas des applications web).
Le but ultime de la création d’une page est son affichage dans un navigateur. Elle doit donc
utiliser les langages compris par les navigateurs : HTML, XHTML, CSS et JavaScript.
I.
HTML :
Hypertext Markup Language (HTML) est le langage qui prédomine dans les pages web. Il
repose sur SGML (Standard Generalized Markup Language), un métalangage standard
permettant de définir des langages à marqueurs. HTML utilise des balises, ou marqueurs,
pour structurer le texte en paragraphes, listes, liens, boutons, zones de texte, etc.
Une page HTML est un document texte utilisé par les navigateurs pour présenter du texte et
des images : ce sont des fichiers texte portant souvent l’extension .html ou .htm. Une page
web est formée d’un contenu, de marqueurs permettant de changer certains aspects de ce
contenu et d’objets externes comme des images, des vidéos, du code JavaScript ou des
fichiers CSS.
La section "Récapitulatif" du chapitre précédent a montré deux pages JSF, dont l’une
affichait un formulaire pour créer un nouveau livre. Ci-dessous une page écrite en HTML
pur, sans utiliser aucun marqueur JSF.
La page AjoutLivre.html
<h1>Creer un Nouveau Livre</h1>
<hr>
<table border=0>
<TR>
<TD>Code du Livre :</TD>
<TD><input type=text/></td>
</tr>
<tr>
<td>Titre :</td>
<td><input type=text/></td>
</tr>
<tr>
<td>Prix :</td>
<td><input type=text/></td>
</tr>
<tr>
<td>Description :
<td><textarea name=textarea cols=20 rows=5></textarea>
</tr>
<TR>
<TD>Nombre de pages :
<td><input type=text/>
</tr>
<tr>
<td>Illustrations :
1
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
<td><input type=checkbox/>
</tr>
</table>
<input type=submit value=Ajouter>
<hr>
<body>
<html>
Normalement, une page HTML valide commence par un marqueur <html> qui agit comme
un conteneur du document. Il est suivi des marqueurs <head> et <body>. Ce dernier
contient la partie visible ici, un tableau constitué de labels et de champs de saisie, et un
bouton. Comme vous pouvez le constater, le fichier AjoutLivre.html ci-dessus ne
respecte pas ces règles mais les navigateurs peuvent afficher des pages HTML non valides
(jusqu’à un certain point).
Et on obtient alors, la représentation graphique souhaitée. Pourtant, le code ci-dessus n’est
pas correctement formaté en termes de XML :
La page n’a pas de marqueurs <html>, <head> ou <body>.
Le marqueur <input type=submit value=Ajouter> n’est pas fermé.
Les marqueurs mélangent les majuscules et les minuscules (<TR> et </tr>
apparaissent dans le code).
La plupart des navigateurs autorisent ce type d’erreur et afficheront correctement le
formulaire. En revanche, si vous voulez traiter ce document avec des parseurs XML, par
exemple, le traitement échouera. Pour en comprendre la raison, étudions une page web qui
utilise une structure XML stricte avec XHTML (eXtensible Hypertext Markup Language).
II.
XHTML :
XHTML a été créé peu de temps après HTML 4.01. Ses racines puisent dans HTML, mais avec
une reformulation stricte en XML. Ceci signifie qu’un document XHTML est un document
XML qui respecte un certain schéma et peut être représenté graphiquement par les
navigateurs.
Un fichier XHTML (qui porte l’extension .xhtml) peut être directement utilisé comme du
XML ou être affiché dans un navigateur. Par rapport à HTML, il a l’avantage de permettre une
validation et une manipulation du document à l’aide d’outils XML standard (XSL : eXtensible
Stylesheet Language ou XSLT : XSL Transformations,…).
Ci-dessous la version XHTML de la page web précédente.
La page AjoutLivre.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"
lang="en">
2
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
<head>
<title>Creates a new book</title>
</head>
<body>
<h1> Creer un Nouveau Livre </h1>
<hr/>
<table border="0">
<tr>
<td>Code du Livre :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Titre :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Prix :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Description :</td>
<td><textarea name="textarea" cols="20" rows="5"></textarea></td>
</tr>
<tr>
<td>Nombre de pages :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Illustrations :</td>
<td><input type="checkbox"/></td>
</tr>
</table>
<input name="" type="submit" value="Ajouter"/>
<hr/>
</body>
</html>
Notez les différences entre les Listings les deux fichiers : ce dernier respecte une structure
stricte et contient les marqueurs <html>, <head> et <body> ; tous les marqueurs sont
fermés, même les vides (chaque <td> est fermé et on utilise <hr/> au lieu de <hr>).
Les valeurs des attributs sont toujours entre apostrophes ou entre guillemets (<table
border="0"> ou <table border=’0’>, mais pas <table border=0>).
Tous les marqueurs sont en minuscules (<tr> au lieu de <TR>).
Le respect strict des règles syntaxiques de XML et les contraintes de schéma rendent
XHTML plus facile à maintenir et à traiter que HTML, et c’est la raison pour laquelle il est
désormais le langage préféré pour les pages web.
3
Institut Supérieur De Gestion De Tunis
3ème LFIG
III.
cours AJEE
BAYOUDHI Chaouki
CSS :
CSS (Cascading Style Sheets) sert à décrire la présentation d’un document écrit en HTML ou
en XHTML. Il permet de définir les couleurs, les polices, la disposition et les autres aspects de
la présentation d’un document et, donc, de séparer son contenu (écrit en XHTML) de sa
présentation (écrite en CSS). Comme HTTP, HTML et XHTML, les spécifications de CSS
sont édictées par le W3C (World Wide Web Consortium).
Supposons, par exemple, que vous vouliez modifier
les labels de la page
AjoutLivre.xhtml pour qu’ils soient tous en italique (font-style: italic), de couleur rouge
(color : #550000) et dans une taille de police plus grande (font-size: 20px;). Au lieu de
répéter ces modifications pour chaque marqueur, il suffit de définir un style CSS (dans un
marqueur <style type="text/css">) et de lui donner un alias (par exemple LesTitres et
LesLignes) : la page appliquera alors ce style pour tous les éléments qui utilisent cet alias
afin de modifier leur présentation (<h1 class=" LesTitres">).
La page AjoutLivre.xhtml avec des styles CSS
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"
lang="en">
<head>
<title>Ajout d’un livre</title>
<style type="text/css">
. LesTitres {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px; color: #550000; font-style: italic;
}
.LesLignes {
font-family: Arial, Helvetica, sans-serif;
color: #000000; font-style: italic;
}
</style>
</head>
<body>
<h1 class=" LesTitres ">Ajout d’un livre</h1>
<hr/>
<table border="0">
<tr>
<td class="LesLignes">Code du livre :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td class="LesLignes">Titre :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td class="LesLignes">Prix :</td>
<td><input type="text"/></td>
4
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
</tr>
<tr>
<td class="LesLignes">Description :</td>
<td><textarea name="textarea" cols="20" rows="5"></textarea></td>
</tr>
<tr>
<td class="LesLignes">Nombre de pages :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td class="LesLignes">Illustrations :</td>
<td><input type="checkbox"/></td>
</tr>
</table>
<input name="" type="submit" value="Ajouter"/>
<hr/>
</body>
</html>
Dans cet exemple, le code CSS est intégré à la page XHTML mais, dans une vraie
application, tous les styles seraient placés dans un fichier à part qui serait importé
par la page web. Le webmestre peut ainsi créer un ou plusieurs fichiers CSS pour
différents groupes de pages et les contributeurs de contenu peuvent écrire ou
modifier leurs pages sans être concernés par l’aspect final de leurs documents.
À l’affichage tous les labels sont désormais en italique et le titre de la page
apparaît en rouge.
IV.
JavaScript :
Les langages que nous avons évoqués jusqu’à maintenant permettent de
représenter le contenu statique et les aspects graphiques d’une page web.
Cependant, une page doit souvent interagir avec l’utilisateur en affichant du
contenu dynamique.
Ce contenu dynamique peut être traité par des technologies côté serveur comme
JSP ou JSF, mais les navigateurs peuvent également en produire de leur côté en
exécutant du code JavaScript.
JavaScript est un langage de script pour le développement web côté client.
Contrairement à ce que son nom pourrait laisser supposer, il n’a rien à voir avec le
langage de programmation Java car c’est un langage interprété et faiblement typé.
Avec JavaScript, il est possible de créer des applications web dynamiques en
écrivant des fonctions qui agissent sur la structure arborescente d’une page. Il a
été standardisé par l’ECMA (European Computer Manufacturers Association)
sous le nom d’ECMAScript.
Toute page écrite en respectant les standards XHTML, CSS et JavaScript devrait
s’afficher et se comporter de façon quasiment identique avec tout navigateur
respectant ces normes.
L’exemple ci-dessous contient un exemple de code JavaScript d’une page qui
affiche un formulaire permettant de saisir des informations sur un livre. Le prix
du livre doit être fourni par l’utilisateur côté client avant d’atteindre le serveur :
une fonction JavaScript (prixValide()) permet de valider ce champ en testant s’il
est vide ou non.
5
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
La page AjoutLivre.xhtml avec du JavaScript
<?xm1 version="1.0" encoding="UTF-8"?>
<!DOCTYPE htm1 PUBLIC "-//W3C//DTD
XHTML 1.0 Transitiona1//EN"
"http://www.w3.org/TR/xhtm11/DTD/xhtm11-transitiona1.dtd">
<htm1 xm1ns="http://www.w3.org/1999/xhtm1" xm1:1ang="fr">
<head>
<tit1e>Ajout d’un Livre</tit1e>
<script type="text/JavaScript">
function prixValide() {
if (document.getE1ementById("prix").va1ue== "") {
document.getE1ementById("prixErreur").innerHTML = "Le prix doit être
mentionné !";
}
</script>
</head>
<body>
<h1>Ajout d’un Livre</h1>
<hr/>
<tab1e border="0">
<tr>
<td>Code du livre :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Titre :</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>Prix :</td>
<td><input id="prix" type="text" onblur="JavaScript:prixValide()"/>
<span id="prixErreur"/>
</td>
</tr>
<tr>
<td>Description :</td>
<td><textarea name=”textarea” cols=”20” rows=”5”></textarea></td>
</tr>
<tr>
<td>Nombre de pages :</td>
<td><input type=”text”/></td>
</tr>
<tr>
<td>Illustrations :</td>
<td><input type=”checkbox”/></td>
</tr>
</table>
<input name=”” type=”submit” value=”Ajouter”/>
<hr/>
6
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
</body>
</html>
Dans le code ci-dessus, la fonction prixValide() est intégrée dans la page au moyen d’un
marqueur <script> et est appelée lorsque le champ de saisie du prix perd le focus
(représenté par l’événement onblur). Elle utilise l’objet document implicite qui représente
la page XHTML.
L’appel getElementById(”prix”) recherche un élément ayant un identifiant « prix »
(<input id=”prix”>) : on récupère sa valeur et l’on teste si elle est vide. Si c’est le cas, la
fonction
recherche
un
autre
élément
appelé
prixErreur
(getElementById(”prixErreur”)) et fixe sa valeur à "Le prix doit être mentionné !".
Cette procédure de validation affichera donc le message d’erreur, si le prix n’a pas été
indiqué.
V.
Java Server Pages (JSP) :
Nous venons de présenter des technologies et des langages, comme XHTML ou CSS, qui
représentent le contenu et l’aspect visuel d’une page web. Pour ajouter de l’interactivité et
modifier dynamiquement des parties d’une page, vous pouvez utiliser des fonctions
JavaScript qui s’exécuteront dans le navigateur mais, la plupart du temps, vous devrez faire
appel à une couche métier d’EJB pour afficher des informations provenant d’une base de
données. Ce contenu dynamique peut être obtenu à l’aide de JSP (ou JSF avec JSP ou Facelets,
comme nous le verrons au chapitre suivant).
JSP a été ajouté à J2EE 1.2 en 1999 et permet de créer dynamiquement des pages web en
réponse à une requête d’un client. Les pages sont traitées sur le serveur et compilées sous
forme de servlets.
Les pages JSP ressemblent à des pages HTML ou XHTML, sauf qu’elles contiennent des
marqueurs spéciaux pour effectuer des traitements sur le serveur et appeler du code Java côté
serveur.
La plupart du travail de JSP repose sur l’API servlet. Les servlets ont été créées pour
permettre à un serveur d’accepter des requêtes HTTP des clients et de créer des réponses
dynamiques. Comme JSP, elles peuvent se servir de n’importe quelle ressource serveur
comme les EJB, les bases de données, les services web et d’autres composants. Les JSP sont
dynamiques parce qu’elles exécutent du code Java pour former une réponse en fonction
d’une requête.
Les JSP s’exécutent sur un serveur dans le conteneur de servlets et répondent aux requêtes
des clients, qui sont des utilisateurs accédant à une application web au moyen d’un
navigateur via HTTP, le même protocole que celui qu’ils utilisent pour demander des pages
XHTML au serveur.
a. Cycle de vie d’une JSP :
Le conteneur de servlets gère le cycle de vie d’une JSP en :
compilant le code JSP dans une servlet
chargeant et initialisant la JSP
7
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
traitant les requêtes des clients et les faisant suivre à la JSP
renvoyant les réponses aux clients (ces réponses ne contiennent que des marqueurs
HTML ou XHTML pour pouvoir s’af%cher dans un navigateur)
déchargeant la JSP et arrêtant de lui envoyer des requêtes (lorsque le serveur
s’arrête, par exemple).
Une page JSP pouvant produire du code HTML ou XHTML, vous pouvez utiliser des
extensions différentes pour l’indiquer – .jsp pour HTML et .jspx pour XHTML.
Remarque :
Une JSP valide peut ne contenir que des marqueurs HTML : vous pourriez sauvegarder son
code dans un fichier .jsp et le déployer dans un conteneur de servlets qui renverrait alors
une simple page HTML. En fait, une page JSP ressemble à du HTML, mais elle peut
également contenir des marqueurs supplémentaires qui permettent d’ajouter du contenu
dynamique afin que les réponses produites dépendent des requêtes.
La spécification JSP définit les éléments suivants :
directives
scripts
actions
Remarque :
Comme nous le verrons dans cette partie du cours, il existe deux syntaxes pour ces éléments :
la syntaxe XML pour les pages XHTML : <jsp:directive attributs/> et la syntaxe JSP (
qui n’est pas conforme à XML) : <%@ attributs %>.
b. Directives :
Les directives fournissent des informations sur la JSP et ne produisent rien. Il existe trois
directives : page, include et taglib.
Les deux syntaxes possibles sont :
<%@ directive attributs %> ou
<jsp:directive attributs />
La directive page :
La directive page sert à indiquer les attributs de page tels que le langage de programmation de
la page (Java dans notre cas), le type MIME (text/plain ; text/html,…), l’encodage des
caractères de la réponse, si la JSP est une page d’erreur, ...
Exemple :
<%@ page contentType=” text/html; ISO-8859-1” language=”java” %> ou
<jsp:directive.page contentType=”text/html; ISO-8859-1” language=”java”/>
La directive include :
La directive include sert à inclure une autre page (HTML, XHTML ou JSP) dans la page
courante. Vous pouvez l’utiliser pour inclure une page standard ( par exemple, un en-tête ou
un pied de page) dans plusieurs JSP.
8
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
Exemple :
<%@ include file=”header.jsp”%> ou
<jsp:directive.include file=”header.jsp” />
La directive taglib :
La directive taglib déclare qu’une page utilise l’une de ces bibliothèques en l’identifiant de
façon unique par une URI et un préfixe.
Avec la syntaxe XML, ces deux informations sont regroupées dans un espace de noms unique
(xmlns).
Exemple :
Dans l’exemple suivant, la bibliothèque de marqueurs http://java.sun.com/jstl/core est
utilisée dans la page via le préfixe c :
<%@ taglib uri=”http://java.sun.com/jstl/core”prefix=”c” %> ou
<jsp:root xmlns:c=”http://java.sun.com/jstl/core”>
c. Scripts :
Les scripts incluent du code Java permettant de manipuler des objets et d’effectuer des
traitements affectant le contenu. Ils sont de trois types : déclaration, scriptlet et expression
Ils peuvent utiliser les syntaxes suivantes :
<%! La declaration %> ou bien
<jsp:declaration>ceci est une déclaration</jsp:declaration>
<% Le scriptlet %> ou bien
<jsp:scriptlet>ceci est un scriptlet</jsp:scriptlet>
<%= L’expression %> ou bien
<jsp:expression>ceci est une expression</jsp:expression>
Les déclarations permettent de déclarer les variables ou les méthodes qui seront disponibles
pour tous les autres scripts de la page.
La déclaration n’apparaît que dans la JSP traduite (c’est-à-dire dans la servlet), pas dans ce qui
est envoyé au client.
Exemple :
L’exemple suivant déclare une instance d’ArrayList qui sera globale à toute la page :
<%! ArrayList lstLv = new ArrayList(); %>
Ou bien, avec la syntaxe XML
<jsp:declaration>
ArrayList lstLv = new ArrayList();
</jsp:declaration>
Les scriptlets contiennent du code Java permettant de décrire les actions à réaliser en
réponse aux requêtes. Ils peuvent servir à effectuer des itérations ou à exécuter
conditionnellement d’autres éléments de la JSP.
9
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
Comme les déclarations, le code d’un scriptlet n’apparaît que dans la JSP traduite (la
servlet).
Exemple :
L’exemple suivant ajoute un objet Lv (Livre) à l’ArrayList déclarée plus haut :
<%
lstLv.add(new Livre(”Java EE”, 20, ”Livre de programmation”, ”2012-345”, 241,
true));
%>
Ou bien avec la syntaxe XML
<jsp:scriptlet>
lstLv.add(new Livre(”Java EE”, 20, ”Livre de programmation”, ”2012-345”, 241,
true));
</jsp:scriptlet>
Les expressions servent à envoyer la valeur d’une expression Java au client. Elles sont
évaluées au moment de la réponse et leur résultat est converti en chaîne de caractères puis
inséré dans le résultat affiché par le navigateur.
Le fragment de code suivant, par exemple, affichera le code d’un livre Lv :
Exemple :
<%= Lv.getCode()%> ou bien
<jsp:expression>Lv.getCode()</jsp:expression> avec la syntaxe XML.
Remarque :
Les déclarations, les scriptlets et les expressions doivent contenir du code Java correct.
Si vous choisissez d’utiliser la syntaxe XML, leur contenu doit également être du XML
valide.
Le code suivant, par exemple, déclare une ArrayList globale de livres en utilisant une
classe générique :
<%! ArrayList<Livre> books = new ArrayList<Livre>(); %>
Si vous voulez faire la même déclaration dans un format XML strict, vous ne pouvez pas
utiliser les symboles < et > car ils sont réservés à l’ouverture et à la fermeture des marqueurs
XML.
Vous devez alors, utiliser une section CDATA (qui signifie Character DATA) afin que le
parseur XML ne tente pas de l’analyser et l’exemple devient
<jsp:declaration><![CDATA[
ArrayList<Livre> books = new ArrayList<Livre>();
]]></jsp:declaration>
10
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
d. Actions :
Les actions standard sont définies par la spécification JSP et forcent la page à effectuer
certaines actions (inclure des ressources externes, faire suivre une requête vers une autre page
ou utiliser les propriétés d’objets Java).
Elles ressemblent à des marqueurs HTML car elles sont représentées par des éléments XML
préfixés par jsp (<jsp:useBean>, <jsp:include>, etc.).
Le Tableau ci-dessous énumère toutes les actions disponibles.
Tableau : Éléments des actions JSP
Action
Description
useBean
Associe une instance d’objet à une portée donnée et à un identifiant.
setProperty
Fixe la valeur d’une propriété d’un bean.
getProperty
Affiche la valeur d’une propriété d’un bean.
include
Permet d’inclure des ressources statiques et dynamiques dans le
même contexte que celui de la page courante.
forward
Fait suivre la requête courante à une ressource statique, une JSP
ou une servlet dans le même contexte que celui de la page courante.
param
Utilisé avec les éléments include, forward et params. La page
incluse ou transférée verra l’objet requête initial avec les paramètres
originaux, plus les nouveaux.
plugin
Permet à une JSP de produire du HTML contenant des
constructions spécifiques au navigateur (OBJECT ou EMBED),
qui provoquera le téléchargement d’une extension.
params
Passe des paramètres. Fait partie de l’action plugin.
element
Définit dynamiquement la valeur du marqueur d’un élément XML.
attribute
Définit un attribut XML. Fait partie de l’action element.
body
Définit le corps d’un élément XML. Fait partie de l’action element.
Résumé et Exemple récapitulatif :
Tous ces éléments permettent d’invoquer du code Java et toutes sortes de composants (EJB,
bases de données, services web, etc.).
À titre d’exemple, nous allons créer une page qui affichera une liste de livres stockés dans
une ArrayList. Ici, nous n’accéderons pas à une base de données : nous nous contenterons
d’une ArrayList initialisée avec un nombre déterminé d’objets Livre, que nous
parcourrons pour afficher les attributs de chaque livre (Code,titre, description,...).
Nous avons besoin de plusieurs éléments pour construire cette page. Comme le montre le
11
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
code ci-desoous, il faut importer les classes java.util.ArrayList et Livre avec une
directive (<%@ page import=”java.util.ArrayList”
%>). Puis on déclare un attribut
lstLv, instance d’ArrayList, afin qu’il soit accessible à toute la page (<% !
ArrayList<Livre> lstLv = new ArrayList<Livre>(); %>).
Ensuite, un scriptlet ajoute des objets livres dans une ArrayList et un autre parcourt cette
liste avec une instruction for. Pour afficher les attributs de chaque livre, nous utilisons des
éléments expression (<%= book. getTitre()%>).
Voilà le code complet de cette page :
La page listerLivres.jsp
<%@ page import="javaEE.TP1.Livre" %>
<%@ page import=”java.util.ArrayList”
%>
<%!
ArrayList<Livre> lstLv = new ArrayList<Livre>();
%>
<html>
<head>
<title>Liste Des Livres</title>
</head>
<body>
<h1>Liste de tous les livres</h1>
<hr/>
<%
lstLv.add(new Livre(”Java EE”, 20, ”Livre de programmation”, ”2012-345”, 241, true));
lstLv.add(new Livre(”La Physique Nucléaire”, 20, ”Livre scientifique”, ”2011-145”, 341,
true));
lstLv.add(new Livre(”Le pauvre”, 20, ”Roman”, ”2011-525”, 441, false));
%>
<table border=”2”>
<tr>
<td>Code</td>
<td>Titre</td>
<td>Prix</td>
<td>Description</td>
<td>Nombre de pages</td>
<td>Illustrations</td>
</tr>
<%
Livre Lv;
for (int i = 0; i < lstLv.size(); i++) {
Lv = lstLv.get(i);
%>
<tr>
<td><%= Lv.getCode()%></td>
<td><%= Lv.getTitre()%></td>
<td><%= Lv.getPrix()%></td>
<td><%= Lv.getDescription()%></td>
12
Institut Supérieur De Gestion De Tunis
3ème LFIG
cours AJEE
BAYOUDHI Chaouki
<td><%= Lv.getNbPage()%></td>
<td><%= Lv.getIllustrations()%></td>
</tr>
<%
} // fin de l’instruction for
%>
</table>
<hr/>
</body>
</html>
Vous remarquerez que l’on peut librement entrelacer du code Java, des marqueurs HTML et
du texte. Tout ce qui est dans un scriptlet (entre <% et %>) est du code Java qui sera exécuté
sur le serveur et tout ce qui est à l’extérieur est du texte qui sera affiché dans la page de
réponse.
Notez également que le bloc de l’instruction for commence et se termine dans des scriptlets
différents.
Une JSP peut donc rapidement devenir difficile à relire si l’on commence à trop mélanger
des marqueurs HTML avec du code Java. En outre, il n’y a pas de séparation entre le logique
métier et la présentation, ce qui complique la maintenance des pages car on mélange deux
langages destinés à deux catégories d’intervenants : Java pour les développeurs métiers et
XHTML/CSS pour les concepteurs web.
Ce problème sera résolu aux chapitres qui suivent.
13
