O termo Facelets refere-se a linguagem de declaração da visão para a tecnologia JavaServer Faces. O Facelet é uma linguagem de declaração de página poderosa, mas leve, que é usada para construir visões JSF usando modelos HTML para construir árvores de componentes. Ou seja com o elementos Facelets chamados através da marcação UI você pode criar Templates que facilitam a padronização de uma aplicação Java Enterprise. Em suma, o uso de Facelets reduz o tempo e esforço que precisa ser gasto no desenvolvimento e implantação de aplicações empresariais.
JSF – Elementos – Facelets – ui
- <ui:insert> define conteúdos a serem colocados em um modelo.
- <ui:include> Inclui conteúdo de uma página para outra página xhtml.
- <ui:composition> Carrega um modelo usando o atributo do modelo.
- <ui:define> Define os conteúdos a serem inseridos em um modelo.
Criando um Template usando Facelets
1 – Crie uma aplicação Web dinâmica JSF, Crie uma nova pagina XHTML e escolha o Template disponibilizado Common Facelet Page e a nomeie de facecomum.xhtml:
Facelets – Common Facelet Page
2 -Como você pode ver o Eclipse disponibilizou uma página com um template contendo um Header e um Body:
Facelets – Template – Header – Body
3 – Crie mais duas paginas XHTML utilizando o modelo Blank Facelet Page e nomeie as páginas de header.xhtml e conteúdo.xhtml:
Facelet – Blanck Facelet Page
4 – Neste ponto criamos uma pagina comum, use os códigos abaixo para as respectivas páginas que já foram criadas, teste a pagina facecomum.xhtm, está é sua comum, a página contém um cabeçalho e um conteúdo, você pode utilizar também um rodapé se preferir, você pode usar sua criatividade e expandir o modelo que será usado em todas as páginas de sua aplicação:
Facelets – Página Comum
5 – Agora que já temos um modelo, crie mais duas paginas XHTML para serem as paginas de sua aplicação, as nomeie de pagina01.xhtml e pagina02.xhtml e use a pagina index.xhtml que foi criada automaticamente junto com seu projeto para que seja a pagina principal. Você deve ter a seguinte aplicação:
Facelets – Aplicação – index
6 – Assim que você clicar no link que chama um conteúdo ele será exibido usando o nome de definição da região do Template para substituir o modelo comum pela pagina atual:
Facelets – Conteúdo Página 01
7 – A mesma coisa acontece quando você retorna a pagina índice e clica no link do segundo conteúdo:
Facelets- Conteúdo Página 02
Exemplo:
Neste exemplo criamos um Template usando Facelets para criar uma pagina comum e seus conteúdos usados para substituir os elementos do Template durante o uso da aplicação.
Java
Facelets Template- facecomum.xhtml
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title><ui:insert name="pageTitle">Page Title</ui:insert></title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
.bottom {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: center;
vertical-align: middle;
color: #8E969D;
}
</style>
</head>
<body bgcolor="#ffffff">
<table style="border: 1px solid #CAD6E0" align="center" cellpadding="0"
cellspacing="0" border="0" width="400">
<tbody>
<tr>
<td class="header" height="42" align="center" valign="middle"
width="100%" bgcolor="#E4EBEB"><ui:insert name="pageHeader">
<ui:include src="header.xhtml" />
</ui:insert></td>
</tr>
<tr>
<td height="1" width="100%" bgcolor="#CAD6E0"></td>
</tr>
<tr>
<td width="100%" colspan="2">
<table width="100%" style="height: 150px" align="left"
cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center" width="100%" valign="middle"><ui:insert
name="body">
<ui:include src="conteudo.xhtml" />
</ui:insert></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="bottom" height="1" width="100%"
bgcolor="#CAD6E0"></td>
</tr>
</tbody>
</table>
</body>
</html>
Facelets Template – header.xhtml
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <ui:composition> <h1>Desenvolvimento Aberto</h1> </ui:composition> </html>
Facelets Template- conteudo.xhtml
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <ui:composition> <h1>Meu Conteudo.</h1> </ui:composition> </html>
JSF- index.xhtml
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:loadBundle basename="resources.application" var="msg" />
<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
</head>
<h:body>
<ui:composition template="facecomum.xhtml">
<ui:define name="body">
<br />
<br />
<h:panelGrid cellpadding="20px">
<h:link value="Meu Conteudo 1" outcome="pagina01" />
<h:link value="Meu Conteudo 2" outcome="pagina02" />
</h:panelGrid>
<br />
<br />
</ui:define>
</ui:composition>
</h:body>
</html>
JSF – pagina01.xhtml
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:body> <ui:composition template="facecomum.xhtml"> <ui:define name="header"> <h2>header</h2> </ui:define> <ui:define name="body"> <h2>Conteudo da Página 01</h2> <h:link value="Volar a página inicial" outcome="index" /> </ui:define> </ui:composition> </h:body> </html>
JSF – pagina02.xhtml
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:body> <ui:composition template="facecomum.xhtml"> <ui:define name="header"> <h2>header</h2> </ui:define> <ui:define name="body"> <h2>Conteudo da Página 02</h2> <h:link value="Volar a página inicial" outcome="index" /> </ui:define> </ui:composition> </h:body> </html>
Ricardo Mantovani
Desenvolvimento Código Aberto 