JSF - tags de modelo

Os modelos em um aplicativo da Web definem um layout e estilo de interface comum. Por exemplo, um mesmo banner, logotipo no cabeçalho comum e informações de copyright no rodapé. JSF fornece as seguintes tags facelet para fornecer um layout de interface da web padrão.

S.Não Tag e descrição
1

ui:insert

Usado no arquivo de modelo. Ele define o conteúdo a ser colocado em um modelo. ui: define tag pode substituir seu conteúdo.

2

ui:define

Define o conteúdo a ser inserido em um modelo.

3

ui:include

Inclui o conteúdo de uma página xhtml em outra página xhtml.

4

ui:composition

Carrega um modelo usando templateatributo. Também pode definir um grupo de componentes a serem inseridos na página xhtml.

Criando modelo

A criação de um modelo para um aplicativo da web é um procedimento passo a passo. A seguir estão as etapas para criar um modelo de amostra.

Etapa 1: Criar arquivo de cabeçalho: header.xhtml

Usar ui:composition tag para definir um conteúdo padrão da seção Header.

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

Etapa 2: Criar arquivo de rodapé: footer.xhtml

Usar ui:composition tag para definir um conteúdo padrão da seção Rodapé.

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

Etapa 3: Criar arquivo de conteúdo: contents.xhtml

Usar ui:composition tag para definir um conteúdo padrão da seção Conteúdo.

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

Etapa 4: Crie um modelo: common.xhtml

Usar ui:insert e ui:includetag para incluir cabeçalho / rodapé e arquivo de conteúdo no arquivo de modelo. Nomeie cada seção emui:insert tag.

name atributo de ui:insert tag será usada para substituir o conteúdo da seção correspondente.

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

Etapa 5a: usar o modelo com conteúdo padrão: home.xhtml

Carregue common.xhtml, um modelo usando ui:composition tag em qualquer página xhtml.

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

Etapa 5b: use o modelo e defina o próprio conteúdo: home.xhtml

Carregue common.xhtml, um modelo usando ui:compositiontag em qualquer página xhtml. Usarui:define tag para substituir os valores padrão.

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

Aplicação de exemplo

Vamos criar um aplicativo JSF de teste para testar as tags de modelo no JSF.

Degrau Descrição
1 Crie um projeto com o nome helloworld sob um pacote com.tutorialspoint.test conforme explicado no capítulo JSF - Primeira Aplicação .
2 Crie uma pasta de modelos em src → principal → pasta webapp .
3 Crie os arquivos header.xhtml, footer.xhtml, contents.xhtml e common.xhtml sob src → main → webapp → pasta de templates . Modifique-os conforme explicado abaixo.
4 Criar page1.xhtml e page2.xhtml arquivos sob src → principal → webapp pasta. Modifique-os conforme explicado abaixo.
5 Modifique home.xhtml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
6 Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.
7 Por fim, construa o aplicativo na forma de um arquivo war e implante-o no Apache Tomcat Webserver.
8 Inicie seu aplicativo da web usando o URL apropriado, conforme explicado a seguir na última etapa.

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>

conteúdo.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>

Assim que você estiver pronto com todas as mudanças feitas, vamos compilar e rodar a aplicação como fizemos no capítulo JSF - Primeira Aplicação. Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado.

Clique Page1 link e você verá o seguinte resultado.

Ou clique Page2 link e você verá o seguinte resultado.