JustJava2008 Facelets

JustJava 2008 JavaServer Faces e Facelets: Um casamento perfeito Yara Senger Instrutora e Diretora Educacional Globalcode Alberto Lemos (Dr. Spock) Arquiteto e Instrutor Globalcode

Objetivo Apresentar o que é e porque usar o framework Facelets em aplicações Web com JSF

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

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

Introdução: O que é Facelets?

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.

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!

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=\"nome_area\">Conteúdo Default</ui:insert> • Construir a tela JSF com tags HTML e JSF.

Exemplo de template 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:h=\"http://java.sun.com/jsf/html\" Define prefixo e xmlns:f=\"http://java.sun.com/jsf/core\" xmlns:ui=\"http://java.sun.com/jsf/facelets\"> custom tag <head> <title><ui:insert name=\"title\">Título da Página</ui:insert></title> </head> <body> <h2><ui:insert name=\"header\">Cabeçalho</ui:insert></h2> <table width=\"90%\" border=\"1\"> <tr> <td><h:messages /></td> </tr> <tr> Áreas substituíveis <td> <ui:insert name=\"body\">Corpo da Página</ui:insert> </td> </tr> </table> </body> </html> template.xhtml

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=\"template.xhtml\">...</ui:composition> • Definir o conteúdo de cada área substituível através da custom tag: <ui:define name=\"nome_area\">Novo conteúdo</ui:define> • Construir a tela JSF com tags HTML e JSF.

Exemplo de tela com Facelets <!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:f=\"http://java.sun.com/jsf/core\" Template a xmlns:h=\"http://java.sun.com/jsf/html\" xmlns:ui=\"http://java.sun.com/jsf/facelets\"> ser usado! <body> <ui:composition template=\"/WEB-INF/templates/template.xhtml\"> <ui:define name=\"title\">Cadastro de Produtos</ui:define> <ui:define name=\"header\">Cadastro de Produtos</ui:define> <ui:define name=\"body\"> <h:form> <h:panelGrid columns=\"2\"> <h:outputLabel for=\"idcod\" value=\"Código: \" /> <h:inputText id=\"idcod\" value=\"#{produtoMB.codigo}\" /> <h:outputLabel for=\"iddesc\" value=\"Descrição: \" /> <h:inputText id=\"iddesc\" value=\"#{produtoMB.descricao}\" /> <h:commandButton value=\"Salvar\" action=\"#{produtoMB.salvar}\"/> </h:panelGrid> </h:form> </ui:define> </ui:composition> </body> </html> Conteúdo da área “body” telaJSF.xhtml

Demonstração

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;

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>

Exemplo de configuração <?xml version=\"1.0\" encoding=\"UTF-8\"?> <!DOCTYPE facelet-taglib PUBLIC \"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN\" \"http://java.sun.com/dtd/facelet-taglib_1_0.dtd\"> <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

Exemplo de uso de TagFile <?xml version=\"1.0\" encoding=\"UTF-8\"?> exemplo.taglib.xml <!DOCTYPE facelet-taglib PUBLIC \"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN\" \"http://java.sun.com/dtd/facelet-taglib_1_0.dtd\"> <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=\"http://www.globalcode.com.br/facelets/justjava2008\"> <body> <ui:composition template=\"/WEB-INF/templates/template2.xhtml\"> <ui:define name=\"title\">Cadastro de Produtos</ui:define> <ui:define name=\"header\">Cadastro de Produtos</ui:define> <ui:define name=\"body\"> <jj2008:produto entity=\"#{produtoMB.produto}\" controller=\"#{produtoMB}\" /> </ui:define> </ui:composition> </body> </html> telaJSF3.xhtml

Exemplo de TagFile <!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:h=\"http://java.sun.com/jsf/html\" xmlns:f=\"http://java.sun.com/jsf/core\" Uso dos parâmetros xmlns:ui=\"http://java.sun.com/jsf/facelets\"> da Tag! <ui:component> <h:form> <h:panelGrid columns=\"2\"> <h:outputLabel for=\"idcod\" value=\"Código: \" /> <h:inputText id=\"idcod\" value=\"#{entity.codigo}\" /> <h:outputLabel for=\"iddesc\" value=\"Descrição: \" /> <h:inputText id=\"iddesc\" value=\"#{entity.descricao}\" /> <h:outputLabel for=\"idprc\" value=\"Preço: \" /> <h:inputText id=\"idprc\" value=\"#{entity.preco}\"> <f:convertNumber locale=\"pt_BR\" pattern=\"###,###.##\"/> </h:inputText> <h:commandButton value=\"Salvar\" action=\"#{controller.salvarProduto}\"/> </h:panelGrid> </h:form> </ui:component> </html> produto.xhtml

Demonstração

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.

Suporte a Facelets no Eclipse

Suporte a Facelets no NetBeans

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).

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

Exemplo de template XHTML <html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:h=\"http://java.sun.com/jsf/html\" xmlns:f=\"http://java.sun.com/jsf/core\" xmlns:ui=\"http://java.sun.com/jsf/facelets\" Define prefixo e xmlns:ez=\"http://java.sun.com/jsf/composite/ezcomp\"> custom tag <ez:loginPanel> <f:actionListener for=\"loginEvent\" type=\"example01.LoginActionListener\" /> <ui:param name=\"username\" value=\"#{LoginActionMB.username}\" /> <ui:param name=\"password\" value=\"#{LoginActionMB.password}\"/> </ez:loginPanel> index.xhtml <composite:interface> <composite:actionSource name=\"loginEvent\" /> <composite:valueHolder name=\"username\" /> <composite:valueHolder name=\"password\" /> Define prefixo e </composite:interface> custom tag <composite:implementation> <table> <tr><td>Username: <h:inputText id = \"username\" /> </td></tr> <tr><td>Password: <h:inputText id = \"password\" /> </td></tr> <tr><td><h:commandButton value=\"Login” id=\"loginEvent\"/></tr></td> </table> </composite:implementation> loginPanel.xhtml

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!

Perguntas & Respostas ?

JustJava2008 Facelets

0 comments

Notes on slide 1

Favorites, Groups & Events