Facelets

Introdução

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

Facelets

• Funciona com as especificações 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)

• Relatório preciso do Erro (Linha, Tag e Atributo)• Especifica Tags em arquivos separados ou até mesmo

em Jars Separados• Suporte completo a EL, incluindo funções

Facelets

• Utiliza o atributo 'jsfc' da mesma maneira que o 'jwcid' do Tapestry Transforma < input type="text"/ > em

< h:inputText/ > - Os Web Designers agradecem• Não necessita RenderKits especiais• Não depende do Container Web

Facelets

Facelets

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

Facelets

Principais Funcionalidades

• 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

Facelets

Principais Funcionalidades

• Facelets possui várias vantagens que vão desde a facilidade na criação e reutilização de páginas e componentes, melhor depuração 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 rápido que JSP

 

Facelets

• O Facelets oferece um ótimo mecanismo para geração de templates, o que torna a construção de uma aplicação toda com o mesmo layout, muito simples e rápida, além de evitar a repetição de código html

• Na criação do template, definimos os “espaços” que podem ser substituídos no template através da tag <ui:insert> e o atributo name dessa tag define o nome desse “espaço”.

<div id="esquerda">

<ui:insert name="menu" />

</div>

<div id="centro">

<ui:insert name="corpo" />

</div>

Facelets

• Para informarmos que estamos utilizando um template incluímos a tag <ui:composition> com o seu atributo template que define o diretório onde está o template.

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

• Utilizando a tag <ui:define> definimos o que vai preencher o “espaço” 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 através das

combinações de teclas CTRL + SHIFT abre uma janela de Debug que mostra as hierarquia de componentes construída pelo Facelets com suas variáveis e escopos

• ui:param - Permite você passar parâmetros (que podem ser textos ou até objetos) para outras páginas 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

Instalação

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>

Facelets

Instalação

Adicionar configuração 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 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

Facelets

Criando Templates com Facelets • Definir áreas de conteúdo substituível através

da tag:

<ui:insert name="nome_area">Conteúdo Default</ui:insert>

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

• Para informar o conteúdo da área definida no template, definimos a tag: <ui:define name=“nome_area”>Conteúdo</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>

Exercício 1

• Criar uma nova aplicação 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>

Exercício 2

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

Facelets

Melhor parte:

 

Criação de componentes:

 • O Facelets traz grandes facilidades para criação de componentes • O Facelets não 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 próprios, precisamos desse arquivo .xml que deve ser salvo no diretório WEB-INF da sua aplicação

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 Obrigatório" 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 página

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

Exercício 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

Exercício 4 (opcional)

1 - Criar um componente genérico de máscara

2 - Colocar validação ajax opcional.

O Facelets no JCP e JSF2.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)

Conclusão:

• Será a linguagem padrão de descrição de

páginas• Elimina a falta de um mecanismo de templates integrado ao

JSF• Permite 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 separaçã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!

FIM