Facelets

Introduo
Facelets
Framework de cdigo aberto e uso livre, sob
licena CDDL 1.0, criado pelo Jacob Hookom
Foi criado especificamente para JSF,resolvendo
deficincias encontradas nas verses iniciais
Ainda no uma tecnologia padro mantida pelo JCP
Uma linguagem de descrio de pginas (PDL)
criada especificamente para JSF
Ser incorporado no JSF 2.0, substituindo JSP

Facelets
Funciona com as especificaes JSF 1.1 e JSF 1.2,
incluindo a RI da Sun e o Apache MyFaces
Possibilidade de especificar a hierarquia de
componentes de arquivos separados (UICompositions)
Relatrio preciso do Erro (Linha, Tag e Atributo)
Especifica Tags em arquivos separados ou at mesmo
em Jars Separados
Suporte completo a EL, incluindo funes


Facelets
Utiliza o atributo 'jsfc' da mesma maneira que o 'jwcid' do
Tapestry Transforma < input type="text"/ > em
< h:inputText/ > - Os Web Designers agradecem
No necessita RenderKits especiais
No depende do Container Web

Facelets
Facelets


Facelets
Principais Funcionalidades

Disponibiliza um novo compilador de pginas
baseado em XHTML
Realiza a criao da rvore de componentes
das telas JSF
Suporta as custom tags: JSF Core, JSF HTML e JSTL

Facelets
Principais Funcionalidades

Criao de templates de tela JSF e reuso
(herana) de telas
Composio de componentes JSF para a formao
de novos componentes
Definio de custom tags para usar os novos
componentes visuais
Facelets
Principais Funcionalidades

Facelets possui vrias vantagens que vo desde a
facilidade na criao e reutilizao de pginas e
componentes, melhor depurao de erros, AJAX nativo,
uma melhor compatibilidade entre XHTML, JSTL e os
componentes, ele independente de web container, e
claro, Facelets de 30% a 50% mais rpido que JSP

Facelets
O Facelets oferece um timo mecanismo para gerao de
templates, o que torna a construo de uma aplicao toda com o
mesmo layout, muito simples e rpida, alm de evitar a repetio de
cdigo html

Na criao do template, definimos os espaos que podem ser
substitudos no template atravs da tag <ui:insert> e o atributo
name dessa tag define o nome desse espao.

<div id="esquerda">
<ui:insert name="menu" />
</div>

<div id="centro">
<ui:insert name="corpo" />
</div>








Facelets

Para informarmos que estamos utilizando um template inclumos a
tag <ui:composition> com o seu atributo template que define o
diretrio onde est o template.

<ui:composition template="/pages/TemplateDiv.xhtml">

Utilizando a tag <ui:define> definimos o que vai preencher o
espao do template

<ui:define name="menu">
<h:outputText value="Menu1:" /><br/>
<h:outputText value="Menu2:" /><br/>
<h:outputText value="Menu3:"/><br/>
</ui:define>







Facelets
Principais Funcionalidades
ui:debug - Cria uma hotkey que quando acionada atravs das
combinaes de teclas CTRL + SHIFT abre uma janela de
Debug que mostra as hierarquia de componentes construda
pelo Facelets com suas variveis e escopos

ui:param - Permite voc passar parmetros (que podem ser
textos ou at objetos) para outras pginas ou componentes
Facelets
< ui:include src="/WEB-INF/siteNav.xhtml">
< ui:param name="user" value="#{currentUser}"/ >
< ui:param name="page" value="home"/ >
< /ui:include>
Facelets
Instalao

Download do Facelets:
https://facelets.dev.java.net/
Adicionar o JAR em /WEB-INF/lib: jsf-facelets.jar
Adicionar configurao no web.xml:

<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>


Facelets
Instalao

Adicionar configurao no faces-config.xml:

<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>

O Facelets estar pronto para ser usado! ;-)


Facelets
Criando Templates com Facelets

Criar um arquivo texto com extenso XHTML no
projeto
Definir as custom tags JSF Core e JSF HTML via
XML namespaces
Adicionar a custom tag do Facelets via XML namespace



Facelets
Criando Templates com Facelets

Definir reas de contedo substituvel atravs
da tag:
<ui:insert name="nome_area">Contedo Default</ui:insert>

Para utilizar o template definimos a tag:
<ui:composition template=template>

Para informar o contedo da rea definida no template, definimos a
tag:
<ui:define name=nome_area>Contedo</ui:insert>






Facelets
Criando Templates com Facelets
<div id="geral">
<div id="topo">
<ui:insert name="topo/>
</div>
<div id="esquerda">
<ui:insert name="esquerda/>
</div>
<div id="conteudo">
<ui:insert name="conteudo/>
</div>
<div id="direita">
<ui:insert name="direita/>
</div>
<div id="rodape">
<ui:insert name="rodape">Copyright ...</ui:insert>
</div>



Exerccio 1
Criar uma nova aplicao JSF sem facelets
Instalar / Configurar o Facelets
Criar templates Left , Center
#esquerda {
width: 10%;
float: left;
border: 1px solid black;
background-color: blue;
}

#centro {
margin-left: 175px;
width: 85%;
border: 1px solid black;
background-color: red;
}





<div id="esquerda">
...
</div>

<div id="centro">
...
</div>

Exerccio 2
Copiar o cadastro em JSF feito anteriormente e
modificar para utilizar o Facelets






Facelets
Melhor parte:

Criao de componentes:

O Facelets traz grandes facilidades para criao de componentes
O Facelets no usa dtd, ele utiliza um arquivo .xml onde
informamos as tags, assim como fazemos no dtd
Para utilizarmos bibliotecas como tomahawk, richfaces ou mesmo
bibliotecas de componentes prprios, precisamos desse arquivo
.xml que deve ser salvo no diretrio WEB-INF da sua aplicao



Facelets
Etapas:

Criar a biblioteca Facelets (WEB-INF)
Declarar a biblioteca no web.xml
Criar o Componente
Importar usando o namespace



Facelets
Etapas:
1 - Criar a biblioteca Facelets (WEB-INF)
Arquivo: meuscomponentes.xml

<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"facelet-taglib_1_0.dtd">

<facelet-taglib>
<namespace>http://meuscomponentes.com/jsf</namespace>
<tag >
<tag-name>inputCpf</tag-name>
<source>../comp/cpf.xhtml</source>
</tag>
</facelet-taglib>


Facelets
Etapas:

2 - Declarar a biblioteca no web.xml.

<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/meuscomponentes.xml</param-value>
</context-param>


Facelets
Etapas:
3- Criar o componente

<!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:composition>
<h:outputText value="CPF:"/>
<h:inputText value="#{value}" required="true" id="#{id}" requiredMessage="Campo Obrigatrio"
styleClass="cpf" validatorMessage="Formato errado!" onblur="validaCPF(this);>
<rich:jQuery selector="##{id}" query="mask('999.999.999-99')" timing="onload"/>
<f:validateLength maximum=11" minimum=11"/>
</h:inputText>
<h:message for="#{id}" />
<br/>
</ui:composition>
</html>


Facelets
Agora para usar, basta importar o namespace e inserir o
componente na pgina
....
xmlns:f=http://java.sun.com/jsf/core
xmlns:g=http://meuscomponentes.com/jsf
xmlns:ui="http://java.sun.com/jsf/facelets">
...
<g:inputCpf value="#{user.name}" id="nome2"/>


Exerccio 3
Criar o componente de CPF

1 - Criar a biblioteca Facelets
2 - Declarar a biblioteca no web.xml
3 - Criar o Componente
4 - Importar usando o namespace



Exerccio 4 (opcional)

1 - Criar um componente genrico de mscara

2 - Colocar validao ajax opcional.



O Facelets no JCP e JSF2.0
A popularidade chamou a ateno do JCP
Ser incorporado especificao JSF 2.0 (JSR-314)
A especificao tambm 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 padro para descrever telas
JSF (Page Description Language - PDL)


Concluso:
Ser a linguagem padro de descrio de
pginas
Elimina a falta de um mecanismo de templates integrado ao
JSF
Permite criao de componentes de UI e definio de custom
tags
Permite o reuso de definio de estrutura de telas JSF
Permite a separao da definio de padro
visual da definio das telas
J pode ser usado hoje com o JSF 1.2 e 1.1!





FIM