Download - JustJava2008 Facelets

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?

• 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


<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


<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

http://blogs.sun.com/enterprisetechtips/entry/true_abstraction_composite_ui_components






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" 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


<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


• 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

Download - JustJava2008 Facelets

Top Related