Facelets
-
Upload
jornaljava -
Category
Documents
-
view
5.913 -
download
1
description
Transcript of Facelets
![Page 1: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/1.jpg)
Facelets
Introdução
![Page 2: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/2.jpg)
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
![Page 3: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/3.jpg)
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
![Page 4: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/4.jpg)
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
![Page 5: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/5.jpg)
Facelets
![Page 6: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/6.jpg)
Facelets
![Page 7: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/7.jpg)
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
![Page 8: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/8.jpg)
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
![Page 9: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/9.jpg)
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
![Page 10: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/10.jpg)
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>
![Page 11: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/11.jpg)
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>
![Page 12: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/12.jpg)
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>
![Page 13: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/13.jpg)
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>
![Page 14: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/14.jpg)
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! ;-)
![Page 15: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/15.jpg)
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
![Page 16: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/16.jpg)
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>
![Page 17: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/17.jpg)
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>
![Page 18: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/18.jpg)
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>
![Page 19: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/19.jpg)
Exercício 2
• Copiar o cadastro em JSF feito anteriormente e modificar para utilizar o Facelets
![Page 20: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/20.jpg)
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
![Page 21: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/21.jpg)
Facelets
Etapas:
• Criar a biblioteca Facelets (WEB-INF)• Declarar a biblioteca no web.xml• Criar o Componente• Importar usando o namespace
![Page 22: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/22.jpg)
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>
![Page 23: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/23.jpg)
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>
![Page 24: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/24.jpg)
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>
![Page 25: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/25.jpg)
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"/>
![Page 26: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/26.jpg)
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
![Page 27: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/27.jpg)
Exercício 4 (opcional)
1 - Criar um componente genérico de máscara
2 - Colocar validação ajax opcional.
![Page 28: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/28.jpg)
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)
![Page 29: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/29.jpg)
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!
![Page 30: Facelets](https://reader033.fdocument.pub/reader033/viewer/2022052903/5572c65ed8b42abb378b4a67/html5/thumbnails/30.jpg)
FIM