JavaServer Faces e Facelets:
Um casamento perfeito
JustJava 2008
Yara SengerInstrutora e Diretora Educacional Globalcode
Alberto Lemos (Dr. Spock)Arquiteto e Instrutor Globalcode
Apresentar o que é e porque usar o framework Facelets em aplicações
Web com JSF
Objetivo
• 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
Agenda
• 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?
Introdução: O que é Facelets?
Introdução: O que é Facelets?
• 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.
Principais funcionalidades
• Download do Facelets: https://facelets.dev.java.net/
• Adicionar o JAR em /WEB-INF/lib: jsf-facelets.jar
• Adicionar configuração no web.xml:
• Adicionar configuração no faces-config.xml:
• O Facelets estará pronto para ser usado!
Configurando aplicação Web
<context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value></context-param>
<application> <view-handler>com.sun.facelets.FaceletViewHandler</view-handler></application>
• 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:
• Construir a tela JSF com tags HTML e JSF.
Criando template de tela JSF
<ui:insert name="nome_area">Conteúdo Default</ui:insert>
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" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <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> <td> <ui:insert name="body">Corpo da Página</ui:insert> </td> </tr> </table> </body>
</html>template.xhtml
Áreas substituíveis
Define prefixo ecustom tag
• 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:
• Definir o conteúdo de cada área substituível através da custom tag:
• Construir a tela JSF com tags HTML e JSF.
Criando tela JSF com Facelets
<ui:composition template="template.xhtml">...</ui:composition>
<ui:define name="nome_area">Novo conteúdo</ui:define>
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" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">
<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>telaJSF.xhtml
Conteúdo daárea “body”
Template aser usado!
Demonstração
• 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:
Criando componentes de UI
<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"?>
<!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
<html xmlns= ... 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" xmlns:ui="http://java.sun.com/jsf/facelets">
<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
Uso dos parâmetrosda Tag!
Demonstração
• 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 nos principais IDEs
Suporte a Facelets no Eclipse
Suporte a Facelets no NetBeans
• 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
O Facelets no JCP e JSF 2.0
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" xmlns:ez="http://java.sun.com/jsf/composite/ezcomp">
<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
Define prefixo ecustom tag
<composite:interface> <composite:actionSource name="loginEvent" /> <composite:valueHolder name="username" /> <composite:valueHolder name="password" /> </composite:interface>
<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
Define prefixo ecustom tag
• 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!
Conclusão
?Perguntas & Respostas