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.
Para essa tarefa, iremos utilizar um arquétipo do Maven que é um modelo pré-definido que cria a estrutura básica necessária ao projeto. Os arquétipos que geram projetos JSF podem ser encontrados na seguinte página: http://wiki.apache.org/myfaces/MyFaces_Archetypes_for_Maven.
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>