Facelets

Veja neste artigo de Rafael de Paula Souza o que são Facelets.

RAFAEL DE PAULA SOUZA Rafael de Paula Souza (rafael.bnc@gmail.com), está cursando Engenharia de Computação na FURG. Atualmente faz estágio na área de soluções para Web em Java, utilizando JSF e demais frameworks.

Ver space do autor

Estatísticas:

Visualizações:

89544

Favoritado:

16 vez(es)

Conteúdo:

Didática:

Utilidade:

0
votos: 10

Serviços:

Inclua seu próprio artigo! (ajuda)

Inclua um comentário

Adicionar aos Favoritos

Marcar como lido/assistido

Incluir anotação pessoal (ajuda)

RSS Feeds

Versão para impressão

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

<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>

<ui:insert name="topo"></ui:insert>

</div>

<ui:insert name="esquerda"></ui:insert>

</div>

<ui:insert name="conteudo"></ui:insert>

</div>

<ui:insert name="direita"></ui:insert>

</div>

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

<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>

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

Senha: <input type=”password” jsfc=”h:inputPassword” value=”#{bean.password}”/>

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

Participe! Inclua um comentário

[Fechar]

Este post é fechado - você precisa ter acesso ao post para incluir um comentário.

Marcelo Gomes de Paula
24/4/2009 14:11

Faceletes + JSF - Usar ou não o jsfc

Estou estudando o facelets e vi que consigo acessar o meu ManagerBean por duas formas distintas, sendo elas:

Acopanhando o seu tutorial e este outro aqui http://www.infoblogs.com.br/view.action?contentId=13524&Facelets---Exemplos-Simples

o acesso ao bean então pode ser feito assim :

<form jsfc="h:form">
mais codigo Nome: <input type="text" jsfc="h:inputText" value="#{Colaboradores.nome}"/>
<h:outputText value="#{Colaboradores.nome}" />
</form>

ou assim

<h:form>

Meno codigo Nome: <h:inputText value="#{Colaboradores.nome}"/>

<h:outputText value="#{Colaboradores.nome}" />

</h:form>

Qual a diferenção ? e qual é mais indicado ?

Obrigado

[responder]

RAFAEL DE PAULA SOUZA
27/4/2009 16:35

RE: Boa tarde Marcelo,
Na verdade seu ManagerBean está sendo acessado da mesma forma nos dois exemplos. O atributo jsfc foi criado para que as páginas do Facelets (arquivos xhtml) sejam compatíveis com editores html (tipo Front Page) e dessa forma um Designer poderá criar as páginas normalmente e o programador pode colocar as tags JSF no meio delas.

Então, se você trabalha sozinho e não tem necessidade de um designer pode usar as tags JSF direto nas páginas sem o jsfc.

Convido você a entrar no grupo de JSF: groups.google.com.br/group/javasf/

Att,

Rafael de Paula Souza

[responder]