Templates, les modèle en JSF2
>> 02 December 2010
English Version
Templates ou modèles est la possibilité d'utiliser une interface commune pour afficher d'une façon similaire plusieurs pages ou views dans votre site JSF2.
Si on souhaite avoir, par exemple une identité unique d'un site Web, en gardant la même présentation à travers toutes les pages, on a tout intérêts à utiliser des modèles en JSF2. L'avantage de cette méthode par rapport aux feuilles de style est de répéter l'ensemble ou une partie de la structure d'un document. Gardez des liens par exemple dans toutes les pages.
Commençons par un petit exemple. Une structure contenant en-tête, partie de navigation et un corps.
Utiliser le système de templates ou modèles est composé de deux parties :
- Créer le modèle ou l'interface
- Utiliser le modèle en créant des compositions
jsf_style.css
<!--
/* En-Tête */
#masthead {
position:relative;
padding:10px;
background-color:#FFF;
height: 50px;
border: 1px #000 solid;
margin-right:18%;
}
/********************************************************************************
Sidebar
*******************************************************************************/
/* Navigation et liens */
#sidebar {
float:left;
padding:12px;
width:14%;
background-color:#fcb968;
border: 1px #c0c0c0 solid;
}
/********************************************************************************
Content
*******************************************************************************/
/* Contenu */
#content {
position:relative;
margin-left:16%;
margin-right:18%;
padding:12px;
border: 2px #fcb968 solid;
}
-->
layout.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="StyleSheet" HREF="stylesheets/jsf_style.css" TYPE="text/css" />
<title>Using templates in JSF 2</title>
</head>
<body>
<!-- +++++++++++++++++++++++++++++++++MASTHEAD+++++++++++++++++++++++++++-->
<div id="masthead">
<h1 align="center">Using templates in JSF 2</h1>
</div>
<!-- +++++++++++++++++++++++++++ SIDEBAR AND LINKS +++++++++++++++++++++++++ -->
<div id="sidebar">
<p><a href="#">Formations</a></p>
<p><a href="#">Testing</a></p>
<p><a href="#">JSF 2</a></p>
</div>
<!-- +++++++++++++++++++++++++CONTENT++++++++++++++++++++++++++++++++++++++++ -->
<div id="content">
<p>Line1</p>
<p>Line2</p>
<p>Line3</p>
</div>
</body>
</html>
Affichage
Pour créer un modèle (template)
- Ajouter une instruction " namespace "
- Pour chaque emplacement qu'on désire personnaliser dans le modèle, on insère une instruction "ui:insert", avec ou sans corps. Avec corps, si on souhaite avoir un comportement ou texte par défaut. L'instruction <ui:insert est couplée avec une instruction <ui:define dans les parties utilisatrices du modèle (compositions)
Nous allons utiliser le fichier " layout.xhtml " comme modèle et personnaliser l'en-tête dans chaque page utilisatrice de ce modèle :
- Ajouter <ui:insert avec corps pour chaque partie à personnaliser dans le modèle, chaque <ui:insert est identifie par un attribut " name ". Cela sert à remplacer le contenu de <ui:insert dans les compositions en utilisant le même " name " dans <ui:define.
<h1 align="center">
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</h1>
- Créer une composition (une page xhtml ordinaire, qui va utiliser le même modèle " layout.xhtml ", en personnalisant une partie (en-tête) définie par <ui:insert name="header"
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="StyleSheet" HREF="stylesheets/jsf_style.css" TYPE="text/css" />
<title>
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</title>
</head>
<body>
<!-- +++++++++++++++++++MASTHEAD++++++++++++++++++++++++++++++++++++++++++++ -->
<div id="masthead">
<h1 align="center">
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</h1>
</div>
<!-- +++++++++++++++++++SIDEBAR AND LINKS ++++++++++++++++++++++++++++++++++ -->
<div id="sidebar">
<p><a href="formation.jsf">Formations</a></p>
<p><a href="#">Testing</a></p>
<p><a href="#">JSF 2</a></p>
</div>
<!-- ++++++++++++++++++++++CONTENT++++++++++++++++++++++++++++++++++++++++++ -->
<div id="content">
<p>Line1</p>
<p>Line2</p>
<p>Line3</p>
</div>
</body>
</html>
formation.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Formation in JSF 2 (Learning)
</ui:define>
</ui:composition>
Note:
Les parties non personnalisées dans "layout.xhtml" restent inchangées.
Remarquer le message affiché par <title> dans le navigateur et l'en-tête
Affichage
testing.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Testing
</ui:define>
</ui:composition>
Affichage
index.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
</ui:composition>
Affichage
Pas d'affichage par défaut
On utilise <ui:insert sans corps <ui:insert name= "... " />
Example
layout.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="StyleSheet" HREF="stylesheets/jsf_style.css" TYPE="text/css" />
<title>
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</title>
</head>
<body>
<!-- +++++++++++++++++++++MASTHEAD++++++++++++++++++++++++++++++++++++++ -->
<div id="masthead">
<h1 align="center">
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</h1>
</div>
<!-- ++++++++++++++SIDEBAR AND LINKS +++++++++++++++++++++++++++++++++++++++ -->
<div id="sidebar">
<p><a href="formation.jsf">Formations</a></p>
<p><a href="#">Testing</a></p>
<p><a href="#">JSF 2</a></p>
</div>
<!-- +++++++++++++++++++++++CONTENT++++++++++++++++++++++++++++++++++++++++ -->
<div id="content">
<ui:insert name="content" />
</div>
</body>
</html>
testing.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Testing
</ui:define>
<ui:define name="content">
<p>Line1 in Testing</p>
<p>Line2 in Testing</p>
<p>Line3 in Testing</p>
</ui:define>
</ui:composition>
Affichage
formation.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Formation in JSF 2 (Learning)
</ui:define>
<ui:define name="content">
<ol>
<li>Line1 in Testing</li>
<li>Line2 in Testing</li>
<li>Line3 in Testing</li>
</ol>
</ui:define>
</ui:composition>
Affichage
Comment créer une composition
- L'instruction définie le corps d'une composition <ui:composition. L'attribut "template" sert à indiquer le chemin complet vers le modèle ou template " layout.xhtml "
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
...
...
</ui:composition>
- A l'intérieur de <ui:composition, on utilise <ui:define pour chaque <ui:insert qu'on désire personnaliser dans le modèle
<ui:composition>
...
<ui:define name="header">
Testing
</ui:define>
...
</ui:composition>
Pour aller plus loin, utiliser <ui:include
Il est possible d'utiliser un fichier et l'importer dans une instruction <ui:define, de cette manière, on peut insérer dans cette partie un logo, un texte, etc.. et l'utiliser dans plusieurs autres fichiers ou compositions.
Example :
formation.xhtml and testing.xhtml vont utiliser un fichier de personnalisation "header.xhtml".
Note:
Le fichier à importer en utilisant <ui:include est un fichier .xhtml
<title> n'est plus utilisé dans l'exemple
header.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:graphicImage url="images/logo.gif" width="100px" />
<br/>
<h:outputText value="http://www.java-javafx.com"/>
</ui:composition>
formation.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
<ui:include src="header.xhtml">
</ui:include>
<br/>
Formation in JSF 2 (Learning)
</ui:define>
<ui:define name="content">
<ol>
<li>Line1 in Testing</li>
<li>Line2 in Testing</li>
<li>Line3 in Testing</li>
</ol>
</ui:define>
</ui:composition>
testing.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
<ui:include src="header.xhtml">
</ui:include>
<br/>
Testing
</ui:define>
<ui:define name="content">
<p>Line1 in Testing</p>
<p>Line2 in Testing</p>
<p>Line3 in Testing</p>
</ui:define>
</ui:composition>
Affichage
Résumé
Pour créer un modèle (template)
===================== =
-Utiliser une instruction " namespace "
xmlns:ui="http://java.sun.com/jsf/facelets"
-A chaque endroit qu'on désire personnalier dans le modèle on insère "ui:insert" son attribu " name " sert à l'indentier par la suite dans le compositions en utilisant <ui:define. En l'absence d'une instruction <ui:define correspondante à <ui:insert, la valeur par défaut de <ui:insert est utilisée, si <ui:insert dispose d'un corps
<ui:insert name="var1" /> pas de valeur par défaut
ou
<ui:insert name="var2">
Texte par défaut
</ui:insert>
Créer des fichiers utilisateurs (compositions)
============================ =========
-Dans <ui:composition "template" sert à indiquer le chemin complet vers le modèle (template), avec l'extension .xhtml
-<ui:define sert à remplacer ou à redéfinir des <ui:insert de même nom dans le modèle
-On peut utiliser <ui:include> dans <ui:define pour importer un fichier. "src" indique son chemin (extension.xhtml)
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="chemin_complet_modele.xhtml">
...
<ui:define name="var1">
Texte de remplacement
</ui:define>
...
<ui:define name="var2">
<ui:include src="chemin_vers_fichier_a_importer.xhtml">
</ui:include>
</ui:composition>
English version
2 comments:
Merci de votre aide
Merci à vous
Post a Comment