|
Facelets
Introdução
O Facelets é um subprojeto do JSF mantido pela Sun. Ele é facilmente integrado ao JSF e suas principais características são:
· Permite integração com JSF 1.1 e 1.2, incluindo a especificação da Sun e o Apache Myfaces.
· Facilidade na criação de templates.
· O atributo “jsfc” que permite incluir trechos de código JSF nas tags HTML
· Elimina o "JSP Compiler to Servlet" incrementando de 30% a 50% a performance do sistema.
· Facilidade para criar componentes reutilizáveis.
· Usa XHTML como tecnologia de view do JSF.
· Precisão para reportar erros.
Instalando o Facelets
A instalação do faceletes é muito fácil, para isso basta seguir os passos a seguir.
· Fazer o download da distribuição em - https://facelets.dev.java.net/.
· Copiar os Jars do facelets para a pasta WEB-INF/lib da sua aplicação.
· Adicionar os parâmetros de contexto no arquivo web.xml.
· Adicionar o FaceletViewHandler no arquivo faces-config.xml.
Adicionando os parâmetros de contexto
Casos você já tenha a aplicação JSF devidamente instalada basta acessar o arquivo web.xml e adicionar as seguintes linhas.
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
Isso faz com que o JSF assuma que o facelets pode interpretar arquivos do tipo .xhtml (jspx e jsp podem ser utilizados desde que a estrutura do arquivo seja de um arquivo XHTM).
Adicionando o FaceletViewHandler
Agora basta adicionar o FaceletViewHandler no arquivo faces-config.xml
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
Criando Templates com 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.
Exemplo:
layout.xhtml (Definição do template).
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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:ui="http://java.sun.com/jsf/facelets">
<head>
//Aqui importar folha de estilos...
<ui:insert name=”titulo”>Revendas.com</ui:insert>
</head>
<body>
<div id="geral">
<div id="topo">
<ui:insert name="topo"></ui:insert>
</div>
<div id="esquerda">
<ui:insert name="esquerda"></ui:insert>
</div>
<div id="conteudo">
<ui:insert name="conteudo"></ui:insert>
</div>
<div id="direita">
<ui:insert name="direita"></ui:insert>
</div>
<div id="rodape">
<ui:insert name="rodape">Copyright ...</ui:insert>
</div>
fecha tags ...
principal.xhtml (utilização do template).
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:c="http://java.sun.com/jstl/core">
<ui:composition template="./templates/default.xhtml">
<ui:define name="esquerda">
<br/>
<a href="cadastrar.jsf">Cadastrar Veiculos</a><br/><br/>
<a href="index.jsf">Logout</a>
</ui:define>
<ui:define name="conteudo">
<center>
<h:form id="form">
<h:dataTable id="tabela" value="#{veiculoMB.listar}" rowClasses="linha1, linha2" var="n" rows="5" rendered="true">
<h:column>
<f:facet name="header">Modelo</f:facet>
#{n.modelo}
</h:column>
<h:column>
<f:facet name="header">Marca</f:facet>
#{n.marca}
</h:column>
//...
</h:dataTable>
</h:form>
</center>
</ui:define>
<ui:define name="direita">
<a4j:form>
<div id="atualizar">
//...
</div>
</a4j:form>
</ui:define>
</ui:composition>
</html>
Note que 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”. 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. Utilizando a tag <ui:define> definimos o que vai preencher o “espaço” do template.
O plugin NetBeansFaceletsSupport – https://nbfaceletssupport.dev.java.net nos fornece total suporte a facelets no netbeans, além de ter facilidade na criação de templates com layouts pré definidos.
Criação de componentes
O Facelets traz grandes facilidades para criação de componentes. Em vez do dtd, ele utiliza um arquivo .xml onde informamos as tags, assim como fazemos no dtd. Para utilizarmos bibliotecas como tomahawk ou mesmo bibliotecas de componentes próprios, precisamos desse arquivo .xml que deve ser salvo no diretório WEB-INF da sua aplicação.
Estrutura do arquivo meuscomponentes.taglib.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/facelets</namespace>
<tag>
<tag-name>escreveNome</tag-name>
<source>escreveNome.xhtml</source>
</tag>
</facelet-taglib>
Após isso devemos adicionar no arquivo web.xml todas as definições de bibliotecas de tags do Facelets:
<context-param>
<param-name>Facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/meuscomponentes.taglib.xml</param-value>
</context-param>
Para adicionarmos mais de um arquivo de definição de tags devemos separá-los por ponto-e-vírgula.
E agora a definição do componente:
escreveNome.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
<c:if test="${empty nome}">
<c:set var="nome" value="não indicado"/>
</c:if>
<h:outputText value="Olá seu nome é : #{nome}”/>
</ui:composition>
</html>
Este é um componente simples que apenas imprime o nome do usuário. Mas através dessa técnica podemos criar componentes mais complexos e reutilizarmos em outras aplicações.
Note que tudo que está dentro da tag <ui:composition> faz parte do componente, e um valor defaul é imprimido caso o usuário não informe um valor para a propriedade nome.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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:a="http://meuscomponentes.com/facelets">
<head>
<title>Testando Componente</title>
</head>
<body>
<a:escreveNome nome="José João da Silva"/><br/>
<a:escreveNome/>
//fecha tags ...
O Atributo jsfc
O Facelets permite, através da tag jsfc, incluir trechos de código JSF nas tags HTML, ganhando com isso, a funcionalidade de podermos utilizar uma ferramenta para edição gráfica das páginas, podendo assim, a página ser construída por um designer e só depois o programador colocaria os atributos necessários dentro do HTML.
<form jsfc=”h:form”>
Login: <input type=”text” jsfc=”h:inputText” value=”#{bean.user}”/>
Senha: <input type=”password” jsfc=”h:inputPassword” value=”#{bean.password}”/>
<input type="submit" jsfc="h:commandButton" action="#{beam.login}" value="Submit" />
</form>
Referência
Facelets developer documentation - https://facelets.dev.java.net/nonav/docs/dev/docbook.html
Facelets fits JSF like a glove - http://www-128.ibm.com/developerworks/java/library/j-facelets/
|
Conheça os planos de créditos DevMedia e visualize esse post agora mesmo!
9
0
