Facelets

6,142 views

Published on

Curso de RichFaces da VerdeSource

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,142
On SlideShare
0
From Embeds
0
Number of Embeds
601
Actions
Shares
0
Downloads
204
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Facelets

  1. 1. Facelets<br />Introdução<br />
  2. 2. Facelets<br />Framework de código aberto e uso livre, sob<br /> licença CDDL 1.0, criado pelo Jacob Hookom<br />• Foi criado especificamente para JSF,resolvendo deficiências encontradas nas versõesiniciais<br />Ainda não é uma tecnologia padrão mantida pelo JCP<br />Uma linguagem de descrição de páginas (PDL)<br /> criada especificamente paraJSF<br />Será incorporado no JSF 2.0, substituindo JSP<br />
  3. 3. Facelets<br />Funciona com as especificações JSF 1.1 e JSF 1.2, incluindo a RI da Sun e o Apache MyFaces<br />Possibilidade de especificar a hierarquia de componentes de arquivos separados (UICompositions)<br />Relatório preciso do Erro (Linha, Tag e Atributo)<br />Especifica Tags em arquivos separados ou até mesmo em Jars Separados<br />Suporte completo a EL, incluindo funções<br />
  4. 4. Facelets<br />Utiliza o atributo 'jsfc' da mesma maneira que o 'jwcid' do Tapestry Transforma < input type="text"/ > em <br />< h:inputText/ > - Os Web Designers agradecem<br />Não necessita RenderKits especiais<br />Não depende do Container Web<br />
  5. 5. Facelets<br />
  6. 6. Facelets<br />
  7. 7. Facelets<br />PrincipaisFuncionalidades<br />Disponibilizaum novo compilador de páginas<br /> baseado emXHTML<br />Realiza a criação da árvore de componentes<br /> das telas JSF<br />Suporta as custom tags: JSF Core, JSF HTML e JSTL<br />
  8. 8. Facelets<br />PrincipaisFuncionalidades<br />Criação de templates de tela JSF e reuso<br /> (herança) de telas<br />Composição de componentes JSF para a formação<br /> de novoscomponentes<br />Definição de custom tags para usar os novos<br />componentesvisuais<br />
  9. 9. Facelets<br />PrincipaisFuncionalidades<br />Facelets possui várias vantagens que vão desde a facilidade na criação e reutilização de páginas e componentes, melhor depuração de erros, AJAX nativo, uma melhor compatibilidade entre XHTML, JSTL e os componentes, ele é independente de web container, e claro, Facelets é de 30% a 50% mais rápido que JSP<br /> <br />
  10. 10. Facelets<br />O Facelets oferece um ótimo mecanismo para geração de templates, o que torna a construção de uma aplicação toda com o mesmo layout, muito simples e rápida, além de evitar a repetição de códigohtml<br />Na criação do template, definimosos “espaços” quepodem ser substituídos no template atravésda tag <ui:insert> e o atributonamedessa tag define o nomedesse “espaço”. <br /><div id="esquerda"><br /><ui:insertname="menu" /><br /></div><br /><div id="centro"><br /><ui:insertname="corpo" /><br /></div><br />
  11. 11. Facelets<br />Para informarmosqueestamosutilizando um template incluímos a tag <ui:composition> com o seuatributotemplate que define o diretórioondeestá o template.<br /> <ui:compositiontemplate="/pages/TemplateDiv.xhtml"><br />Utilizando a tag <ui:define> definimos o quevaipreencher o “espaço” do template<br /><ui:define name="menu"><br /> <h:outputTextvalue="Menu1:" /><br/><br /><h:outputTextvalue="Menu2:" /><br/><br /> <h:outputTextvalue="Menu3:"/><br/><br /> </ui:define><br />
  12. 12. Facelets<br />PrincipaisFuncionalidades<br />ui:debug - Cria uma hotkey que quando acionada através das combinações de teclas CTRL + SHIFT abre uma janela de Debug que mostra as hierarquia de componentes construída pelo Facelets com suas variáveis e escopos<br />ui:param - Permite você passar parâmetros (que podem ser textos ou até objetos) para outras páginas ou componentes Facelets <br /> < ui:include src="/WEB-INF/siteNav.xhtml"> < ui:param name="user" value="#{currentUser}"/ > < ui:param name="page" value="home"/ >< /ui:include><br />
  13. 13. Facelets<br />Instalação<br />Download do Facelets:<br />https://facelets.dev.java.net/<br />Adicionar o JAR em /WEB-INF/lib: jsf-facelets.jar<br />Adicionar configuração no web.xml:<br /><context-param><br /> <param-name>javax.faces.DEFAULT_SUFFIX</param-name><br /> <param-value>.xhtml</param-value><br /></context-param><br />
  14. 14. Facelets<br />Instalação<br />Adicionar configuração no faces-config.xml:<br /><application><br /> <view-handler>com.sun.facelets.FaceletViewHandler</view-handler><br /></application><br />O Facelets estará pronto para ser usado! ;-)<br />
  15. 15. Facelets<br />Criando Templates com Facelets<br /> <br />Criarum arquivo texto com extensão XHTML no<br />projeto<br />Definir as custom tags JSF Core e JSF HTML via<br /> XML namespaces<br />Adicionar a custom tag do Facelets via XML namespace<br />
  16. 16. Facelets<br />Criando Templates com Facelets<br /> <br />Definir áreas de conteúdo substituível através<br /> da tag:<br /><ui:insert name="nome_area">Conteúdo Default</ui:insert><br />Para utilizar o template definimos a tag: <br /> <ui:composition template=“template”><br />Para informar o conteúdo da área definida no template, definimos a tag:<br /> <ui:define name=“nome_area”>Conteúdo</ui:insert><br />
  17. 17. Facelets<br />Criando Templates com Facelets<br />        <div id="geral"><br />            <div id="topo"><br />                <ui:insert name="topo“/>                <br />            </div><br />            <div id="esquerda"><br />                <ui:insert name="esquerda“/><br />            </div><br />            <div id="conteudo"><br />                <ui:insert name="conteudo“/><br />            </div><br />            <div id="direita"><br />                  <ui:insert name="direita“/><br />            </div><br />            <div id="rodape"><br />                <ui:insert name="rodape">Copyright ...</ui:insert><br />       </div><br />
  18. 18. Exercício 1<br />Criar uma nova aplicação JSF sem facelets<br />Instalar / Configurar o Facelets<br />Criar templates Left , Center<br />#esquerda {<br /> width: 10%;<br /> float: left;<br /> border: 1px solid black;<br /> background-color: blue;<br />}<br />#centro {<br /> margin-left: 175px;<br /> width: 85%;<br /> border: 1px solid black;<br /> background-color: red;<br />}<br /> <div id="esquerda"><br /> ...<br /> </div><br /> <div id="centro"><br /> ...<br /> </div><br />
  19. 19. Exercício 2<br />Copiar o cadastro em JSF feito anteriormente e modificar para utilizar o Facelets<br />
  20. 20. Facelets<br />Melhor parte:<br /> <br />Criação de componentes:<br /> <br />O Facelets traz grandes facilidades para criação de componentes<br />O Facelets não usa dtd, ele utiliza um arquivo .xml onde informamos as tags, assim como fazemos no dtd<br />Para utilizarmos bibliotecas como tomahawk, richfaces ou mesmo bibliotecas de componentes próprios, precisamos desse arquivo .xml que deve ser salvo no diretório WEB-INF da suaaplicação<br />
  21. 21. Facelets<br />Etapas:<br />Criar a biblioteca Facelets (WEB-INF)<br />Declarar a biblioteca no web.xml<br />Criar o Componente<br />Importar usando o namespace<br />
  22. 22. Facelets<br />Etapas:<br />1 - Criar a biblioteca Facelets (WEB-INF)<br />Arquivo: meuscomponentes.xml<br /><?xml version="1.0"?><br /><!DOCTYPE facelet-taglib PUBLIC<br /> "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"<br /> "facelet-taglib_1_0.dtd"><br /> <br /><facelet-taglib><br /> <namespace>http://meuscomponentes.com/jsf</namespace> <br /> <tag ><br /> <tag-name>inputCpf</tag-name><br /> <source>../comp/cpf.xhtml</source><br /> </tag><br /></facelet-taglib><br />
  23. 23. Facelets<br />Etapas:<br />2 - Declarar a biblioteca no web.xml.<br /><context-param><br /> <param-name>facelets.LIBRARIES</param-name><br /><param-value>/WEB-INF/meuscomponentes.xml</param-value><br /></context-param><br />
  24. 24. Facelets<br />Etapas:<br />3- Criar o componente<br /> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"<br /> xmlns:h="http://java.sun.com/jsf/html"<br /> xmlns:f="http://java.sun.com/jsf/core"<br /> xmlns:ui="http://java.sun.com/jsf/facelets"><br /> <ui:composition><br /> <h:outputText value="CPF:"/><br /> <h:inputText value="#{value}" required="true" id="#{id}" requiredMessage="Campo Obrigatório"styleClass="cpf" validatorMessage="Formato errado!" onblur="validaCPF(this);“><br /> <rich:jQueryselector="##{id}" query="mask('999.999.999-99')" timing="onload"/><br /> <f:validateLength maximum=“11" minimum=“11"/><br /> </h:inputText><br /> <h:message for="#{id}" /><br /> <br/> <br /> </ui:composition><br /> </html><br />
  25. 25. Facelets<br />Agora para usar, basta importar o namespace e inserir o componente na página<br />....<br />xmlns:f=http://java.sun.com/jsf/core<br />xmlns:g=http://meuscomponentes.com/jsf<br />xmlns:ui="http://java.sun.com/jsf/facelets">  <br />...<br /><g:inputCpf value="#{user.name}" id="nome2"/><br />
  26. 26. Exercício 3<br />Criar o componente de CPF<br />1 - Criar a bibliotecaFacelets<br />2 - Declarar a biblioteca no web.xml<br />3 - Criar o Componente<br />4 - Importar usando o namespace<br />
  27. 27. Exercício 4 (opcional)<br />1 - Criar um componentegenérico de máscara<br /> 2 - Colocarvalidaçãoajaxopcional.<br />
  28. 28. O Facelets no JCP e JSF2.0 <br />A popularidade chamou a atenção do JCP<br />Será incorporado à especificação JSF 2.0 (JSR-314)<br />A especificação também será baseada no<br />JSFTemplating<br />Passará por melhorias ao ser incorporado no JSF 2.0<br />Suportará registro de listeners, validadors,<br /> converters em componentes visuais criados via XHTML<br />Será a linguagem padrão para descrever telas<br />JSF (Page Description Language - PDL)<br />
  29. 29. Conclusão:<br />Será a linguagem padrão de descrição de<br />páginas<br />Elimina a falta de um mecanismo de templates integrado aoJSF<br />Permite criação de componentes de UI e definição de custom tags<br />Permite o reuso de definição de estrutura de telas JSF<br />Permite a separação da definição de padrão<br /> visual da definição das telas<br />Já pode ser usado hoje com o JSF 1.2 e 1.1!<br />
  30. 30. FIM<br />

×