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:
2 -Como você pode ver o Eclipse disponibilizou uma página com um template contendo um Header e um 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:
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:
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:
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:
7 – A mesma coisa acontece quando você retorna a pagina índice e clica no link do segundo conteúdo:
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>