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/xhtml1transitional.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