[PDF] Apprendre le XHTML support de cours et exemples pour reviser ensemble | Cours xhtml

(1)

1

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 :

(2)

2 <td><input type=checkbox/>

</tr> </table>

<input type=submit value=Ajouter> <hr>

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">

(3)

3 <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>

</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.

(4)

4

III. 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">

<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/>

<td class="LesLignes">Code du livre :</td> <td><input type="text"/></td> </tr> <tr> <tdclass="LesLignes">Titre :</td> <td><input type="text"/></td> </tr> <tr> <tdclass="LesLignes">Prix :</td> <td><input type="text"/></td>

(5)

5 </tr>

<tr>

<tdclass="LesLignes">Description :</td>

<tr>

<tdclass="LesLignes">Nombre de pages :</td> <td><input type="text"/></td> </tr> <tr> <tdclass="LesLignes">Illustrations :</td> <td><input type="checkbox"/></td> </tr> </table>

</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.

(6)

6

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">

<tit1e>Ajout d’un Livre</tit1e>

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> </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>

(7)

7

</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

(8)

8

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.

(9)

9

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.

(10)

10

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>

(11)

11

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,...).

(12)

12

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>(); %>

<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>

(13)

13 <td><%= Lv.getNbPage()%></td>

<%

} // 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.