JustJava2008 Facelets

5,035 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,035
On SlideShare
0
From Embeds
0
Number of Embeds
3,117
Actions
Shares
0
Downloads
279
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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 ?

×