Projets
Pages enfant
  • 1.9.2 Facelet

Comparaison des versions

Ancienne version 6

changes.mady.by.user Céline Didier

Sauvegardée le

comparé à

Nouvelle version 7

changes.mady.by.user Céline Didier

Sauvegardée le

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.
Balise Wiki
{toc}

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

h1. Fonctionnement

{note}Faire un shéma{note}

h3. Déclaration

Dans JSF 1.2 on indique à JSF d'utiliser Facelets comme gestionnaire de vues. Pour cela dans
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

...

/webapp/WEB-INF/jsp/faces-config.xml

...


{code
}
        <application>
		[...]
		<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
		[...]
	</application>
{code}
Inutile en JSF 2.0

...



h3. Exemple de template : template.xhtml

...


{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é.

h3.

...

 Exemple de page utilisant le template : ma_page.xhtml

...


{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 loin...

...


h2. Possibilité de chaîner les templates

...


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

...


{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 ma_page_template.xhtml : mon_autre_page.xhtml

...


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

h2.

...

 Possibilité de créer des composants

h3. Création du composant

Un composant est une composition :
{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}" styleClass="titre" />
	<h:inputText value="#{valeur}" styleClass="zoneTexte" />
</ui:composition>
</html>
{code}

h3. Création du taglib
{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://www.developpez.com/jsfEtFacelets/monJeu</namespace>
	<tag>
		<tag-name>zoneDeTexte</tag-name>
		<source>composants/zoneDeTexte.xhtml</source>
	</tag>
</facelet-taglib>
{code}		

h3. Déclaration

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


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:mj=" http://www.developpez.com/jsfEtFacelets/monJeu">
<head>
  <title>Ma premiere page XHTML avec facelets</title>
</head>
<body>
  <f:view>
    <mj:zoneDeTexte titre="Hello World" valeur="#{unManagedBean.unChamp}"/>
  </f:view>
</body>
</html>{code}