Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JustJava2008 Facelets

5,071 views

Published on

Apresentação realizada no evento JustJava2008 em São Paulo.

Published in: Technology
  • Be the first to comment

JustJava2008 Facelets

  1. 1. JustJava 2008 JavaServer Faces e Facelets: Um casamento perfeito Yara Senger Instrutora e Diretora Educacional Globalcode Alberto Lemos (Dr. Spock) Arquiteto e Instrutor Globalcode
  2. 2. Objetivo Apresentar o que é e porque usar o framework Facelets em aplicações Web com JSF
  3. 3. Agenda • Introdução: O que é Facelets? • Principais funcionalidades do Facelets • O Facelets no JCP e JSF 2.0 • Configurando uma aplicação Web • Criando um template de tela JSF • Criando uma tela JSF com Facelets • Criando componentes de UI • Suporte nos principais IDEs • Conclusão • Perguntas & Respostas
  4. 4. Introdução: O que é Facelets? • Framework de código aberto e uso livre, sob licença CDDL 1.0, criado pelo Jacob Hookom; • Foi criado especificamente para JSF, resolvendo deficiências encontradas nas versões iniciais; • Ainda não é uma tecnologia padrão mantida pelo JCP; • Uma linguagem de descrição de páginas (PDL) criada especificamente para JSF; • Será incorporado no JSF 2.0, substituindo JSP
  5. 5. Introdução: O que é Facelets?
  6. 6. Introdução: O que é Facelets?
  7. 7. Principais funcionalidades • Disponibiliza um novo compilador de páginas baseado em XHTML; • Realiza a criação da árvore de componentes das telas JSF; • Suporta as custom tags: JSF Core, JSF HTML e JSTL; • Criação de templates de tela JSF e reuso (herança) de telas; • Composição de componentes JSF para a formação de novos componentes; • Definição de custom tags para usar os novos componentes visuais.
  8. 8. Configurando aplicação Web • Download do Facelets: https://facelets.dev.java.net/ • Adicionar o JAR em /WEB-INF/lib: jsf-facelets.jar • Adicionar configuração no web.xml: <context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param> • Adicionar configuração no faces-config.xml: <application> <view-handler>com.sun.facelets.FaceletViewHandler</view-handler> </application> • O Facelets estará pronto para ser usado!
  9. 9. Criando template de tela JSF • Criar uma arquivo texto com extensão XHTML no projeto; • Definir as custom tags JSF Core e JSF HTML via XML namespaces; • Adicionar a custom tag do Facelets via XML namespace; • Definir áreas de conteúdo substituível através da custom tag: <ui:insert name=quot;nome_areaquot;>Conteúdo Default</ui:insert> • Construir a tela JSF com tags HTML e JSF.
  10. 10. Exemplo de template XHTML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:h=quot;http://java.sun.com/jsf/htmlquot; Define prefixo e xmlns:f=quot;http://java.sun.com/jsf/corequot; xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;> custom tag <head> <title><ui:insert name=quot;titlequot;>Título da Página</ui:insert></title> </head> <body> <h2><ui:insert name=quot;headerquot;>Cabeçalho</ui:insert></h2> <table width=quot;90%quot; border=quot;1quot;> <tr> <td><h:messages /></td> </tr> <tr> Áreas substituíveis <td> <ui:insert name=quot;bodyquot;>Corpo da Página</ui:insert> </td> </tr> </table> </body> </html> template.xhtml
  11. 11. Criando tela JSF com Facelets • Criar uma arquivo texto com extensão XHTML no projeto; • Adicionar as custom tags via XML namespace; • Definir o template a ser usado através da custom tag: <ui:composition template=quot;template.xhtmlquot;>...</ui:composition> • Definir o conteúdo de cada área substituível através da custom tag: <ui:define name=quot;nome_areaquot;>Novo conteúdo</ui:define> • Construir a tela JSF com tags HTML e JSF.
  12. 12. Exemplo de tela com Facelets <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:f=quot;http://java.sun.com/jsf/corequot; Template a xmlns:h=quot;http://java.sun.com/jsf/htmlquot; xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;> ser usado! <body> <ui:composition template=quot;/WEB-INF/templates/template.xhtmlquot;> <ui:define name=quot;titlequot;>Cadastro de Produtos</ui:define> <ui:define name=quot;headerquot;>Cadastro de Produtos</ui:define> <ui:define name=quot;bodyquot;> <h:form> <h:panelGrid columns=quot;2quot;> <h:outputLabel for=quot;idcodquot; value=quot;Código: quot; /> <h:inputText id=quot;idcodquot; value=quot;#{produtoMB.codigo}quot; /> <h:outputLabel for=quot;iddescquot; value=quot;Descrição: quot; /> <h:inputText id=quot;iddescquot; value=quot;#{produtoMB.descricao}quot; /> <h:commandButton value=quot;Salvarquot; action=quot;#{produtoMB.salvar}quot;/> </h:panelGrid> </h:form> </ui:define> </ui:composition> </body> </html> Conteúdo da área “body” telaJSF.xhtml
  13. 13. Demonstração
  14. 14. Criando componentes de UI • Por não usar JSP, o Facelets define um mecanismo próprio de custom tags; • Permite associar custom tags a UIComponents, Validators, Converters, TagHandlers ou TagFiles; • Será necessário criar um XML de configuração: “Facelets Taglib Descriptor”; • Os componentes UIComponents, Validators e Converters devem ser registrados no faces- config.xml;
  15. 15. Criando componentes de UI • Um TagHandler deve estender a classe abstrata com.sun.facelets.tag.TagHandler; • Um TagFile deve ser implementado como um arquivo XHTML; • O “Facelets Taglib Descriptor” deve ser registrado no web.xml: <context-param> <param-name>facelets.LIBRARIES</param-name> <param-value> /WEB-INF/facelets/minha.taglib.xml, /WEB-INF/facelets/outra.taglib.xml </param-value> </context-param>
  16. 16. Exemplo de configuração <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <!DOCTYPE facelet-taglib PUBLIC quot;-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//ENquot; quot;http://java.sun.com/dtd/facelet-taglib_1_0.dtdquot;> <facelet-taglib> <namespace>http://www.globalcode.com.br/facelets/justjava2008</namespace> <tag> <tag-name>produto</tag-name> <source>tags/produto.xhtml</source> </tag> </facelet-taglib> exemplo.taglib.xml <context-param> <param-name>facelets.LIBRARIES</param-name> <param-value>/WEB-INF/facelets/exemplo.taglib.xml</param-value> </context-param> web.xml
  17. 17. Exemplo de uso de TagFile <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> exemplo.taglib.xml <!DOCTYPE facelet-taglib PUBLIC quot;-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//ENquot; quot;http://java.sun.com/dtd/facelet-taglib_1_0.dtdquot;> <facelet-taglib> <namespace>http://www.globalcode.com.br/facelets/justjava2008</namespace> <tag> <tag-name>produto</tag-name> <source>tags/produto.xhtml</source> </tag> <html xmlns= ... </facelet-taglib> xmlns:jj2008=quot;http://www.globalcode.com.br/facelets/justjava2008quot;> <body> <ui:composition template=quot;/WEB-INF/templates/template2.xhtmlquot;> <ui:define name=quot;titlequot;>Cadastro de Produtos</ui:define> <ui:define name=quot;headerquot;>Cadastro de Produtos</ui:define> <ui:define name=quot;bodyquot;> <jj2008:produto entity=quot;#{produtoMB.produto}quot; controller=quot;#{produtoMB}quot; /> </ui:define> </ui:composition> </body> </html> telaJSF3.xhtml
  18. 18. Exemplo de TagFile <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:h=quot;http://java.sun.com/jsf/htmlquot; xmlns:f=quot;http://java.sun.com/jsf/corequot; Uso dos parâmetros xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;> da Tag! <ui:component> <h:form> <h:panelGrid columns=quot;2quot;> <h:outputLabel for=quot;idcodquot; value=quot;Código: quot; /> <h:inputText id=quot;idcodquot; value=quot;#{entity.codigo}quot; /> <h:outputLabel for=quot;iddescquot; value=quot;Descrição: quot; /> <h:inputText id=quot;iddescquot; value=quot;#{entity.descricao}quot; /> <h:outputLabel for=quot;idprcquot; value=quot;Preço: quot; /> <h:inputText id=quot;idprcquot; value=quot;#{entity.preco}quot;> <f:convertNumber locale=quot;pt_BRquot; pattern=quot;###,###.##quot;/> </h:inputText> <h:commandButton value=quot;Salvarquot; action=quot;#{controller.salvarProduto}quot;/> </h:panelGrid> </h:form> </ui:component> </html> produto.xhtml
  19. 19. Demonstração
  20. 20. Suporte nos principais IDEs • Suportado pelo Eclipse e NetBeans através de plugins; • Recomendado o plugin JBoss Tools para o Eclipse; Download: http://jboss.org/tools/ • O plugin para o NetBeans: nbfaceletssupport; Download: https://nbfaceletssupport.dev.java.net/ • Os plugins permitem: • Criação de projeto Web configurado com Facelets; • Criação de arquivos XHTML com import de taglib; • Paleta para Drag'n Drop das custom tags do Facelets; • Editor de XHTML com preview (wysywyg); • Completamento de código: tags, atributos e EL; • Checagem de erros.
  21. 21. Suporte a Facelets no Eclipse
  22. 22. Suporte a Facelets no NetBeans
  23. 23. O Facelets no JCP e JSF 2.0 • A popularidade chamou a atenção do JCP; • Será incorporado à especificação JSF 2.0 (JSR-314); • A especificação também será baseada no JSFTemplating; • Passará por melhorias ao ser incorporado no JSF 2.0; • Suportará registro de listeners, validadors, converters em componentes visuais criados via XHTML; • Será a linguagem padrão para descrever telas JSF (Page Description Language - PDL).
  24. 24. O Facelets no JCP e JSF 2.0 • Poderá ser chamado de PDL ou Facelets 2 • Miniminiza o esforço para criação de componentes compostos • Define um diretório padrão onde os “fragmentos” / componentes compostos devem ser colocados; • Ainda está incompleto • Mais informações: http://blogs .sun.com/enterprisetechtips/entry/true_abstraction_composite_ui_components http://blogs.sun.com/rlubke/entry/jsf_2_0_new_feature5 http://www.jcp.org/en/jsr/detail?id=314
  25. 25. Exemplo de template XHTML <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:h=quot;http://java.sun.com/jsf/htmlquot; xmlns:f=quot;http://java.sun.com/jsf/corequot; xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot; Define prefixo e xmlns:ez=quot;http://java.sun.com/jsf/composite/ezcompquot;> custom tag <ez:loginPanel> <f:actionListener for=quot;loginEventquot; type=quot;example01.LoginActionListenerquot; /> <ui:param name=quot;usernamequot; value=quot;#{LoginActionMB.username}quot; /> <ui:param name=quot;passwordquot; value=quot;#{LoginActionMB.password}quot;/> </ez:loginPanel> index.xhtml <composite:interface> <composite:actionSource name=quot;loginEventquot; /> <composite:valueHolder name=quot;usernamequot; /> <composite:valueHolder name=quot;passwordquot; /> Define prefixo e </composite:interface> custom tag <composite:implementation> <table> <tr><td>Username: <h:inputText id = quot;usernamequot; /> </td></tr> <tr><td>Password: <h:inputText id = quot;passwordquot; /> </td></tr> <tr><td><h:commandButton value=quot;Login” id=quot;loginEventquot;/></tr></td> </table> </composite:implementation> loginPanel.xhtml
  26. 26. Conclusão • O Facelets será incorporado à especificação JSF 2.0; • Será a linguagem padrão de descrição de páginas; • Elimina a falta de um mecanismo de templates integrado ao JSF; • Permite a criação de componentes de UI e definição de custom tags; • Permite o reuso de definição de estrutura de telas JSF; • Permite a saparação da definição de padrão visual da definição das telas; • Já pode ser usado hoje com o JSF 1.2 e 1.1!
  27. 27. Perguntas & Respostas ?

×