Participer au site avec un Tip
Rechercher
 

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

Définition d'un template pour vos facelets

Internationalisation de pages JSF Introduction de l'utilisation de JPA



Accès rapide :
Introduction
Définition d'un template de facelet
Coder une facelet JSF basée sur notre template

Introduction

Il est fréquent que plusieurs pages de votre application Web utilisent une même mise en page (même entête, même bloc de menu, même pied de page...). Il serait dommage, que sur chacune de ces pages, vous recopiez systématiquement les mêmes blocs de tags. Effectivement, si un jour vous souhaitez changer la mise en page pour l'ensemble de ces pages, vous devrez alors modifier chaque fichier HTML.

Pour répondre à ce besoin, JSF vous permet de définir un (ou plusieurs) template(s). Un template correspond à un modèle de page Web. Vous pourrez alors composer chacune de vos pages (vos facelets) à partir de ses différentes parties qui seront injectées dans le template associé.

Définition d'un template de facelet

Il est important de comprendre que plusieurs zones à l'intérieur du template devront pouvoir changer (le titre de la page, le contenu de la page...). Il faut donc définir, dans le template, des zones « dynamiques » : celles qui seront spécifiques à chaque page Web. Cela se fait grâce au tag <ui:insert name="areaName"> : chacun de ces tags sera associé à un nom qui permettra de réaliser le lien entre le contenu d'une page et la zone dans laquelle il devra être inséré.

Dans notre exemple, nous allons utiliser quatre tags <ui:insert> pour rendre dynamique le titre de la page (dans le head et dans le body), la partie gauche de la zone centrale de la page et sa partie droite. On retrouve ces tags en lignes 8, 18, 37 et 40 de l'exemple ci-dessous : ils ont respectivement les noms title, title, aSide et content.

comme les deux premières zones d'insertions (le titre de l'entête de la page et le titre dans le corps de la page) ont le même nom (title), elles contiendront toutes les deux la même information, à savoir le titre de la page.
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 
 52 
 53 
 54 
 55 
 56 
 57 
 58 
 59 
 60 
 61 
 62 
 63 
 64 
 65 
 66 
 67 
 68 
 69 
 70 
 71 
 72 
 73 
<!DOCTYPE html >
<html xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" 
              href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
        <title><ui:insert name="title">The page title</ui:insert></title>
    </h:head>
    <h:body>
        <header class="jumbotron text-center">
            <div class="container">
                <div class="row">
                    <a href="faces/index.xhtml" class="col-md-2">
                        <img src="images/logo.png" alt="Site logo" title="Retour à la page principale" />
                    </a>
                    <h1  class="col-md-10 text-center">
                      <ui:insert name="title">The page title</ui:insert>
                    </h1>
                </div>
            </div>
        </header>
        

        <div class="container">
            <div class="row">
                <nav class="navbar col-md-12" style="margin-bottom: 30px;">
                    <a href="index.xhtml">Accueil</a>
                    <a href="product1.xhtml">Produit 1</a>
                    <a href="product2.xhtml">Produit 2</a>
                    <a href="product3.xhtml">Produit 3</a>
                    <a href="contact.xhtml">Contact</a>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-4">
                     <ui:insert name="aSide">Side content</ui:insert>
                </div>
                <div class="col-md-8">
                    <ui:insert name="content">Main Content</ui:insert>
                </div>
            </div>
        </div>
        
        <br/><br/>

        <footer class="jumbotron text-center">
            <h2 style="margin-bottom: 20px;">
                Ici, nous avons un pied de page<br/>avec des liens quelconques.
            </h2>
            
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <a href="#">Link 1</a><br/>
                        <a href="#">Link 2</a><br/>
                        <a href="#">Link 3</a>
                    </div>            
                    <div class="col-md-4">
                        <a href="#">Link 4</a><br/>
                        <a href="#">Link 5</a><br/>
                        <a href="#">Link 6</a>
                    </div>            
                    <div class="col-md-4">
                        <a href="#">Link 7</a><br/>
                        <a href="#">Link 8</a><br/>
                        <a href="#">Link 9</a>
                    </div>
                </div>
            </div>
        </footer>
    </h:body>
</html>
Définition de notre template (modèle) de facelet

Vous aurez certainement remarqué que j'ai choisis de me simplifier la vie en termes de mise en page en utilisant le framework CSS Bootstrap. Bootstrap est chargé via un tag <link /> en utilisant l'adresse CDN (Content Delivery Network) suivante : https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css. Il fournit un certain nombre de classes de styles CSS prêtes à l'emploi pour facilement décorer et positionner vos éléments graphiques. Par exemple, j'ai appliqué les classes de styles jumbotron et text-center pour l'entête et le pied de page.

Un des gros points fort de Bootstrap, consiste à facilement prendre en charge les aspects « Responsive Web Design » qui garantissent que vos blocs seront correctement positionnés à l'écran quelle que soit sa résolution (écran type destop, tablette ou smartphone). Pour ce faire, Bootstrap vous propose de répartir « logiquement » vos éléments dans une grille organisée sur 12 colonnes. Ces 12 colonnes seront affichées les unes à côté des autres que si la résolution de l'écran le permet, sinon elles s'organiseront différement.

Pour introduire une grille « responsive » dans une page gérée par Bootstrap, il faut appliquer la classe container au tag correspondant à cette grille. Ensuite, ce tag devra contenir un ou plusieurs sous-tags associés à la classe de styles row (une ou plusieurs lignes). Pour chaque ligne, il nous faudra associer des poids à chaque élément de la ligne : la somme des poids devra valoir 12. Ces poids se définissent grâce à une des classes md-col-x (ou x est une valeur comprise entre 1 et 12).

Il est maintenant temps de passer à la mise en oeuvre des différentes pages Web qui utiliseront notre template.

Coder une facelet JSF basée sur notre template

Pour indiquer qu'une facelet JSF utilise un template, nous allons utiliser le tag <ui:composition> : il devra indiquer le nom du template à utiliser.

Il nous faut aussi définir les contenus à injecter dans chaque zone du template. Cela se fait grâce au tag JSF <ui:define name="areaName' />. Les noms de blocs doivent, bien entendu, correspondre aux noms des zones du template. Voici un exemple de composition d'une facelet avec son template.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
<ui:composition template="./template.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html">
    <ui:define name="title">
        Titre de mon application JSF
    </ui:define>

    <ui:define name="aSide">
        <h2>Bloc latéral de la page</h2>
        
        <p>
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
        </p>
        
    </ui:define>

    <ui:define name="content">
        <!-- Vous pouvez bien entendu utiliser des tags JSF -->
        <h2><h:outputText value="Bloc principale de la page"/></h2>
        
        <p>
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
        </p>

        <p>
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
            Exemple de contenu afin de remplir cette page Web.
        </p>        
        
    </ui:define>
</ui:composition>
Composition d'une facelet avec son template

Demandez à afficher cette facelet dans votre navigateur et vous devriez observer le résultat de la composition. Pour rappel, le template utilise le framework CSS Bootstrap : retaillez la fenêtre de votre navigateur pour voir les différentes parties de la page se repositionner en fonction de l'espace disponible. Voici une capture d'écran de la page affichée dans un navigateur.

Exemple de composition d'une facelet JSF avec son template

Faites de même pour les autres pages de votre application Web.



Internationalisation de pages JSF Introduction de l'utilisation de JPA