JSF - balises de modèle

Les modèles d'une application Web définissent une disposition et un style d'interface communs. Par exemple, une même bannière, un logo dans un en-tête commun et des informations de copyright dans le pied de page. JSF fournit les balises facelet suivantes pour fournir une disposition d'interface Web standard.

S. Non Balise et description
1

ui:insert

Utilisé dans le fichier modèle. Il définit le contenu à placer dans un modèle. ui: define tag peut remplacer son contenu.
2

ui:define

Définit le contenu à insérer dans un modèle.
3

ui:include

Inclut le contenu d'une page xhtml dans une autre page xhtml.
4

ui:composition

Charge un modèle à l'aide de templateattribut. Il peut également définir un groupe de composants à insérer dans une page xhtml.

Créer un modèle

La création d'un modèle pour une application Web est une procédure étape par étape. Voici les étapes pour créer un exemple de modèle.

Étape 1: Créez un fichier d'en-tête: header.xhtml

Utilisation ui:composition balise pour définir un contenu par défaut de la section En-tête.

<ui:composition> 
   <h1>Default Header</h1>	
</ui:composition>

Étape 2: créer un fichier de pied de page: footer.xhtml

Utilisation ui:composition balise pour définir un contenu par défaut de la section Pied de page.

<ui:composition> 
   <h1>Default Footer</h1>	
</ui:composition>

Étape 3: créer un fichier de contenu: contents.xhtml

Utilisation ui:composition balise pour définir un contenu par défaut de la section Contenu.

<ui:composition> 
   <h1>Default Contents</h1>	
</ui:composition>

Étape 4: Créez un modèle: common.xhtml

Utilisation ui:insert et ui:includebalise pour inclure l'en-tête / pied de page et le fichier de contenu dans le fichier modèle. Nommez chaque section dansui:insert marque.

name attribut de ui:insert tag sera utilisé pour remplacer le contenu de la section correspondante.

<h:body> 
   <ui:insert name = "header" >
      <ui:include src = "header.xhtml" />
   </ui:insert> 
   
   <ui:insert name = "content" >
      <ui:include src = "contents.xhtml" />
   </ui:insert>    
   
   <ui:insert name = "footer" >
      <ui:include src = "footer.xhtml" />
   </ui:insert>
</h:body>

Étape 5a: Utilisez le modèle avec le contenu par défaut: home.xhtml

Chargez common.xhtml, un modèle utilisant ui:composition balise dans n'importe quelle page xhtml.

<h:body>
   <ui:composition template = "common.xhtml">	
</h:body>

Étape 5b: utiliser le modèle et définir son propre contenu: home.xhtml

Chargez common.xhtml, un modèle utilisant ui:compositionbalise dans n'importe quelle page xhtml. Utilisationui:define balise pour remplacer les valeurs par défaut.

<h:body>
   <ui:composition template = "templates/common.xhtml">	
      <ui:define name = "content">				
         <h:link value = "Page 1" outcome = "page1" />
         &nbsp;
         <h:link value = "Page 2" outcome = "page2" />			
      </ui:define>
   </ui:composition>
</h:body>

Exemple d'application

Créons une application de test JSF pour tester les balises de modèle dans JSF.

Étape La description
1 Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Première application .
2 Créez un dossier de modèles sous src → main → dossier webapp .
3 Créez les fichiers header.xhtml, footer.xhtml, contents.xhtml et common.xhtml sous src → main → webapp → dossier templates . Modifiez-les comme expliqué ci-dessous.
4 Créez des fichiers page1.xhtml et page2.xhtml sous src → main → dossier webapp . Modifiez-les comme expliqué ci-dessous.
5 Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
6 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
sept Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
8 Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

header.xhtml

<?xml version = "1.0" encoding="UTF-8"?>
<!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">
   
   <body>
      <ui:composition> 
         <h1>Default Header</h1>
      </ui:composition>	
   </body>
</html>

footer.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!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">
   
   <body>
      <ui:composition> 
         <h1>Default Footer</h1>
      </ui:composition>	
   </body>
</html>

contents.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!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">
   
   <body>
      <ui:composition> 
         <h1>Default Content</h1>
      </ui:composition>	
   </body>
</html>

common.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!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:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets"> 
   
   <h:head></h:head>
   <h:body> 
      <div style = "border-width:2px; border-color:green; border-style:solid;">
         <ui:insert name = "header" >
            <ui:include src = "/templates/header.xhtml" />
         </ui:insert> 
      </div>
      <br/>
      
      <div style = "border-width:2px; border-color:black; border-style:solid;">
         <ui:insert name = "content" >
            <ui:include src = "/templates/contents.xhtml" />
         </ui:insert>    
      </div>
      <br/>
      
      <div style = "border-width:2px; border-color:red; border-style:solid;">
         <ui:insert name = "footer" >
            <ui:include src = "/templates/footer.xhtml" />
         </ui:insert>
      </div>
   
   </h:body>
</html>

page1.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!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:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body> 
      <ui:composition template = "templates/common.xhtml">
         <ui:define name = "header">
            <h2>Page1 header</h2>
         </ui:define>			
         
         <ui:define name = "content">
            <h2>Page1 content</h2>
             <h:link value = "Back To Home" outcome = "home" />
         </ui:define> 
         
         <ui:define name = "footer">
            <h2>Page1 Footer</h2>
         </ui:define>			
      </ui:composition> 
   
   </h:body> 
</html>

page2.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!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:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body> 
      <ui:composition template = "templates/common.xhtml">
         <ui:define name = "header">
            <h2>Page2 header</h2>
         </ui:define>			
         
         <ui:define name = "content">
            <h2>Page2 content</h2>
             <h:link value = "Back To Home" outcome = "home" />
         </ui:define> 
         
         <ui:define name = "footer">
            <h2>Page2 Footer</h2>
         </ui:define>			
      </ui:composition> 
   
   </h:body> 
</html>

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!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:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body>
      <ui:composition template = "templates/common.xhtml">	
         <ui:define name = "content">				
            <br/><br/>
             <h:link value = "Page 1" outcome = "page1" />
             <h:link value = "Page 2" outcome = "page2" />			
            <br/><br/>
         </ui:define>
      </ui:composition>
   
   </h:body>
</html>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.

Cliquez sur Page1 lien et vous verrez le résultat suivant.

Ou cliquez sur Page2 lien et vous verrez le résultat suivant.