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" />
<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.
