JSF - tag modello

I modelli in un'applicazione Web definiscono un layout e uno stile di interfaccia comuni. Ad esempio, uno stesso banner, logo nell'intestazione comune e informazioni sul copyright nel piè di pagina. JSF fornisce i seguenti tag facelet per fornire un layout di interfaccia web standard.

S.No Tag e descrizione
1

ui:insert

Utilizzato nel file modello. Definisce i contenuti da inserire in un modello. ui: define tag può sostituirne il contenuto.

2

ui:define

Definisce i contenuti da inserire in un modello.

3

ui:include

Include il contenuto di una pagina xhtml in un'altra pagina xhtml.

4

ui:composition

Carica un modello utilizzando templateattributo. Può anche definire un gruppo di componenti da inserire nella pagina xhtml.

Creazione del modello

La creazione di modelli per un'applicazione Web è una procedura passo passo. Di seguito sono riportati i passaggi per creare un modello di esempio.

Passaggio 1: crea il file di intestazione: header.xhtml

Uso ui:composition tag per definire un contenuto predefinito della sezione Header.

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

Passaggio 2: crea un file piè di pagina: footer.xhtml

Uso ui:composition tag per definire un contenuto predefinito della sezione Footer.

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

Passaggio 3: creazione del file di contenuto: contents.xhtml

Uso ui:composition tag per definire un contenuto predefinito della sezione Contenuto.

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

Passaggio 4: crea un modello: common.xhtml

Uso ui:insert e ui:includetag per includere intestazione / piè di pagina e file di contenuto nel file modello. Assegna un nome a ciascuna sezione inui:insert etichetta.

name attributo di ui:insert tag verrà utilizzato per sostituire il contenuto della sezione corrispondente.

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

Passaggio 5a: utilizzare il modello con i contenuti predefiniti: home.xhtml

Carica common.xhtml, un modello usando ui:composition tag in qualsiasi pagina xhtml.

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

Passaggio 5b: utilizzare il modello e impostare i propri contenuti: home.xhtml

Carica common.xhtml, un modello usando ui:compositiontag in qualsiasi pagina xhtml. Usoui:define tag per sostituire i valori predefiniti.

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

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare i tag del modello in JSF.

Passo Descrizione
1 Creare un progetto con un nome helloworld sotto un pacchetto com.tutorialspoint.test come spiegato nel capitolo JSF - Prima applicazione .
2 Crea la cartella dei modelli in src → main → cartella webapp .
3 Crea i file header.xhtml, footer.xhtml, contents.xhtml e common.xhtml nella cartella src → main → webapp → templates . Modificali come spiegato di seguito.
4 Crea i file page1.xhtml e page2.xhtml in src → main → cartella webapp . Modificali come spiegato di seguito.
5 Modifica home.xhtml come spiegato di seguito. Mantieni il resto dei file invariato.
6 Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
7 Infine, crea l'applicazione sotto forma di file war e distribuiscila nel server Web Apache Tomcat.
8 Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

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>

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

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione come abbiamo fatto nel capitolo JSF - Prima applicazione. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato.

Clic Page1 link e vedrai il seguente risultato.

Oppure fare clic su Page2 link e vedrai il seguente risultato.