Artigos
Java
Facelets – Visão Geral Conceitos, Utilização e Criação de Componentes
Facelets
– Visão Geral
Conceitos, Utilização e Criação de Componentes
Julio Cezar F. Oliveira
http://sites.google.com/site/joliveiranet/home/Facelets.pdf
Dê os primeiros passos na utilização do framework que irá se
tornar o mecanismo padrão para a descrição de páginas em aplicações Web com
JSF.
Introdução
O Facelets é uma linguagem de descrição
de páginas (PDL – Page Description
Language) criada especificamente para JSF. Ele estabelece uma linguagem de
templates que suporta a criação da árvore de componentes das telas JSF, o que
permite o reuso de padrões de telas e a composição de componentes JSF para
formar novos componentes.
Java Server Faces (JSF) é um framework
que possibilita o uso de um modelo de componentes para a definição e
renderização de telas de aplicações Web.
Quando Java Server Faces (JSF) foi
criado, a intenção era utilizar JSP como a principal tecnologia para criar
páginas, uma vez que este já era um padrão na comunidade web.
A idéia foi simplificar a aprovação de
Java Server Faces usando uma linguagem de tags familiar que já possuía uma grande
aceitação em meio à comunidade Java.
Infelizmente, JSP e JSF não são
naturalmente complementares. JSP é usado para criar conteúdo estático ou
dinâmico na web, mas não para criar componentes em árvores. Seus elementos são
processados em uma página de cima para baixo com o objetivo fundamental de
criar uma resposta a um pedido. JSF, porém, tem um ciclo de vida mais complexo
em que a geração do componente e a sua renderização acontecem em fases
claramente separadas.
O Facelets surgiu como uma alternativa ao
JSP para facilitar a construção das interfaces JSF, tornando essa tarefa mais
simples e mais produtiva.
Este artigo tem o objetivo de mostrar os
recursos do Facelets a partir da construção de uma aplicação simples. Além
disso, serão apresentados os fundamentos necessários para a construção de
componentes utilizando essa tecnologia.
Por que usar Facelets
Existem várias razões para usar Facelets
para criar páginas JSF:
·
Primeiro,
Facelets não depende de um container web, assim é possível usar JSF sem ter que
usar o JEE ou um container que já tenha o JSP.
·
Facelets
pode trabalhar com qualquer implementação e versão do JSF.
·
Além
disso, Facelets fornece templating, tornando possível reutilizar o código para
simplificar o desenvolvimento e manutenção de aplicações de grande escala.
·
Permite
a criação de componentes leves, que são fáceis de desenvolver, em comparação
com os componentes JSF puros.
·
Outro
ponto positivo é que Facelets tem suporte a Unified Expression Language (EL), incluindo
o suporte para funções EL e validação EL em tempo de compilação. A EL tem as
características da JSP EL e acrescenta mais capacidades, tais como avaliação de
expressões, JSTL iteration tags, e invocação de métodos dentro de uma
expressão.
·
Facelets
também fornece um relatório preciso de erros, mostrando informações detalhadas
sobre a linha onde ocorre a exceção.
·
É
possível usar o atributo jsfc (que é o equivalente ao jwcid do Tapestry) para fornecer integração com
editores HTML existentes.
Outro ponto que deve ser levado em
consideração é que Facelets é uma tecnologia de código aberto e uso livre, sob
a licença CDDL 1.0 que em breve será incorporado ao JSF, tornando-se então o
mecanismo preferencial para a descrição da camada de apresentação.
O que são templates?
Ao longo do processo de desenvolvimento
de uma aplicação Web, percebe-se que várias páginas têm uma estrutura
semelhante. Visando promover o reuso desta estrutura comum e facilitar a futura
manutenção do padrão visual do sistema, são utilizados um ou mais modelos de
páginas (templates).
Um template define um desenho padrão
para as telas e áreas substituíveis para a troca de conteúdo durante a
renderização da interface com o usuário.
Usando templates é possível reunir
alguns dos principais objetivos de desenvolvimento de aplicações web. Templates
permitem a reutilização de código, reduzindo assim, o tempo de desenvolvimento
e os custos de manutenção de uma aplicação. Além disso, templates nos auxiliam
na obtenção de uma aparência comum em páginas que possuem uma estrutura
semelhante.
Um template define pontos onde o
conteúdo pode ser substituído. O conteúdo a ser usado nesses locais, é definido
pelo cliente do template (Template Client).
O Template define as diferentes áreas usando a tag <ui:insert>, e os clientes
utilizam os modelos com as tags: <ui:component>, <ui:composition>, <ui:fragment>, ou <ui:decorate>. Veja a
descrição das principais custom tags do Facelets na Tabela 1.
Templating em Facelets não é limitado a
apenas um nível. É possível ter multiníveis, onde um cliente pode ser um
template para outros clientes. Dessa forma, Facelets pode ser considerado um
poderoso apoio na criação de aplicações complexas.
Os templates de tela definidos em Facelets possibilitam o reuso e
facilitam a manutenção do layout e padrão visual das interfaces web. Atualmente
existem diversas opções de Templating Frameworks, porém a grande maioria não
foi projetada para trabalhar com JSF, ou seja, eles não foram projetados para
trabalhar com o ciclo de vida das requisições processadas pelo JSF. Os exemplos
mais comuns são o Struts Tiles e o Sitemesh, ambos funcionam bem com Struts mas
apresentam problemas com JSF.
Criando uma Aplicação Web com JSF e Facelets
Criando um projeto JSF com a ajuda do Maven
Para agilizar o nosso trabalho, vamos
usar o
Apache Maven. O Maven, é uma
ferramenta para gerenciamento e automação de projetos Java. Com ele é possível
gerenciar com mais facilidade as dependências do projeto. Ele é similar ao
Ant, mas é mais fácil de ser configurado,
pois é baseado em XML. O Maven utiliza uma construção conhecida como
Project Object Model (POM). No arquivo pom.xml é descrito todo
o processo de construção do projeto, suas dependências com outros módulos e
componentes e a sua sequência de construção. O download do Maven pode ser
realizado a partir da página do projeto:
http://maven.apache.org/.
O Maven não possui instalador, basta
descompactar o arquivo de distribuição e acrescentá-lo ao Path (Maven_Home\bin).
Feito isso, vamos criar o nosso projeto.
Vamos criar o nosso projeto utilizando
um archetype Maven.
1.
Entre
no prompt de comandos: clique no menu Iniciar
e escolha o item de menu Run (Executar).
Na janela que irá aparecer, digite cmd
e clique em Ok.
2.
Entre
no diretório do workspace do Eclipse: cd\Eclipse_Home\Workspace.
3.
Use
o comando do Maven para gerar o projeto: mvn
archetype:generate -DarchetypeCatalog=http://myfaces.apache.org.
Será necessário fornecer algumas
informações para gerar o projeto:
Choose archetype: digite 2 para
escolher http://myfaces.apache.org.
groupID: digite helloFacelets para o nome do domínio.
artefactID: digite helloFacelets para o nome do projeto.
snapshot: tecle <Enter>
package: digite br.com.unitri.helloFacelets para o nome
do pacote.
Tecle Y para confirmar.
O Maven criará a estrutura do projeto e
irá baixar as dependências.
4.
No
diretório criado, use o comando mvn
eclipse:eclipse para gerar o projeto do Eclipse.
Todas as dependências existentes no arquivo pom.xml que não forem encontradas no
repositório local do Maven serão baixadas.
5.
Importe
o projeto no Eclipse. No menu File,
clique na opção Import. Na janela que
irá aparecer, clique na pasta General
selecione a opção Existing Projects into
Workspace. Clique no botão Next.
Indique a pasta onde se encontra o projeto e clique em Finish.
6.
Adicione
a variável M2_REPO no classpath,
apontando para $HOME/.m2/repository.
7.
Adicione
as configurações do wtp e do compilador no arquivo pom.xml. Veja a Listagem 1.
8.
Adicione
também as dependências do JEE. Veja a Listagem 2.
9.
Gere
novamente o projeto (mvn eclipse:eclipse)
e atualize a IDE do Eclipse, clicando com o botão direito no projeto / refresh.
10. Adicione o servidor
Tomcat no Eclipse.
11. Rode a aplicação (Run
As, Run On Server).
O que o Maven fez por nós
Ao abrir a aplicação no Eclipse, podemos
observar que o Maven baixou as bibliotecas necessárias ao nosso projeto: os
JARs do Facelets, a JSF Api e o MyFaces (uma da implementações JSF).
Além de baixar as dependências, o Maven
também se encarregou de criar os arquivos de configuração. Um deles é o arquivo
web.xml, que descreve
como a aplicação deve ser implantada. Nesse arquivo, também chamado deployment descriptor, foi incluído um
parâmetro de configuração para indicar para o MyFaces que os arquivos de
definição das telas terão a extensão xhtml
e não jsp.
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
Veja o conteúdo do arquivo web.xml na Listagem 3.
Também foi gerado o arquivo faces-config.xml (example-config.xml, no exemplo criado
pelo Maven), onde é feita a integração do Facelets ao JSF através da
substituição do componente padrão do JSF, chamado ViewHandler, por outro chamado
FaceletsViewHandler. Este
componente ficará responsável pela criação da árvore de objetos que representa
a tela JSF a partir dos arquivos XHTML.
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
Veja o conteúdo completo do arquivo faces-config.xml na Listagem 4.
Além dos arquivos de configuração, o
Maven criou um exemplo que servirá como base para a nossa aplicação.
Custom Tags Suportadas pelo Facelets
Antes de iniciarmos a nossa aplicação é
importante conhecermos as principais tags que são suportadas através do
Facelets:
·
JSF Core e JSF HTML: O Facelets suporta todas as
tags que instanciam os componentes JSF. Para acessar as tags dos components JSF
é necessário adicionar a importação dos namespaces, conforme vemos a seguir:
http://java.sun.com/jsf/core
http://java.sun.com/jsf/html
Em geral, faz-se referência a estes namespaces utilizando-se os prefixos f e h
respectivamente.
A descrição detalhada das tags pode ser obtida a partir da url: http://java.sun.com/j2ee/javaserverfaces/reference/api/index.html.
·
JSTL: O Facelets possui suporte
parcial às custom tags JSTL, restringindo o uso às tags <c:if>, <c:forEach>, <c:choose>, <c:when>, <c:otherwise>, <c:catch>, <c:set> da biblioteca JSTL Core e todas
as tags do pacote JSTL Functions. As demais tags não estão disponíveis.
Para acessar as tags JSTL é necessário fazer a importação dos seguintes
namespaces:
http://java.sun.com/jstl/core
http://java.sun.com/jsp/jstl/functions
A descrição detalhada das tags JSTL pode ser obtida a partir da url: http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/index.html.
·
Facelets Custom Tags: Para usar as tags Facelets é
necessário adicionar o namespace http://java.sun.com/jsf/facelets.
O prefixo ui é usado como padrão para acessar as custom tags do Facelets. Veja
a descrição das principais tags Facelets na Tabela 1.
Criação de um template utilizando o Facelets
Em Facelets qualquer tela JSF no formato
XHTML pode ser tratada como um template. Para tanto, basta que a tag <ui:insert> seja utilizada
para definir as áreas substituíveis que receberão o conteúdo de outras telas
JSF. O exemplo na Listagem 5,
implementa um template em Facelets que divide a tela nas seguintes áreas: um
cabeçalho no topo da página, uma região de menu, o corpo da página e um rodapé.
Veja a Figura
1.
Observe que essas áreas foram definidas
com a tag <ui:insert>, onde são
informados o nome e o conteúdo padrão, veja o exemplo: <ui:insert
name="header">Hello World - Facelets</ui:insert>.
Vamos criar o template para a nossa
aplicação. No Eclipse, entre no projeto criado anteriormente e localize o
arquivo template.xhtml. Substitua o
conteúdo deste arquivo pelo código definido na listagem 5.
Figura 1. Áreas substituíveis definidas no template
usado como exemplo
Pode-se evitar o acesso direto aos arquivos de
template armazenando-os dentro da pasta WEB-INF.
Esses arquivos ficam protegidos sob o diretório WEB-INF porque são acessados pelo objeto FaceletsViewHandler,
que executa no lado do servidor. O acesso aos arquivos de template armazenados
nessa pasta acontece durante a renderização da tela que utiliza o template.
Utilização do template numa tela JSF
Dando prosseguimento ao processo de construção
da nossa aplicação, vamos criar uma tela JSF que utiliza o template gerado
anteriormente. Ainda no Eclipse, localize o arquivo helloWorld.xhtml e substitua o seu conteúdo pelo código descrito na
Listagem 6. Observe na Listagem 6 que estamos
utilizando a tag <ui:composition> para definir
qual tela será usada como template. Também é possível observar que a tag <ui:define> é usada para
definir um novo conteúdo para a área que possui o nome boby. As demais áreas definidas no arquivo de template não são
modificadas por esta tela JSF. O resultado após a renderização é uma tela onde
a estrutura principal é obtida a partir do template e o corpo da tela é
substituído pelo conteúdo definido na tela JSF. Veja a Figura 2.
Durante a renderização, o conteúdo
colocado fora ou entre as tags <ui:compositon> e <ui:define> é ignorado pelo
Facelets. Somente o conteúdo que está dentro da tag <ui:define> é utilizado
pelo Facelets durante a substituição do conteúdo das áreas definidas no
template.
Para visualizar o resultado, clique com
o botão direito sobre o projeto e em seguida escolha a opção Run As / Run on Server.
Figura 2. Resultado da renderização da tela
Criando um componente simples usando Facelets
Para finalizarmos a nossa aplicação,
vamos criar um componente utilizando o Facelets. A função do nosso componente é
bastante simples. Ele receberá como parâmetro a hora atual no formato inteiro e
irá determinar o período do dia (cedo, tarde ou noite), para em seguida imprimir
na tela as boas vindas ao usuário.
Vamos iniciar o desenvolvimento do
componente informando a tag que será usada para imprimir as boas vindas ao
usuário. Na pasta WEB-INF do projeto,
crie um arquivo XML com o nome helloWorldComponents.taglib.xml
e copie o código que se encontra na Listagem 7.Observe
na Listagem 7 que é informado
o namespace que será usado para fazer referência ao componente. Além disso,
também é feita a declaração da tag, primeiro informando o nome e em seguida o
arquivo que será usado para a definição da mesma.
Feito isso, devemos adicionar no arquivo
web.xml a definição da biblioteca de tags. Veja a Listagem 8. Utilize
ponto-e-vírgula quando for necessário adicionar mais de um arquivo de definição
de tags.
Em seguida, iremos criar o arquivo de definição
do componente. Crie o arquivo imprimeBoasVindas.xhtml
dentro da pasta WEB-INF e copie o
código da Listagem
9.
Note que tudo o que está dentro da tag <ui:composition> faz parte do
componente.
Acrescente a propriedade hora no arquivo HelloWorldBacking.java (veja o código na Listagem 10). Esse arquivo
descreve o backing bean que está sendo usado na nossa aplicação.
Para concluir o nosso trabalho, vamos testar
o componente acrescentando-o na aplicação. Substitua o conteúdo do arquivo page2.xhtml pelo conteúdo definido na Listagem 11. Para
utilizarmos o componente é necessário declaramos o namespace no ínicio do
arquivo.
xmlns:hw="http://helloWorldComponents.com/facelets"
Em seguida basta chamar a tag
imprimeBoasVindas passando a propriedade hora do backing bean como parâmetro.
<hw:imprimeBoasVindas
hora="#{helloWorldBacking.hora}"/><br/>
Tudo pronto para realizarmos o teste! Rode
a aplicação clicando com o botão direito sobre o projeto e em seguida escolha a
opção Run As / Run on Server. Entre
com o seu nome e clique em Ok. O resultado deverá ser parecido com o que vemos
na Figura2.
Figura
2. Resultado da renderização da tela que faz uso do componente
O futuro do Facelets: o que vem por aí.
O Facelets será incorporado à especificação JSF 2.0
(JSR-314)
Segundo Ed Burns, engenheiro Sênior da
Sun e líder da especificação JSF 2.0, serão incorporadas as partes mais
importantes do projeto do Facelets diretamente no JSF 2.0.
A especificação também será baseada no JSFTemplating;
O Facelets passará por melhorias ao ser
incorporado no JSF 2.0, onde serão incorporadas idéias apresentadas no JSF Templating, outro framework que
também não é baseado em JSP. O resultado será chamado de JSF Page Description Language e irá possuir os melhores elementos
do Facelets e do JSF Templating, mantendo a compatibilidade com Facelets.
Suportará o registro de listeners, validators, converters
em componentes visuais criados via XHTML
As principais mudanças acontecerão nos
componentes compostos (componentes visuais definidos a partir de outros
componentes visuais). O objetivo dos componentes compostos será criar um
componente JSF verdadeiro utilizando principalmente o PDL, mas também classes
UIComponent por trás do componente para lidar com aspectos comportamentais que
são melhor tratados em código Java. A vantagem disso é que os componentes PDL
serão componentes reais, permitindo a aplicação de listeners, conversores e
validadores.
Conclusão
Ao longo deste artigo foram apresentados
os conceitos básicos do Facelets, o seu funcionamento e as vantagens na sua
utilização. Além disso, foi mostrada a construção passo a passo de uma aplicação
simples utilizando Facelets e os conceitos básicos da criação de componentes. Com
essa aplicação de exemplo mostramos como a utilização de templates pode reduzir
significativamente a complexidade no desenvolvimento e manutenção das telas de
uma aplicação Web. Certamente esses são os pontos fortes dessa tecnologia que
em breve fará parte da especificação JSF e será usada como linguagem padrão
para descrição de telas.
Links
weblogs.java.net/blog/edburns/archive/2008/09/jsf_20_early_dr.html
Blog de Ed Burns,
engenheiro sênior da SUN, líder da especificação de JSF 2.0, representada pela
JSR 314.
jcp.org/aboutJava/communityprocess/edr/jsr314/
Rascunho da
especificação do JSF 2.0
facelets.dev.java.net/nonav/docs/dev/docbook.html
Documentação para
o desenvolvedor - Facelets - JavaServer Faces View Definition Framework
Facelets Custom Tag
|
Descrição
|
<ui:composition>
|
A tag <ui:composition> é utilizada para
encapsular conteúdo que pode ser incluído em outras páginas Facelets.
|
<ui:component>
|
A tag <ui:component>, tem o mesmo
comportamento que a tag <ui:composition>, porém para cada componente ou
fragmento contido na tag será criado um novo UIComponent diretamente na
árvore de componentes que representa a tela JSF.
|
<ui:debug>
|
A tag <ui:debug> é uma ferramenta muito útil
no desenvolvimento de uma aplicação. Com a combinação Ctrl + Shift +
<tecla de atalho> (D, por padrão), é exibida uma janela pop-up que
mostra o componente da árvore e o escopo das variáveis.
|
<ui:decorate>
|
A tag ui:decorate é semelhante à ui:composition,
porém não ignora o conteúdo fora da tag.
|
<ui:define>
|
A tag <ui:define> um conteúdo numa tela JSF
(cliente de template) para uma área substituível de um template. Pode ser
usado dentro das tags <ui:composition> ou <ui:decorate>. Os nomes
utilizados na definição da tag devem coincidir com os nomes utilizados nas
tags <ui:insert> do template.
|
<ui:fragment>
|
A tag <ui:fragment> tem o mesmo comportamento
<ui:decorate>, porém cria uma nova instância de componente
(UIComponent) para cada componente ou fragmento contido na tag.
|
<ui:include>
|
A tag <ui:include> pode ser usada para incluir
outro arquivo no documento Facelet. É possível incluir qualquer outro arquivo
XHTML que define um Facelet como também um documento puro XHTML ou XML.
|
<ui:insert>
|
A tag <ui:insert> é usada para especificar um
template em que as partes podem ser substituídas por tags <ui:define>
declaradas no cliente do template.
|
<ui:param>
|
A tag <ui:param> permite passar parâmetros
para outro Facelet incluído em uma tela através da tag <ui:include>. O
parâmetro pode conter uma string ou objeto.
|
Tabela 1. Facelets Custom Tags
Listagem 1.
Configurações do wtp e do compilador - Arquivo pom.xml
...
<build>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.6</source>
<target>1.6</target>
<encoding>ISO-8859-1</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-eclipse-plugin</artifactId>
<configuration>
<wtpversion>1.5</wtpversion>
</configuration>
</plugin>
</plugins>
</build>
...
Listagem 2.
Dependência relacionadas ao JEE - Arquivo pom.xml
...
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.4</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
...
Listagem 3. Deployment
Descriptor da Aplicação - Arquivo web.xml
<!-- Para facilitar o entendimento, foram
omitidos os parâmetros de configuração do MyFaces. -->
<?xml
version="1.0"?>
<web-app
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<description>MyProject
web.xml</description>
<context-param>
<param-name>org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL</param-name>
<param-value>true</param-value>
</context-param>
<!--
Configure tomahawk taglib -->
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/tomahawk.taglib.xml</param-value>
</context-param>
<!-- Use Documents Saved as *.xhtml -->
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<!--
Special Debug Output for Development -->
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/examples-config.xml</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
...
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING_METHOD</param-name>
<param-value>false</param-value>
</context-param>
<!--
Extensions Filter -->
<filter>
<filter-name>extensionsFilter</filter-name>
<filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>
<init-param>
<param-name>uploadMaxFileSize</param-name>
<param-value>100m</param-value>
</init-param>
<init-param>
<param-name>uploadThresholdSize</param-name>
<param-value>100k</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>extensionsFilter</filter-name>
<url-pattern>*.jsf</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>extensionsFilter</filter-name>
<url-pattern>/faces/*</url-pattern>
</filter-mapping>
<!-- Listener, to allow Jetty serving
MyFaces apps -->
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces
Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces
Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<!-- Welcome files -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
Listagem 4.
Arquivo faces-config.xml
<?xml version="1.0"?>
<!DOCTYPE
faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer
Faces Config 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd" >
<faces-config>
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
<!-- managed beans of the simple hello
world app -->
<managed-bean>
<managed-bean-name>helloWorldBacking</managed-bean-name>
<managed-bean-class>
com.br.unitri.HelloWorldBacking
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<!-- navigation rules for helloWorld.jsp
-->
<navigation-rule>
<from-view-id>/helloWorld.xhtml</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/page2.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
<!-- navigation rules for page2.jsp -->
<navigation-rule>
<from-view-id>/page2.xhtml</from-view-id>
<navigation-case>
<from-outcome>back</from-outcome>
<to-view-id>/helloWorld.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Listagem 5. Arquivo template.xhtml
<?xml
version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Hello
World - Facelets</title>
</head>
<body>
<table>
<tr>
<td>
<h1><ui:insert
name="header">Hello World - Facelets</ui:insert></h1>
</td>
</tr>
<tr>
<td>
<ui:insert name="menu">Menu
de opções: Opção1 | Opção2 | Opção3</ui:insert>
</td>
</tr>
<tr></tr>
<tr>
<td>
<ui:insert
name="body">Minha primeira tela usando JSF com
Facelets</ui:insert>
</td>
</tr>
<tr></tr>
<tr>
<td>
<ui:insert
name="footer">Unitri - Centro Universitário do
Triângulo</ui:insert>
</td>
</tr>
</table>
</body>
</html>
Listagem 6. Arquivo helloWorld.xhtml
<?xml
version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Hello
World</title>
</head>
<body>
<ui:composition
template="/template.xhtml">
<ui:define name="body">
<h:form id="form">
<h:panelGrid id="grid"
columns="2">
<h:outputText
id="output1" value="Entre com o seu nome" />
<h:inputText id="input1"
value="#{helloWorldBacking.name}"/>
<h:commandButton
id="button1" value="Ok" action="#{helloWorldBacking.send}"
/>
<h:message id="message1"
for="input1" />
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Listagem 7. Arquivo
helloWorldComponents.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://helloWorldComponents.com/facelets</namespace>
<tag>
<tag-name>imprimeBoasVindas</tag-name>
<source>imprimeBoasVindas.xhtml</source>
</tag>
</facelet-taglib>
Listagem 8. Arquivo
declaração da biblioteca de componentes nos arquivo web.xml
...
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>/WEB-INF/tomahawk.taglib.xml;/WEB-INF/helloWorldComponents.taglib.xml</param-value>
</context-param>
...
Listagem 9.
Arquivo imprimeBoasVindas.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"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:h="http://java.sun.com/jsf/html">
<ui:composition>
<c:choose>
<c:when test="${hora lt
12}">
<h:outputText value="Bom
dia!"/>
</c:when>
<c:when test="${hora lt
18}">
<h:outputText value="Boa
tarde!"/>
</c:when>
<c:otherwise>
<h:outputText value="Boa
noite!"/>
</c:otherwise>
</c:choose>
</ui:composition>
</html>
Listagem 10. Arquivo HelloWorldBacking.java
public class
HelloWorldBacking
{
...
private String name;
private Integer hora;
...
public Integer getHora() {
hora =
Calendar.getInstance().getInstance().get(Calendar.HOUR_OF_DAY);
return hora;
}
public void
setHora(Integer hora) {
this.hora = hora;
}
}
Listagem 11. Arquivo page2.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:hw="http://helloWorldComponents.com/facelets">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Hello World</title>
</head>
<body>
<f:view>
<hw:imprimeBoasVindas
hora="#{helloWorldBacking.hora}"/><br/>
<h:outputText value="Olá
#{helloWorldBacking.name}. Essa é a sua primeira aplicação utilizando
JSF com Facelets!" />
<h:form id="form2">
<h:commandLink id="link1"
action="back">
<h:outputText id="linkText"
value="Voltar" />
</h:commandLink>
</h:form>
</f:view>
</body>
</html>