Exemplo de Facelets com Eclipse e JBoss
Autor: Jabes Felipe | Publicado: 2010-07-30T16:22:00-07:00

Olá Pessoal,Neste post, irei mostrar um exemplo de como desenvolver aplicações web usando o Framework de template Facelets que é facilmente integrado no JSF. O Facelets oferece alguns vantagens:Facilidade na criação de templates;Elimina o "JSP Compiler to Servlet" incrementando de 30% a 50% a performance da aplicação;Facilidade para criar componentes reutilizáveis;Usa XHTML como tecnologia de view do JSF;Precisão para reportar erros.Quando se desenvolve aplicações em JSF, é recomendável o uso Facelets, em vez de usar include nas subview no JSF.O exemplo a ser mostrado será desenvolvido usando JSF 1.2,  IDE Eclipse e o servidor JBoss.Antes de começar, precisamos baixar o Facelets, acesse o site: https://www.dev.java.net/files/documents/3448/99102/facelets-1.1.15.B1.zip, recomendo a usar a versão 1.1.15 no JBoss, depois de baixar, descompacta o arquivo e copia os seguintes jar:el-api-1.0.jarel-impl-1.0.jarjsf-facelets.jarCole este jars no seguinte diretório do JBoss:jboss-4.2.3.GA/server/default/deploy/jboss-web.deployer/jsf-libs/Precisamos baixar apenas o Facelets, as bibliotecas do JSF não precisa baixar, pois no diretório jsf-libs do JBoss, já contêm as bibliotecas do JSF.A versão do JBoss que estou usando é 4.2.3.Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar.O projeto final terá um layout de acordo com a imagem abaixo:1. Passo: Estrutura do projeto web:2. Passo: Antes de começar a criar as páginas é necessário fazer algumas configurações tanto no arquivo web.xml quanto no faces-config.xml, primeiro iremos configurar o arquivo web.xml, adicionando alguns parâmetros de contexto.&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee                        http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"&gt;                        &lt;display-name&gt;facelets&lt;/display-name&gt;   &lt;!-- Use Documents Saved as *.xhtml --&gt; &lt;context-param&gt;  &lt;param-name&gt;javax.faces.DEFAULT_SUFFIX&lt;/param-name&gt;  &lt;param-value&gt;.xhtml&lt;/param-value&gt; &lt;/context-param&gt; &lt;!-- Special Debug Output for Development --&gt; &lt;context-param&gt;  &lt;param-name&gt;facelets.DEVELOPMENT&lt;/param-name&gt;  &lt;param-value&gt;true&lt;/param-value&gt; &lt;/context-param&gt; &lt;!-- Optional JSF-RI Parameters to Help Debug --&gt; &lt;context-param&gt;  &lt;param-name&gt;com.sun.faces.validateXml&lt;/param-name&gt;  &lt;param-value&gt;true&lt;/param-value&gt; &lt;/context-param&gt; &lt;context-param&gt;  &lt;param-name&gt;com.sun.faces.verifyObjects&lt;/param-name&gt;  &lt;param-value&gt;true&lt;/param-value&gt; &lt;/context-param&gt; &lt;!-- Servlet JSF --&gt; &lt;servlet&gt;  &lt;servlet-name&gt;javax.faces.FacesServlet&lt;/servlet-name&gt;  &lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt; &lt;/servlet&gt; &lt;servlet-mapping&gt;  &lt;servlet-name&gt;javax.faces.FacesServlet&lt;/servlet-name&gt;  &lt;url-pattern&gt;*.faces&lt;/url-pattern&gt; &lt;/servlet-mapping&gt;  &lt;welcome-file-list&gt;  &lt;welcome-file&gt;index.jsp&lt;/welcome-file&gt;   &lt;/welcome-file-list&gt;&lt;/web-app&gt;web.xmlAgora vamos adicionar o FaceletViewHandler no arquivo faces-config.xml&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" version="1.2"&gt; &lt;application&gt;   &lt;!-- Facelets --&gt;  &lt;view-handler&gt;   com.sun.facelets.FaceletViewHandler  &lt;/view-handler&gt;   &lt;/application&gt;&lt;/faces-config&gt;faces-config.xml3. Passo:  Agora vamos criar as páginas para ser usadas no Facelets, do tipo .xhtml, para criar com estas extensões no Eclipse, basta criar um novo arquivo file e colocar o nome + a extensão .xhtml.&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;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"&gt;&lt;head&gt; &lt;title&gt;Facelets com Eclipse e JBoss Application Server&lt;/title&gt; &lt;link href="css.css" rel="stylesheet" type="text/css" /&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="tudo"&gt; &lt;div id="topo"&gt;  &lt;ui:insert name="topo"&gt;   &lt;ui:include src="topo.xhtml" /&gt;   &lt;/ui:insert&gt;   &lt;/div&gt; &lt;div id="centro"&gt;  &lt;div id="menu"&gt;   &lt;ui:insert name="menu"&gt;       &lt;ui:include src="menu.xhtml" /&gt;   &lt;/ui:insert&gt;  &lt;/div&gt;  &lt;div id="principal"&gt;   &lt;ui:insert name="principal"&gt;      &lt;/ui:insert&gt;  &lt;/div&gt;    &lt;/div&gt; &lt;div id="rodape"&gt;  &lt;ui:insert name="rodape"&gt;   &lt;ui:include src="rodape.xhtml" /&gt;   &lt;/ui:insert&gt;   &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;template.xhtmlNo código acima, temos algumas tags do Facelets, o ui:insert serve para definirmos um ponto de substituição no template, o ui:include serve para incluir um fragmento.Agora vamor criar as páginas de fragmentos.Página topo:&lt;ui:fragment 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"&gt;  TOPO &lt;/ui:fragment&gt;topo.xhtmlA tag ui.fragment é usada para definir um bloco de conteúdo.Página de menu:&lt;ui:fragment 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"&gt; &lt;h:form&gt;  &lt;ul&gt;   &lt;li&gt;&lt;h:outputLink value="index.faces"&gt;LINK1&lt;/h:outputLink&gt;&lt;/li&gt;   &lt;li&gt;&lt;h:outputLink value="index.faces"&gt;LINK2&lt;/h:outputLink&gt;&lt;/li&gt;   &lt;li&gt;&lt;h:outputLink value="index.faces"&gt;LINK3&lt;/h:outputLink&gt;&lt;/li&gt;   &lt;li&gt;&lt;h:outputLink value="index.faces"&gt;LINK4&lt;/h:outputLink&gt;&lt;/li&gt;  &lt;/ul&gt; &lt;/h:form&gt;&lt;/ui:fragment&gt;menu.xhtmlPágina do rodapé:&lt;ui:fragment 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"&gt;  RODAPE &lt;/ui:fragment&gt;rodape.xhtmlAgora vamos criar uma página que irá fazer o relacionamento de composição com o template.Página index do Facelets:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;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"&gt;&lt;ui:composition template="/template.xhtml"&gt; &lt;ui:define name="principal"&gt;  &lt;h1&gt;&lt;h:outputText value="Exemplo de Facelets usando Eclipse e JBoss Application Server" /&gt;&lt;/h1&gt;  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;  &lt;h:outputText value="Àrea para o conteúdo principal." /&gt;   &lt;/ui:define&gt;&lt;/ui:composition&gt;&lt;/html&gt;index.xhtmlA tag ui:composition serve para definir o relacionamento de composição entre esta tela e o template, a tag ui:define serve para substituir a definição da tag ui:insert, nesta tela a única parte que está sendo sobrepondo é a àrea principal.Crie uma página index.jsp para abertura da aplicação:&lt;jsp:forward page="index.faces" /&gt;index.jspArquivo css para definir a estrutura e aparência do projeto* { padding: 0; margin: 0; font-size: 12pt;}ul { list-style: none; }body { text-align: center;}#tudo { width: 800px; margin: 0 auto;}#topo { width: 100%; height: 80px; float: left; border: 2px solid; margin-top: 0.5em; background: red;}#centro { width: 100%; height: 300px; float: left; margin-top: 0.5em; }#menu { width: 20%; height: 100%; float: left; overflow: auto; border: 2px solid; background: yellow;}#menu li{ display: block; text-align: center;}#principal { width: 78%; height: 100%; float: right; overflow: auto;  border: 2px solid; background: silver;}#rodape { width: 100%; height: 30px; float: left; border: 2px solid; margin-top: 0.5em; background: lime;}css.cssBom galera, este foi um exemplo de como usar o Facelets nas aplicações JSF, Para quem quiser baixar o exemplo, clique aqui.Qualquer dúvida, crítica ou sugestão, fico à disposição.