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=quot;nome_areaquot;>Conteúdo Default</ui:insert>

• Construir a tela JSF com tags HTML e JSF.

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

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.

Exemplo de tela com Facelets

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

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

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

Exemplo de TagFile


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

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

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Dr. Spock

Mehr von Dr. Spock (20)

JustJava2008 Facelets