TOC

Exemple de gabarit JSF 2 avec Facelets

Exemple de modèle JSF 2 avec facettes

Dans une application Web, la plupart des pages suivent une disposition et un style d'interface Web similaires, par exemple, les mêmes en-tête et pied de page. Dans JSF 2.0, vous pouvez utiliser les balises Facelets pour fournir facilement une mise en page d'interface Web standard, en fait, elle est similaire àApache Tiles framework.

Dans cet exemple, il montre l'utilisation de 4 balises Facelets pour créer une page à partir d'un modèle:

  1. ui:insert - Utilisé dans le fichier modèle, il définit le contenu qui va être remplacé par le fichier qui charge le modèle. Le contenu peut être remplacé par la balise «ui: define».

  2. ui:define - Définit le contenu qui est inséré dans le modèle avec une balise «ui: insert» correspondante.

  3. ui:include - Similaire à "jsp: include" de JSP, inclut le contenu d'une autre page XHTML.

  4. ui:composition - S'il est utilisé avec l'attribut «template», le modèle spécifié est chargé et les enfants de cette balise définissent la mise en page du modèle; Sinon, il s’agit d’un groupe d’éléments qui peuvent être insérés quelque part. De plus, JSF supprime toutes les balises «en dehors» de la balise «ui: composition».

1. Disposition du modèle

Dans JSF 2.0, un fichier de modèle est juste un fichier XHTML normal, avec quelques balises de facettes JSF pour définir la disposition du modèle.

Fichier: commonLayout.xhtml

Dans ce modèle, il définit une mise en page Web standard:

  1. Utilise la balise «h:outputStylesheet» pour inclure un fichier CSS en tête pour styliser la mise en page entière.

  2. Utilise la balise «ui:insert» pour définir trois sections remplaçables: en-tête, contenu et pied de page.

  3. Utilise la balise «ui:include» pour fournir un contenu par défaut si aucun remplacement n'est spécifié lorsque le modèle est utilisé.

2. En-tête, contenu et pied de page

Trois contenus de page par défaut.

Fichier: commonHeader.xhtml 



    
        

        
This is default header

Fichier: commonContent.xhtml 



    
        

        
This is default content

Fichier: commonFooter.xhtml 



    
        

        
This is default footer

Lorsque ces pages sont insérées dans le fichier modèle, toutes les balises en dehors des «ui:composition» seront supprimées. Par exemple,

Fichier: commonHeader.xhtml 



    
        ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF
        

        
This is default header


        
        ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF

JSF ne prend que les éléments suivants et l'insère dans le fichier modèle 



    
This is default header

Une fois inséré dans le modèle «commonLayout», il est devenu…

Fichier: commonLayout.xhtml 

    ...
    

    


        
    ...

3. Utilisation d'un modèle

Pour utiliser un modèle existant, par exemple. «commonLayout.xhtml», vous utilisez la balise «ui:composition» avec un attribut «template». Voir les deux exemples suivants:

Fichier: default.xhtml

Cette page JSF charge le modèle «commonLayout.xhtml» et affiche tout le contenu de la page par défaut.

jsf2-facelets-template-example-1

Fichier: page1.xhtml 



    

        

            
                
This is page1 content

            

        
                
This is page1 Footer

Cette page JSF charge un modèle «commonLayout.xhtml» et utilise la balise «ui: define» pour remplacer la balise «ui: insert», définie dans le fichier de modèle.

jsf2-facelets-template-example-2

Note
Tant que le nom de la balise «ui:define» correspond au nom de la balise «ui:insert», définie dans le modèle, le «ui: insérer »le contenu est remplacé.

Télécharger le code source

Téléchargez-le -JSF-2-Facelets-Template-Example.zip (12 Ko)

Références

  1. Framework Apache Tiles

  2. JSF «ui: include» JavaDoc

  3. JSF «ui: insert» JavaDoc

  4. JSF «ui: define» JavaDoc

  5. JSF «ui: composition» JavaDoc

Related