Pages enfant
  • 1.9.2 Facelet

Vous regardez une version antérieure (v. /wiki/display/PROJ/1.9.2+Facelet) de cette page.

afficher les différences afficher l'historique de la page

« Afficher la version précédente Vous regardez la version actuelle de cette page. (v. 10) afficher la version suivante »

Bon pour relecture

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

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

        <application>
		[...]
		<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
		[...]
	</application>

Inutile en JSF 2.0

Exemple de template : template.xhtml

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

Les balises <ui:insert indiquent les endroits où le code spécifique pourra être injecté.

Exemple de page utilisant le template : ma_page.xhtml

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

La balise <ui:composition indique le template qui va être utilisé.
Les balises <ui:define

Résultat obtenu :

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

Pour aller plus loin...

Possibilité de chaîner les templates

Exemple de page template utilisant elle-même un template : ma_page_template.xhtml

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

Exemple de page utilisant ma_page_template.xhtml : mon_autre_page.xhtml

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

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

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

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

Création du taglib dans /webapp/WEB-INF/jsf/esup-commons.taglib.xml

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

Déclaration

On déclarera le taglib dans un élément <context-param> de /webapp/WEB-INF/web.xml

	<context-param>
		<param-name>facelets.LIBRARIES</param-name>
		<param-value>/WEB-INF/esup-commons.taglib.xml 
		</param-value>
	</context-param>

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:e="http://commons.esup-portail.org">
<head>
  <title>Ma page</title>
</head>
<body>
  <f:view>
    <e:monInputText titre="Nom du champs" valeur="#{Controller.field}"/>
  </f:view>
</body>
</html>
  • Aucune étiquette