Facelets

Facelets,[object Object],Introdução,[object Object]

Facelets,[object Object],Framework de código aberto e uso livre, sob,[object Object], licença CDDL 1.0, criado pelo Jacob Hookom,[object Object],• Foi criado especificamente para JSF,resolvendo deficiências encontradas nas versõesiniciais,[object Object],Ainda não é uma tecnologia padrão mantida pelo JCP,[object Object],Uma linguagem de descrição de páginas (PDL),[object Object], criada especificamente paraJSF,[object Object],Será incorporado no JSF 2.0, substituindo JSP,[object Object]

Facelets,[object Object],Funciona com as especificações JSF 1.1 e JSF 1.2, incluindo a RI da Sun e o Apache MyFaces,[object Object],Possibilidade de especificar a hierarquia de componentes de arquivos separados (UICompositions),[object Object],Relatório preciso do Erro (Linha, Tag e Atributo),[object Object],Especifica Tags em arquivos separados ou até mesmo em Jars Separados,[object Object],Suporte completo a EL, incluindo funções,[object Object]

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

Facelets,[object Object],PrincipaisFuncionalidades,[object Object],Disponibilizaum novo compilador de páginas,[object Object], baseado emXHTML,[object Object],Realiza a criação da árvore de componentes,[object Object], das telas JSF,[object Object],Suporta as custom tags: JSF Core, JSF HTML e JSTL,[object Object]

Facelets,[object Object],PrincipaisFuncionalidades,[object Object],Criação de templates de tela JSF e reuso,[object Object], (herança) de telas,[object Object],Composição de componentes JSF para a formação,[object Object], de novoscomponentes,[object Object],Definição de custom tags para usar os novos,[object Object],componentesvisuais,[object Object]

Facelets,[object Object],PrincipaisFuncionalidades,[object Object],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,[object Object], ,[object Object]

Facelets,[object Object],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ódigohtml,[object Object],Na criação do template, definimosos “espaços” quepodem ser substituídos no template atravésda tag <ui:insert> e o atributonamedessa tag define o nomedesse “espaço”. ,[object Object],<div id="esquerda">,[object Object],<ui:insertname="menu" />,[object Object],</div>,[object Object],<div id="centro">,[object Object],<ui:insertname="corpo" />,[object Object],</div>,[object Object]

Facelets,[object Object],Para informarmosqueestamosutilizando um template incluímos a tag <ui:composition> com o seuatributotemplate que define o diretórioondeestá o template.,[object Object], <ui:compositiontemplate="/pages/TemplateDiv.xhtml">,[object Object],Utilizando a tag <ui:define> definimos o quevaipreencher o “espaço” do template,[object Object],<ui:define name="menu">,[object Object], <h:outputTextvalue="Menu1:" /><br/>,[object Object],<h:outputTextvalue="Menu2:" /><br/>,[object Object], <h:outputTextvalue="Menu3:"/><br/>,[object Object], </ui:define>,[object Object]

Facelets,[object Object],PrincipaisFuncionalidades,[object Object],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,[object Object],ui:param - Permite você passar parâmetros (que podem ser textos ou até objetos) para outras páginas ou componentes Facelets ,[object Object], < ui:include src="/WEB-INF/siteNav.xhtml"> < ui:param name="user" value="#{currentUser}"/ > < ui:param name="page" value="home"/ >< /ui:include>,[object Object]

Facelets,[object Object],Instalação,[object Object],Download do Facelets:,[object Object],https://facelets.dev.java.net/,[object Object],Adicionar o JAR em /WEB-INF/lib: jsf-facelets.jar,[object Object],Adicionar configuração no web.xml:,[object Object],<context-param>,[object Object], <param-name>javax.faces.DEFAULT_SUFFIX</param-name>,[object Object], <param-value>.xhtml</param-value>,[object Object],</context-param>,[object Object]

Facelets,[object Object],Instalação,[object Object],Adicionar configuração no faces-config.xml:,[object Object],<application>,[object Object], <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>,[object Object],</application>,[object Object],O Facelets estará pronto para ser usado! ;-),[object Object]

Facelets,[object Object],Criando Templates com Facelets,[object Object], ,[object Object],Criarum arquivo texto com extensão XHTML no,[object Object],projeto,[object Object],Definir as custom tags JSF Core e JSF HTML via,[object Object], XML namespaces,[object Object],Adicionar a custom tag do Facelets via XML namespace,[object Object]

Facelets,[object Object],Criando Templates com Facelets,[object Object], ,[object Object],Definir áreas de conteúdo substituível através,[object Object], da tag:,[object Object],<ui:insert name="nome_area">Conteúdo Default</ui:insert>,[object Object],Para utilizar o template definimos a tag: ,[object Object], <ui:composition template=“template”>,[object Object],Para informar o conteúdo da área definida no template, definimos a tag:,[object Object], <ui:define name=“nome_area”>Conteúdo</ui:insert>,[object Object]

Facelets,[object Object],Criando Templates com Facelets,[object Object], <div id="geral">,[object Object], <div id="topo">,[object Object], <ui:insert name="topo“/> ,[object Object], </div>,[object Object], <div id="esquerda">,[object Object], <ui:insert name="esquerda“/>,[object Object], </div>,[object Object], <div id="conteudo">,[object Object], <ui:insert name="conteudo“/>,[object Object], </div>,[object Object], <div id="direita">,[object Object], <ui:insert name="direita“/>,[object Object], </div>,[object Object], <div id="rodape">,[object Object], <ui:insert name="rodape">Copyright ...</ui:insert>,[object Object], </div>,[object Object]

Exercício 1,[object Object],Criar uma nova aplicação JSF sem facelets,[object Object],Instalar / Configurar o Facelets,[object Object],Criar templates Left , Center,[object Object],#esquerda {,[object Object], width: 10%;,[object Object], float: left;,[object Object], border: 1px solid black;,[object Object], background-color: blue;,[object Object],},[object Object],#centro {,[object Object], margin-left: 175px;,[object Object], width: 85%;,[object Object], border: 1px solid black;,[object Object], background-color: red;,[object Object],},[object Object], <div id="esquerda">,[object Object], ...,[object Object], </div>,[object Object], <div id="centro">,[object Object], ...,[object Object], </div>,[object Object]

Exercício 2,[object Object],Copiar o cadastro em JSF feito anteriormente e modificar para utilizar o Facelets,[object Object]

Facelets,[object Object],Melhor parte:,[object Object], ,[object Object],Criação de componentes:,[object Object], ,[object Object],O Facelets traz grandes facilidades para criação de componentes,[object Object],O Facelets não usa dtd, ele utiliza um arquivo .xml onde informamos as tags, assim como fazemos no dtd,[object Object],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 suaaplicação,[object Object]

Facelets,[object Object],Etapas:,[object Object],Criar a biblioteca Facelets (WEB-INF),[object Object],Declarar a biblioteca no web.xml,[object Object],Criar o Componente,[object Object],Importar usando o namespace,[object Object]

Facelets,[object Object],Etapas:,[object Object],1 - Criar a biblioteca Facelets (WEB-INF),[object Object],Arquivo: meuscomponentes.xml,[object Object],<?xml version="1.0"?>,[object Object],<!DOCTYPE facelet-taglib PUBLIC,[object Object], "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN",[object Object], "facelet-taglib_1_0.dtd">,[object Object], ,[object Object],<facelet-taglib>,[object Object], <namespace>http://meuscomponentes.com/jsf</namespace> ,[object Object], <tag >,[object Object], <tag-name>inputCpf</tag-name>,[object Object], <source>../comp/cpf.xhtml</source>,[object Object], </tag>,[object Object],</facelet-taglib>,[object Object]

Facelets,[object Object],Etapas:,[object Object],2 - Declarar a biblioteca no web.xml.,[object Object],<context-param>,[object Object], <param-name>facelets.LIBRARIES</param-name>,[object Object],<param-value>/WEB-INF/meuscomponentes.xml</param-value>,[object Object],</context-param>,[object Object]

Facelets,[object Object],Etapas:,[object Object],3- Criar o componente,[object Object], ,[object Object],<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,[object Object],<html xmlns="http://www.w3.org/1999/xhtml",[object Object], xmlns:h="http://java.sun.com/jsf/html",[object Object], xmlns:f="http://java.sun.com/jsf/core",[object Object], xmlns:ui="http://java.sun.com/jsf/facelets">,[object Object], <ui:composition>,[object Object], <h:outputText value="CPF:"/>,[object Object], <h:inputText value="#{value}" required="true" id="#{id}" requiredMessage="Campo Obrigatório"styleClass="cpf" validatorMessage="Formato errado!" onblur="validaCPF(this);“>,[object Object], <rich:jQueryselector="##{id}" query="mask('999.999.999-99')" timing="onload"/>,[object Object], <f:validateLength maximum=“11" minimum=“11"/>,[object Object], </h:inputText>,[object Object], <h:message for="#{id}" />,[object Object], <br/> ,[object Object], </ui:composition>,[object Object], </html>,[object Object]

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

Exercício 3,[object Object],Criar o componente de CPF,[object Object],1 - Criar a bibliotecaFacelets,[object Object],2 - Declarar a biblioteca no web.xml,[object Object],3 - Criar o Componente,[object Object],4 - Importar usando o namespace,[object Object]

Exercício 4 (opcional),[object Object],1 - Criar um componentegenérico de máscara,[object Object], 2 - Colocarvalidaçãoajaxopcional.,[object Object]

O Facelets no JCP e JSF2.0 ,[object Object],A popularidade chamou a atenção do JCP,[object Object],Será incorporado à especificação JSF 2.0 (JSR-314),[object Object],A especificação também será baseada no,[object Object],JSFTemplating,[object Object],Passará por melhorias ao ser incorporado no JSF 2.0,[object Object],Suportará registro de listeners, validadors,,[object Object], converters em componentes visuais criados via XHTML,[object Object],Será a linguagem padrão para descrever telas,[object Object],JSF (Page Description Language - PDL),[object Object]

Conclusão:,[object Object],Será a linguagem padrão de descrição de,[object Object],páginas,[object Object],Elimina a falta de um mecanismo de templates integrado aoJSF,[object Object],Permite criação de componentes de UI e definição de custom tags,[object Object],Permite o reuso de definição de estrutura de telas JSF,[object Object],Permite a separação da definição de padrão,[object Object], visual da definição das telas,[object Object],Já pode ser usado hoje com o JSF 1.2 e 1.1!,[object Object]

Facelets

Facelets

Recommended

More Related Content

What's hot

What's hot(19)

Similar to Facelets

Similar to Facelets(20)

More from jornaljava

More from jornaljava(7)

Facelets