| Sommaire |
|---|
Présentation
Facelet est une technologie JSF permettant de créer des templates (ou modèle) et d'utiliser ces templates dans les vues de l'application.
Le but est de factoriser les éléments communs à un ensemble de pages qu'on déclarera plutôt dans une page unique appelée template. Les pages utilisent alors le template comme structure et y injectent leur contenu spécifique.
Intérêts :
- Eviter les duplication de code et faciliter son maintien
- Améliorer la visibilité des pages puisque chaque page ne présentera que ce qui lui est propre
- Avoir un structuration de page uniforme dans toute l'application
Fonctionnement
| Remarque |
|---|
Faire un shéma |
Déclaration
Dans JSF 1.2 on indique à JSF d'utiliser Facelets comme gestionnaire de vues. Pour cela dans
...
/webapp/WEB-INF/jsp/faces-config.xml
| Bloc de code |
|---|
} <application> [...] <view-handler>com.sun.facelets.FaceletViewHandler</view-handler> [...] </application> {code} |
Inutile
...
en
...
JSF
...
2.0
...
Exemple
...
de
...
template
...
:
...
template.xhtml
| Bloc de code |
|---|
}<!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" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:t="http://myfaces.apache.org/tomahawk"> <head> <title><ui:insert name="titre" /></title> </head> <body> <p> <ui:insert name="contenu" /> </p> </body> </html> {code} |
Les
...
balises
...
<ui:insert
...
indiquent
...
les
...
endroits
...
où
...
le
...
code
...
spécifique
...
pourra
...
être
...
injecté.
...
Exemple
...
de
...
page
...
utilisant
...
le
...
template
...
:
...
ma_page.xhtml
| Bloc de code |
|---|
} <!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" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"> <ui:composition template="/template.xhtml"> <ui:define name="titre">Titre de ma page</ui:define> <ui:define name="contenu"> Texte, formulaires etc. </ui:define> </ui:composition> </html> {code} |
La
...
balise
...
<ui:composition
...
indique
...
le
...
template
...
qui
...
va
...
être
...
utilisé.
...
Les
...
balises
...
<ui:define
Résultat obtenu :
| Bloc de code |
|---|
_ h3. Résultat obtenu : {code}<!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" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:t="http://myfaces.apache.org/tomahawk"> <head> <title>Titre de ma page</title> </head> <body> <p> Texte, formulaires etc. </p> </body> </html> {code} h1. Pour aller plus |
Pour aller plus loin...
...
Possibilité
...
de
...
chaîner
...
les
...
templates
...
Exemple
...
de
...
page
...
template
...
utilisant
...
elle-même
...
un
...
template
...
:
...
ma_page_template.xhtml
| Bloc de code |
|---|
} <!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" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"> <ui:composition template="/template.xhtml"> <ui:define name="titre">Titre de ma page en dur</ui:define> <ui:define name="contenu"> <div class="style-header"><ui:insert name="header" /></div> <div class="style-texte"><ui:insert name="texte" /></div> <div class="style-footer"><ui:insert name="footer" /></div> </ui:define> </ui:composition> </html> {code} h3. Exemple de page utilisant |
Exemple de page utilisant ma_page_template.xhtml
...
:
...
mon_autre_page.xhtml
| Bloc de code |
|---|
}
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="/ma_page_template.xhtml">
<ui:define name="header">
Mon header
</ui:define>
<ui:define name="texte">
Texte, formulaires etc.
</ui:define>
<ui:define name="footer">
Mon footer
</ui:define>
</ui:composition>
</html>
|
Résultat obtenu :
| Bloc de code |
|---|
{code} h3. Résultat obtenu : {code}<!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" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:t="http://myfaces.apache.org/tomahawk"> <head> <title>Titre de ma page en dur</title> </head> <body> <p> <div class="style-header">Mon header</div> <div class="style-texte">Texte, formulaires etc.</div> <div class="style-footer">Mon footer</div> </p> </body> </html> {code} |
Essayer
...
de
...
ne
...
pas
...
déclarer
...
<ui:define
...
name="titre">Titre
...
de
...
ma
...
page</ui:define>
...
dans
...
ma_page_template.xhtml
...
et
...
de
...
l'ajouter
...
dans
...
mon_autre_page.xhtml
...
et
...
voir
...
si
...
ça
...
fonctionne.
...
Possibilité
...
de
...
créer
...
des
...
composants
...
Création
...
du
...
composant
...
Un
...
composant
...
est
...
une
...
composition
...
dans
...
/webapp/WEB-INF/jsf/components/
...
:
...
monInputText.xhtml
| Bloc de code |
|---|
} <!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" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <ui:composition> <h:outputText value="#{titre}"/> : <h:inputText value="#{valeur}"/> </ui:composition> </html> {code} h3. Création du taglib dans |
Création du taglib dans /webapp/WEB-INF/jsf/esup-commons.taglib.xml
| Bloc de code |
|---|
} <?xml version="1.0"?> <!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "facelet-taglib_1_0.dtd"> <facelet-taglib> <namespace>http://commons.esup-portail.org</namespace> <tag> <tag-name>monInputText</tag-name> <source>/monInputText.xhtml</source> </tag> </facelet-taglib> {code} h3. Déclaration On déclarera le taglib dans un élément |
Déclaration
On déclarera le taglib dans un élément <context-param>
...
de
...
/webapp/WEB-INF/web.xml
| Bloc de code |
|---|
} <context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/esup-commons.taglib.xml
</param-value>
</context-param> |
Utilisation du composant
| Bloc de code |
|---|
{code} h3. Utilisation du composant <!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:mje=" http://wwwcommons.developpez.com/jsfEtFacelets/monJeuesup-portail.org"> <head> <title>Ma premiere page XHTML avec facelets<page</title> </head> <body> <f:view> <mj<e:zoneDeTextemonInputText titre="HelloNom du Worldchamps" valeur="#{unManagedBeanController.unChampfield}"/> </f:view> </body> </html>{code} |