Facelets
-
Upload
jornaljava -
Category
Documents
-
view
5.913 -
download
1
description
Transcript of Facelets
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