Depois que fiz a publicação do artigo Ajax com JSF 1.2 utilizando JBoss RichFaces, alguns leitores me enviaram e-mail pedindo um exemplo com o JSF 2.0.

Então, atendendo aos pedidos, este artigo ensina como fazer o exemplo com JSF 1.2 utilizando o AJAX da biblioteca RichFaces, mas em JSF 2.0, sem adição de biblioteca AJAX.

Obtendo e instalando o Eclipse IDE

Para desenvolver este exemplo, utilizei a versão do Eclipse IDE 3.6, ainda em desenvolvimento, em um ambiente voltado para o trabalho com Java EE. Para obter o Eclipse IDE, já configurado com o ambiente Web, vá ao endereço http://www.eclipse.org/downloads/ e selecione a aba Developer Builds e clique em Eclipse IDE for Java EE Developers. Lembre-se de selecionar o seu sistema operacional.

Ao baixar, descompacte em um local desejado de sua máquina.

O Servidor Java

Para este artigo, vamos utilizar o Tomcat 7.0, ainda em desenvolvimento. Para baixar o binário do Tomcat 7, vá até o endereço  http://people.apache.org/~markt/dev/tomcat-7/v7.0.0-RC3/bin/. Antes de continuarmos, vale lembrá-los que este endereço pode mudar até a versão final e que, por ser uma versão de desenvolvimento, não deve ser utilizada em produção.

A versão que vamos baixar é a compactada. Por exemplo, se o seu Windows for de uma versão 64bits, baixe o arquivo apache-tomcat-7.0.0-RC3-windows-x64.zip.

Atenção: O Tomcat 7.0 roda somente na JDK 6 ou superior.

As bibliotecas

Para trabalhar com o JavaServer Faces 2.0, primeiramente será preciso configurar os arquivos e a estrutura necessária.

O contêiner Servlet Tomcat 7, por padrão, não possue suporte direto ao JavaServer Faces, ou seja, não contém as bibliotecas necessárias para o desenvolvimento com o mesmo.

Para baixar o JSF, faça download no endereço https://javaserverfaces.dev.java.net/. Ao baixar o arquivo, simplesmente descompacte em um diretório de sua escolha.

JavaServer Faces rodando em seu aplicativo Web

Para ter o JavaServer Faces 2.0 em sua aplicação, você possui dois arquivos do tipo JAR:

1. jsf-api.jar
2. jsf-impl.jar

As bibliotecas JSTL

Os arquivos JSTL estão no endereço  http://www.apache.org/dist/jakarta/taglibs/standard/binaries/, onde utilizaremos dois arquivos JARs:

1. jstl.jar
2. standard.jar

Criando o projeto

Clique no menu File>New>Dynamic Web Project. Na caixa de diálogo New Dynamic Web Project, digite ProjAjaxComJSF2 (ou o nome que desejar dar) em Project name. Clique no botão New Runtime e, na caixa de diálogo New Server Runtime Environment, expanda Apache e selecione Apache Tomcat v7.0. Clique no botão Next.

Figura 1 – Selecionando o Apache Tomcat 7

Na próxima etapa, selecione o diretório onde está localizado o seu Tomcat 7, clicando em Browse. Lembre-se da versão do JDK 6 para trabalhar com o Tomcat. Confirme no botão Finish.

Figura 2 – Definindo o local onde foi instalado o Tomcat 7

Retornando a primeira etapa da criação do projeto, em Configuration, selecione JavaServer Faces v2.0 Project. Com suas definições completas, podemos prosseguir em Next.

Figura 3 – Definição inicial do projeto completa

Iremos executar o botão Next até a última etapa, ao qual definiremos as bibliotecas do projeto.

Na última etapa do assistente, deixe Type como User Library, caso não esteja.

Figura 4 – Definindo em biblioteca de usuário

Logo abaixo, na lateral direita, você encontra o ícone Manage libraries. Dê um clique nele.

Figura 5 – Seleção de Manage libraries

Ao abrir a caixa de diálogo Preferences, verá que está filtrado direto no item User Libraries. Clique no botão New e, na caixa de diálogo New User Library digite JSF2 e confirme.

Figura 6 – Criando a biblioteca de usuário JSF2

Retornando para Preferences, selecione JSF2 e clique no botão Add JARs. Selecione os JARs do JSF 2.0 que necessitamos para o projeto e confirme.

Faça o mesmo processo para criar uma nova biblioteca de usuário, mas a chame desta vez de JSTL. Adicione as bibliotecas JSTL a esta biblioteca de usuário. Confirme por fim a caixa de diálogo Preferences no botão OK.

Figura 7 – Bibliotecas de usuário JSF2 e JSTL criadas

Por fim, selecione as bibliotecas de usuário criadas, pois elas serão adicionadas ao projeto automaticamente. Confirme a criação do projeto no botão Finish.

Figura 8 – Finalizando a criação do projeto com a seleção das bibliotecas de usuário criadas

Na finalização do projeto, o Eclipse lançará uma mensagem perguntando se desejamos mudar de perspectiva. Diga que sim, clicando em Yes. O Eclipse alterará de perspectiva, colocando na Java EE.

O  deployment descriptor

O assistente do projeto criou automaticamente o web.xml com suas respectivas configurações.

Criando o JavaBean Texto

Com o direito do mouse sobre o projeto, selecione New>Class no menu de contexto.

Na caixa de diálogo New Java Class, preencha o pacote (br.com.integrator) e o nome da classe, no caso Texto, em Name. Confirme no botão Finish.

Figura 9 – A classe Texto

Altere a classe Texto conforme mostrado na Listagem 1.

Listagem 1 – O JavaBean Texto

package br.com.integrator;

@ManagedBean(name="textoBean")

@RequestScoped

public class Texto {

private String texto;

public String getTexto() {

return texto;

}

public void setTexto(String texto) {

this.texto = texto;

}

}

Sem utilizar o arquivo faces-config.xml

Caso o leitor ainda não teve a oportunidade, recomendo ler o meu artigo JavaServer Faces 2.0 na Prática – Parte 2, que explica como funciona atualmente o JSF na versão 2.0.

Criando a página JSF com suporte ao AJAX

Com o direito do mouse sobre WebContent, vá no menu de contexto em New>HTML File. No diálogo New HTML File, dê o nome no arquivo de ajaxjsf.xhtml e prossiga no assistente clicando em Next

.

Figura 10 – Criando uma página JSF 2

Na última etapa de criação da página, como não temos definido um Template que se encaixe na nossa necessidade de desenvolvimento da página, selecione o primeiro item da lista, no caso New Facelet Composition Page. Finalize no botão Finish.

Figura 11 – Seleção do template New Facelet Composition Page

Com a página ajaxjsf.xhtml criada e aberta no editor, altere-a deixando exatamente como mostrado na Listagem 2 a seguir: Listagem 2 – A página ajaxjsf.xhtml completa

<!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:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core">

<h:head><title>Ajax com JSF 2.0</title></h:head>

<h:body>

<h:form id="form1">

<h:outputScript name="jsf.js" library="javax.faces" target="head"/>

<h:inputText id="texto" value="#{textoBean.texto}">

<f:ajax event="keyup" execute="form1:texto" render="form1:resultado"/>

</h:inputText>

<br />

Resultado:

<strong>

<h:outputLabel id="resultado" value="#{textoBean.texto}" />

</strong>

</h:form>

</h:body>

</html>

Figura 12 – Página ajaxjsf.xhtml no editor visual Web Page Editor

Por fim, execute a página, já que o cursor e o foco estão nela, indo ao meu Run> Run As>Run on Server. Na caixa de diálogo, deixe o Tomcat como escolha para executar o projeto e clique no botão Next.

Figura 13 – Selecionando o servidor Java para executar o projeto

Adicione em Configured o projeto e clique no botão Finish. Neste momento o Apache Tomcat iniciará, executando a página JSF contendo o AJAX.

O aplicativo é de simples compreensão, como o criado no exemplo com JSF 1.2 e RichFaces. O texto digitado no campo de texto, é enviado ao servidor sem que seja submetido por um botão. Transportado ao Managed Bean textoBean, representado pela classe Texto, o valor enviado é retornado ao label abaixo, em Resultado. Como estamos usando AJAX, o texto vai sendo digitado e enviado a cada nova letra para o servidor e retornada à página sem um reload no browser.

Figura 14 – A página executada

Este envio ao servidor, sem reload na página, e o retorno é feito graças ao suporte ao AJAX do JSF 2.0, pela tag <f:ajax />:

<h:inputText id=“texto” value=“#{textoBean.texto}”>

<f:ajax event=“keyup” execute=“form1:texto” render=“form1:resultado”/>

</h:inputText>

Esta tag trabalha com o evento JavaScript onkeyup (que no caso deve ser keyup), que chama o servidor e renderiza o resultado onde o atributo render estiver apontando. Observe que esta tag está dentro da tag JSF <h:inputText/>, que é exatamente onde ela trabalhará para receber o evento e se comunicar com o servidor, transmitindo as informações nela contidas.

No próximo artigo

No próximo artigo veremos uma biblioteca AJAX compatível com JSF 2.0 e alguns recursos interessantes que ela pode nos oferecer.

Até o próximo artigo pessoALL.

Este artigo é o terceiro de uma série ao qual vou ensiná-los a trabalhar com o JavaServer Faces 2.0.

Nesta terceira parte iremos conhecer melhor o framework JavaServer Faces 2.0 e seu comportamento.

Dúvidas e críticas são bem vindas.

Conhecendo melhor o JavaServer Faces

Como pudemos  ver, o framework JSF é responsável por interagir com o usuário (cliente). Porém, o escopo de JSF é restringido à camada de apresentação. A persistência de dados e outras conexões back-end estão fora do escopo de JSF.

Se você está começando agora, recomendo voltar até a Parte 1 para melhor compreender este artigo.

Renderizando componentes

Ao chamar uma página JSF no navegador, o servidor inicia uma chamada a árvore de componentes do JSF para renderizar a página de acordo com o encontrado.

O servlet JavaServer Faces inicializa o código do framework e lê a página index.xhtml. Como esta página contém tags JSF, como <h:form />, <h:inputText />, <h:commandButton /> e <h:outputText />, cada uma possui uma classe tag handler associada. Quando a página é lida, as tags handles são executadas, de modo que cada uma colabora com a outra para construir o que chamamos de árvore de componentes. A Figura 1 mostra as tag handlers dos componentes utilizados no exemplo criado na Parte 2 do conjunto de artigos.

Figura 1 – Os componentes da aplicação de exemplo

Após ler cada componente, a página HTML é devolvida ao navegador, que a renderiza. Todo e qualquer texto que não for uma tag JSF será passado adiante, onde as demais que não forem serão convertidas em HTML.

O processo de devolver a página no formato HTML ao navegador é chamado de encoding. Se olhar o código HTML gerado, verá que o objeto UIInput, por exemplo, procura o ID (unique ID) e o seu valor atual da expressão #{meuManagedBean.texto}. Por padrão, as strings de atributos ID, do HTML, são adicionadas pelo framework, podendo ser aleatórias. Caso não houver um ID na tag <h:form/>, como no exemplo desenvolvido, poderemos ter um ID como j_idt17:texto:

<input id=”j_idt17:texto” name=”j_idt17:texto” />

Se houver um atributo ID na tag <h:form/> (ex: <h:form id=”form1″ />), você terá como resultado o ID form1:texto na renderização da página:

<input type=”text” />

Se desejarmos retirar essa pré-definição de nome no atributo ID, basta adicionar seguinte atributo e seu valor na tag <h:form/>: prependId=”false”. O resultado tag <h:form/> completa ficaria assim:

<h:form prependId=”false”>

No encoding, o atributo ID gerado seria apenas o nome atribuído na tag pela propriedade id, como, por exemplo, na tag de entrada <h:inputText id=”texto” />, onde a renderização HTML seria:

<input type=”text” />

Depois de ocorrer o encoding, elas são enviadas ao navegador que agora as reconhece como uma página HTML. A Figura 2 ilustra esta transformação.

Figura 2 – Codificação e decodificação das páginas JavaServer Faces

Do navegador para o servidor

Depois que o usuário receber a página, este a preenche como deve e submete o formulário ao servidor novamente. No caso do exemplo, o formulário é submetido pelo método HTTP POST, contendo o endereço da página e os dados do formulário.

Os dados no servidor são colocados em uma tabela hash, como ocorre normalmente em processamentos Servlet, que pode ser acessada por todos os componentes. O framework JSF permite que cada componente inspecione esta tabela em um processo chamado de decoding. Neste momento, cada componente decide como serão interpretados os dados do formulário.

O processo como um todo é chamado de Ciclo de Vida e será visto mais adiante, ainda neste artigo.

A arquitetura do JavaServer Faces

Para melhor compreensão, a seguir teremos um resumo de como funcionam as páginas JavaServer Faces:

A arquitetura Model-View-Controller

JSF conecta a apresentação e o modelo. Como vimos, um componente de apresentação pode ser unido a uma propriedade do Managed Bean de um objeto modelo:

<h:outputText value=”#{meuManagedBean.texto}”/>

O JSF opera como o controlador que reage ao usuário processando a ação e os eventos de alteração de valores, enquanto dirige o código para atualizar o modelo ou a apresentação. A invocação ao controlador ocorre através do componente <h:commandButton />.

Quando o botão é clicado e o formulário é enviado (submetido) ao servidor, a implementação JSF invoca o método para checar o bean do usuário. O componente <h:commandButton /> pode possuir um método que entra em ação para atualizar o modelo e devolver para a navegação o ID da próxima página a ser exibida.

Validações e Conversão de dados

Usuários entram com os dados em um formulário Web com um formato de texto. Podemos validar de forma padrão ou personalizada como serão aceitos estes textos (dados). Estas validações, assim como suas conversões, são feitas pelo conjunto de tags JSF Core, que incluímos da seguinte forma:

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core">

A biblioteca de tags Core pode ser incluída também em uma página JSP da seguinte forma:

<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f”%>

Para validar, por exemplo, o tamanho mínimo de caracteres aceitos, podemos fazer da seguinte forma:

<h:inputText id="texto" value="#{meuManagedBean.texto}">

<f:validateLength minimum="3" />

</h:inputText>

Também podemos validar se um campo é obrigatório ou não, utilizando required=”true”:

<h:inputText value=”#{meuManagedBean.texto}” required=”true” >

Objetos de negócios também requerem informações como números, datas ou outros tipos de dados. Com JavaServer Faces podemos definir com as tags Core como serão os dados aceitos em um determinado campo, convertendo-os ou até mesmo personalizar a regra de conversão.

Um exemplo simples seria utilizar o <f:convertDateTime />, que faz com que o campo de entrada seja apenas um tipo de data e hora com o formato definido, que pode ser acrescido ao seu código da seguinte forma:

<h:inputText id="texto" value="#{meuManagedBean.texto}">

<f:convertDateTime pattern="dd/MM/yyyy" />

</h:inputText>

Manipulação de erros

O JSF utiliza regras de validação para campos como “este campo é obrigatório”. Claro que, quando os usuários entrarem com dados inválidos, preciamos exibir mensagens de erros mais apropriadas.

Os erros, tanto de validação, como de conversão, são tratados da mesma forma: uma mensagem é adicionada ao componente que não passou na verificação (seja validação ou conversão), onde a página atual é novamente exibida contendo uma frase do problema ocorrido.

As tags utilizadas para tais representações são: <h:message /> e <h:messages />. Os erros também podem ser lançados de forma personalizada utilizando o atributo validatorMessage ou requiredMessage. Para o exemplo, poderíamos ter algo assim:

<h:inputText

value="#{meuManagedBean.texto}"

required="true"

validatorMessage="Mínimo de 3 caracteres"

requiredMessage="Campo obrigatório">

<f:validateLength minimum="3" />

</h:inputText>

<h:messages />

Internacionalização

JSF fornece suporte à internacionalização como codificações de caractere e a seleção de pacotes de recursos.

A internacionalização no JSF 2.0 é possível de duas formas: faces-config.xml e a tag Core <f:loadBundle />.

Para uma internacionalização com o arquivo faces-config.xml, devemos adicionar este arquivo dentro do diretório WEB-INF. O conteúdo é mostrado na Listagem 1.

Listagem 1 – O arquivo faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"

version="2.0">

<application>

<resource-bundle>

<base-name>br.com.integrator.rotulos</base-name>

<var>rotulo</var>

</resource-bundle>

<locale-config>

<default-locale>pt</default-locale>

<supported-locale>en</supported-locale>

</locale-config>

</application>

</faces-config>

O arquivo faces-config.xml é usado no JSF 2.0 principalmente para numerosas configurações globais de sua aplicação.

Os rótulos neste caso são colocados em arquivos .properties, onde o nome de cada arquivo possui _ABREVIAÇÃO DO IDIOMA como, por exemplo: rotulos_pt.properties. Crie os arquivos mostrados nas Listagens 2 e 3 dentro do pacote br.com.integrator.

Listagem 2 – O arquivo rotulos_en.properties

texto = Text:

enviar = Submit Text

obrigatorio = Required Field

validacao = Minimum 3 characters

titulo = One simple JSF Page

Listagem 3 – O arquivo rotulos_pt.properties

texto = Texto:

enviar = Enviar Texto

obrigatorio = Campo Obrigatório

validacao = Mínimo de 3 caracteres

titulo = Uma simples página JSF

Para compreender como ficará seu projeto, a Figura 3 mostra onde estará cada um dos arquivos que o compõem.

Figura 3 – Estrutura de diretórios do projeto

As alterações na página index.xhtml são mostradas na Listagem 4 a seguir.

Listagem 4 – Alterações na página index.xhtml

...

<h:head>

<title><h:outputText value="#{rotulo.titulo}" /></title>

</h:head>

<h:body>

<h:form>

<h:outputText value="#{rotulo.texto}" />

<h:inputText id="texto"

value="#{meuManagedBean.texto}"

required="true"

validatorMessage="#{rotulo.validacao}"

requiredMessage="#{rotulo.obrigatorio}">

<f:validateLength minimum="3" />

</h:inputText>

<h:messages />

<br />

<h:commandButton value="#{rotulo.enviar}" action="enviar" />

<br />

<h3><h:outputText value="#{meuManagedBean.texto}" /></h3>

</h:form>

</h:body>

...

Para visualizar as alterações, será necessário trocar o idioma padrão do seu navegador. No Mozilla Firefox, por exemplo, basta ir em Ferramentas>Opções>Conteúdo>Idiomas e clicar no botão Selecionar. Coloque o idioma diferente do que está usando como primeiro na ordem da lista de idiomas de preferência e confirme tudo. Dê um reload na página que verá as alterações.

Caso não queira usar uma declaração global dos recursos de localidades, podemos adicionar a tag <f:loadBundle  /> em cada página JSF. A seguir o trecho que poderá substituir a configuração global no arquivo faces-config.xml.

<f:loadBundle

basename="br.com.integrator.rotulos"

var="rotulo />

Nota: Das duas formas apresentadas para internacionalização de uma aplicação Web com o framework JSF, a versão com o elemento <resource-bundle />, encontrado no arquivo faces-config.xml, é a mais eficiente, pois é utilizado em todo o aplicativo e não somente na página configurada.

Componentes customizados

O desenvolvedor de componentes pode criar componentes sofisticados que são chamados pelos designers simplesmente colocando suas tags em suas páginas, ou arrastando-as caso sejam visuais. Um exemplo é pegar bibliotecas criadas, como de calendários, gráficos ou de upload de arquivos com barra de progresso e simplesmente adicionar na página desenvolvida.

Desde o JavaServer Faces 2.0, criar componentes customizados ficou mais fácil, com um recurso chamado de Composite Components (Componentes Compostos). Para exemplificar como funcionam os recursos de Composite Components, altere como nos passos a seguir seu projeto:

1. Crie um diretório chamado de resources, no mesmo diretório onde se encontra a página index.xhtml.
2. Dentro do diretório resources, adicione outro diretório chamado de componente.
3. No diretório componente, crie uma página XHTML, chamada de component.xhtml,  com o conteúdo mostrado na Listagem 5.

Listagem 5 – Conteúdo do arquivo component.xhtml

<!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:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:composite="http://java.sun.com/jsf/composite">

<h:head>

<title>Meu Primeiro Componente JSF 2.0</title>

</h:head>

<h:body>

<composite:interface>

<composite:attribute name="identificacao" required="true"/>

<composite:attribute name="managedbean" required="true"/>

<composite:attribute name="qtdcaracteres" required="true"/>

</composite:interface>

<composite:implementation>

<h:outputText value="#{rotulo.texto}" />

<h:inputText id="#{cc.attrs.identificacao}"

value="#{cc.attrs.managedbean}"

required="true"

validatorMessage="#{rotulo.validacao}"

requiredMessage="#{rotulo.obrigatorio}">

<f:validateLength minimum="#{cc.attrs.qtdcaracteres}" />

</h:inputText>

<h:messages />

<br />

<h:commandButton value="#{rotulo.enviar}" />

<br />

<h3><h:outputText value="#{cc.attrs.managedbean}" /></h3>

</composite:implementation>

</h:body>

</html>

Uma página de componente(s) no JSF 2.0 pode conter suporte aos componentes do JSF, a validação, converters e listeners. Além disso, qualquer outra tag HTML pode ser adicionada ao componente, incluindo também recursos de templates.

As tags utilizadas para criar componentes compostos no exemplo são: <composite:interface/> e <composite:implementation/>. Para utilizá-las, é necessário adicionar o seguinte namespace:

<html xmlns:composite=”http://java.sun.com/jsf/composite”>

A tag <composite:interface/> declara o contrato para um componente, ou seja, definimos quais são os atributos que o componente receberá. Os atributos são definidos dentro desta tag, com a tag <composite:attribute />, onde temos os atributos name e required. Em name colocamos o nome do atributo do nosso componente composto e definindo true, em required, definimos o atributo como de preenchimento obrigatório.

O exemplo mostrado possui um componente que terá os seguintes atributos obrigatórios, em ordem definidos na interface: identificacao, managedbean e qtdcaracteres.

A tag <composite:implementation/> é onde definimos o conteúdo do componente composto. Onde definir #{cc.attrs.x}, sendo que “x” é o nome do atributo do seu componente, será o local de substituição quando preencher o componente na página que o utilizar.

Para utilizar este componente, vá à página index.xhtml e altere seu conteúdo conforme a Listagem 6 a seguir:

Listagem 6– A página index.xhtml

<?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:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns: comp="http://java.sun.com/jsf/composite/componente">

<h:head>

<title><h:outputText value="#{rotulo.titulo}" /></title>

</h:head>

<h:body>

<h:form>

<comp:component

identificacao="texto"

managedbean="#{meuManagedBean.texto}"

qtdcaracteres="3" />

</h:form>

</h:body>

</html>

Para utilizar o componente criado, você adiciona o seguinte namespace em sua página:

xmlns: comp=”http://java.sun.com/jsf/composite/componente”

Observe que componente, no namespace, é o nome do diretório onde se encontra seu componente composto (o diretório fica dentro de resources caso não se lembre). O nome comp é dado por nós para chamar o componente. Podemos ter inúmeros componentes dentro de um diretório, assim como vários diretórios dentro de resources. Os agrupamos como acharmos melhor, de acordo com o conveniente no desenvolvimento de nossos aplicativos.

Para utilizar o componente, o chamamos assim: <comp:component/>. Onde component é o nome do arquivo .xhtml criado. Os atributos deste componente podem ser vários e os definidos como obrigatórios precisam ser preenchidos para que não ocorram erros.

Figura 4 – Da criação do componente até sua utilização e renderização na página

Renderizadores Alternativos

Por padrão, JSF produz HTML em sua saída, mas é extensível o suficiente para produzir outros tipos de saídas como, por exemplo, WML ou XUL.

Ajax

JavaServer Faces possui atualmente uma comunicação Ajax padrão que torna-se totalmente transparente as chamadas cliente-servidor sem a necessidade de reload na página.

Para conhecer rapidamente o Ajax no JavaServer Faces 2.0, altere a página index.xhtml como mostrado na Listagem 7.

Listagem 7 – Alterações na página index.xhtml

...

<h:form>

<h:outputScript name="jsf.js" library="javax.faces" target="head"/>

<h:outputText value="#{rotulo.texto}" />

<h:inputText id="texto" value="#{meuManagedBean.texto}"/>

<br />

<h:commandButton id="enviar" value="#{rotulo.enviar}">

<f:ajax execute="form1:texto" render="form1:saida"/>

</h:commandButton>

<br />

<h3>

<h:outputText id="saida" value="#{meuManagedBean.texto}" />

</h3>

</h:form>

...

Com algumas pequenas mudanças, sua aplicação passou a utilizar o recurso de Ajax.

O JSF 2.0 possui uma nova API JavaScript, ao qual pode chamar o servidor, enviando e recebendo dados. Nesta API JavaScript, temos o seguinte método:

jsf.ajax.request(source, event, options)

Este método envia e recebe os dados do servidor de forma assíncrona diretamente para os componentes da view. Você pode vê-lo no HTML renderizado.

A tag <f:ajax /> que utilizamos no exemplo pode ser substituída pela chamada direta à  jsf.ajax.request() da seguinte forma:

<h:commandButton value=”#{rotulo.enviar}”

onclick=”jsf.ajax.request(this, event,

{execute: ‘form1:texto’, render: ‘form1:saida’}); return false;” />

Em ambos os casos, seja com a tag <f:Ajax/> ou pelo script adicionado na tag, na renderização, o método recebe o elemento que está disparando a ação , que no geral é o próprio que o chama (this), o evento e um conjunto de parâmetros.

Neste conjunto de parâmetros existem duas propriedades: execute e render. Tanto o execute, como o render, recebem os IDs dos elementos HTML renderizados no cliente, ou seja, o ID dos componentes que passaram pelo encoding. O execute define o componente que será submetido ao servidor via Ajax e render qual componente receberá a resposta.

O Ajax padrão de JSF 2.0 é obtido pela tag <h:outputScript />. Esta tag, configurada como no exemplo, renderiza a tag HTML <script/>, que trás um JavaScript existente na biblioteca JSF 2.0. Os três atributos usados no exemplo são:

• name – O nome do arquivo externo de JavaScript que, no caso, pertence a própria biblioteca de JSF 2.0;
• library – A biblioteca usada;
• target -  Onde será renderizada a tag <script/>, que no caso será por entre as tags <head/>, sempre no HTML.

Nota: O JavaScript contido no JSF 2.0 em questão está dentro do JAR jsf-impl.jar, em META-INF/resources/javax.faces/jsf.js. Veja mais a respeito sobre o JavaScript padrão de JSF 2.0 no seguinte link: https://javaserverfaces.dev.java.net/nonav/docs/2.0/jsdocs/index.html.

O MVC de JSF

Para que JSF funcione, registramos a classe FacesServlet no deployment descriptor (web.xml). Ao fazer este registro, os pedidos são controlados pela classe javax.faces.webapp.FacesServlet (o Controller do MVC), uma implementação de javax.servlet.Servlet, roteando o tráfego e administrando o ciclo de vida dos beans e componentes de interface do usuário (UI).

Figura 5 – O MVC do framework JSF

Os componentes UI são organizados em uma estrutura de árvore onde, cada componente, pode ser associado com os métodos e atributos de um bean. Cada componente também pode ser associado com uma função de validação ou classe.

Por trás, FacesServlet aceita pedidos de entrada e controla o objeto javax.faces.lifecycle.Lifecycle. Usando uma factory, ela cria um objeto do tipo javax.faces.context.FacesContext, que contém todos os processos.

O ciclo de vida do JSF

O objeto Lifecycle usa o objeto FacesContext em seis fases que compõem o ciclo de vida de uma aplicação JSF. Cada fase tem uma ação importante em sua aplicação e deve ser bem compreendida para que você possa manipular ao extremo sua interface e melhorar a legibilidade de seu desenvolvimento.

Figura 6 – Ciclo de vida do JavaServer Faces

As seis fases são executadas na seguinte ordem:

1. Restaurar Apresentação ^[1]– Esta fase inicia o processamento da requisição do ciclo de vida por meio da construção da árvore de componentes do JSF. Cada árvore de componentes possui um identificador único durante todo o aplicativo. O JSF constrói a apresentação da página e salva  na instância FacesContext para processamento das fases seguintes.
2. Aplicar Valores Requisitados – Nesta fase, quaisquer novos valores inseridos são extraídos e armazenados por seus apropriados componentes. Se o valor do componente não for uma String, então ele é convertido para o seu determinado tipo. Se a conversão falhar, ocorrem diversas situações:

1. 1. Uma mensagem de erro é gerada e associada com o componente;
2. 2. Uma mensagem de erro é armazenada no FacesContext e depois mostrada posteriormente na fase de Renderizar a Resposta;
3. 3. O ciclo de vida pula a fase de Renderizar a Resposta quando esta se completou.

1. Processar Validações – Depois do valor de cada componente ser atualizado, na fase de processo de validações, os componentes serão validados naqueles valores, se necessário. Um componente que necessita de validação deve fornecer a implementação da lógica de validação. Por exemplo, em um carrinho de compras, podemos determinar a quantidade mínima a ser digitada e máxima. O valor requisitado é um inteiro (verificado na fase anterior) e, como passou pela fase 2, nessa fase pode ser barrado por estar além do determinado (com uma quantidade mínima ou máxima diferente da estipulada).
2. Atualizar Valores do Modelo – Alcança-se essa fase após todos os componentes serem validados. Nesta fase são atualizados os dados do modelo do aplicativo. Na página em que foi criada para enviar um texto, a informação digitada foi armazenada no Managed Bean durante esta fase. Por ter passado pelo processo de validação, temos garantias que o valor armazenado  será garantido nessa fase. Entretanto, os dados podem violar a lógica de negócios, ao qual a validação ocorre na fase seguinte.
3. Invocar Aplicação – Durante esta fase, a implementação JSF manipula quaisquer eventos do aplicativo, tal como enviar um formulário ou ir a outra página através de um link. Estes eventos são ações que retornam geralmente uma  string que está associada a uma navegação no qual se encarrega de chamar a página determinada.
4. Renderizar Resposta – Esta é a fase final, ao qual é renderizada a página. Se este é um pedido inicial para esta página,  os componentes são acrescentados à apresentação neste momento. Se este é um postback,  os componentes já foram acrescidos à apresentação.  Se há mensagens de conversão ou erros de validação e a página contém um ou mais componentes <mensage /> ou um componente <messages />, estes serão exibidos.  Reciprocamente, se a página não contém um componente de mensagem,  nenhuma informação aparecerá.

Numa requisição a uma página JSF, podemos passar por todas essas fases ou por nenhuma, dependendo do tipo de pedido, de erros que ocorrem durante as validações, conversões e do tipo de resposta.

Uma requisição e uma resposta são consideradas faces request/response se contiverem tags JSF, assim como as que não as contém são chamadas de non-faces request/response. Uma non-faces request pode vir de um clique em um link, por exemplo.

Como já dito, toda requisição é recebida pelo FacesServlet e prossegue a passagem pelas fases (Lifecycle) até uma resposta ser retornada ao cliente.

O FacesServlet recupera uma instância de FacesContext, do FacesContextFactory, fornecendo uma implementação de LifeCycle. O processamento do ciclo de vida é então delegado a interface LifeCycle, a partir da chamada ao método execute. A implementação de LifeCycle inicia as fases do ciclo de vida. Se existir algum validador associado a algum campo do formulário este é inicializado nessa primeira fase. A árvore é armazenada pelo contexto e será utilizada nas fases seguintes. Também o estado do formulário é salvo automaticamente.

Testando o ciclo de vida

Para confirmar como todas as fases do ciclo de vida são usadas e quais são, basta criar um simples PhaseListener e mandá-lo gerar a saída antes e depois de cada fase.

Criando uma classe Phase Listener

Criar uma classe que implemente a PhaseListener exigem dois passos:

• Criar uma classe que implemente PhaseListener;

• Registrar esta classe no arquivo de configurações do JSF.

A classe PhaseListener deve implementa a classe javax.faces.event.PhaseListener.  A Listagem 8 demonstra como criar esta classe:

Listagem 8 – A classe PhaseListener

package br.com.integrator.listener;

public class PhaseListener implements javax.faces.event.PhaseListener {

public void afterPhase(PhaseEvent event) {

event.getFacesContext().getExternalContext().

log("AFTER: "+event.getPhaseId());

}

public void beforePhase(PhaseEvent event) {

event.getFacesContext().getExternalContext().

log("BEFORE: "+event.getPhaseId());

}

public PhaseId getPhaseId() {

return PhaseId.ANY_PHASE;

}

}

Para a classe da Listagem 8, três métodos são implementados: afterPhase(), beforePhase() e getPhaseId().

Os dois primeiros,  afterPhase() e  beforePhase(), definem o que ocorre ANTES e DEPOIS de cada fase.  Nestes métodos foram incluídos a capacidade de imprimir na saída console o que ocorreu.

O terceiro método, getPhaseId(), especifica  em  qual das fases é invocado este ouvinte (Listener) e PhaseId.ANY_PHASE menciona que será para todas as fases.

Com a classe criada, o próximo passo é registrar esta classe PhaseListener no arquivo de configurações do JSF (faces-config.xml).

Para fazer isso, no arquivo faces-config.xml,  adicionaremos os seguintes elementos do trecho a seguir:

<faces-config ...>

...

<lifecycle>

<phase-listener>

br.com.integrator.listener.PhaseListener

</phase-listener>

</lifecycle>

</faces-config>

Ao rodar a aplicação, haverá saídas no console de acordo com o uso da aplicação. A Figura 7 mostra tanto o uso da aplicação como sua saída no console, passando pelas seis fases do ciclo de vida.

Figura 7- Execução do exemplo e saída no Console resultante da classe PhaseListener

Podemos testar o comportamento das fases enviando o formulário sem dados preenchidos ou preenchendo erroneamente. É uma forma de analisar de perto o ciclo de vida do framework JavaServer Faces.

Conhecendo o comportamento do  JavaServer Faces

Agora que já fizemos nossa primeira aplicação em JSF, é mais fácil de entender os serviços que o framework JSF oferece ao desenvolvedor.  Como pudemos ver, o framework JSF é responsável por interagir com o usuário (cliente) e fornece componentes para criar uma apresentação visual de uma aplicação Web, ou seja, o escopo de JSF é restringido à camada de apresentação. A persistência de banco de dados e outras conexões de back-end estão fora do escopo de JSF.

A arquitetura do JavaServer Faces, em um alto nível, se assemelha ao mostrado na Figura 1. Aplicações JSF utilizam como padrão a interceptação HTTP via Servlet Faces e produz HTML. Esta mesma arquitetura permite “plugar” novos elementos, gerando outras características, possibilitando criar páginas usando eventos, listeners e componentes como o seu irmão Java Swing.

Figura 1. A arquitetura JavaServer Faces

A Figura 1 mostra a arquitetura rica e flexível existente no JSF, onde:

• FacesServlet – é o servlet principal para a aplicação e, opcionalmente, você pode ter o arquivo de configuração faces-config.xml^[1].
• Renderers -  são os responsáveis por exibir um componente e traduzir uma entrada de valor realizada por um usuário em componente.
• Páginas XHTML, JSP – o JavaServer Faces permite mais de um tipo de arquivo para renderizar seus componentes (PDL – Page Declaration Language^[2]), como páginas JSP ou Facelets.
• Converters – convertem o valor de um componente (como datas, moedas, porcentagem e outros) dando-lhes novos formatos.
• Validators – responsáveis por validar a entrada ocorrida no componente pelo usuário.
• Managed Bean – a lógica do negócio é gerenciada pelos managed beans, que controlam inclusive a navegação por entre páginas.
• Ajax – Tanto o envio como o recebimento de dados podem ser feitos via Ajax, sem a necessidade de reload na página do usuário.

[2] PDL herda a funcionalidade do núcleo de dois conhecidos projetos JSF: Facelets e JSFTemplates. Entre todos os outros recursos, permite criar novos componentes JSF de forma declarativa, sem a criação de um grupo de classes Java como era nas versões anteriores do JSF.

Compreendendo o comportamento da primeira página JSF criada

Assim como ocorre com outras bibliotecas de tags, o JavaServer Faces é configurado através da diretiva taglib, onde existem as bibliotecas que manipulam o HTML e a Core.

Para usar as tags HTML personalizadas que representam componentes JavaServer Faces, você precisa da diretiva taglib mostrada a seguir, geralmente posicionadas no topo de cada página JSP, como de costume no uso dessa diretiva.

<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h”%>

No caso da utilização do Facelets, onde as páginas são XHTML’s, você terá a inclusão da tag personalizada HTML de JSF dessa forma:

<html … xmlns:h=”http://java.sun.com/jsf/html”>

Nota: Com a evolução, o desenvolvimento em JSF atualmente pode utilizar a versão com XHTML descartando a anterior, uma vez que se adéqua melhor ao modelo Web 2.0.

Dentre as tags JSF adicionadas na página, a tag <h:form />, representa um componente UIForm e cria um formulário para envio de dados pelo JSF. No HTML gerado, temos a tag <form/> para que o browser a compreenda.

A tag <h:outputText /> , representando um componente UIOutput que exibe valores, é a responsável pela geração do texto renderizado na página do usuário que, na grande maioria das vezes, é dinâmico. No atributo value você adicionou o texto diretamente, mas poderia adicionar a JSF EL (JavaServer Faces Expression Language), visto mais adiante, referente ao Bean criado, dando assim o retorno ao browser de um valor dinâmico produzido por uma entrada ou vindo do banco de dados.

A página no Browser

A página criada no aplicativo poderá ser aberta através do seguinte endereço também:

http://localhost:8080/TrabComJSF/faces/index.xhtml

Isso ocorre porque adicionamos a seguinte configuração no deployment descriptor (web.xml):

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

Os itens em destaque mostram que o Servlet FacesServlet, usado para renderizar os componentes JSF, é acionado quando temos “/faces/” antes do nome da página.

Adicionando um bean ao projeto

Na primeira página JSF que criou, você simplesmente adicionou o texto diretamente na tag HTML JSF  <h:outputText />.

Desta vez, você irá adicionar o conteúdo através de um Managed Bean, que nada mais é que uma classe JavaBean comum. A Listagem 1 mostra o conteúdo do Managed Bean que deverá ser feito:

Listagem 1 – A classe MeuManagedBean.java

package br.com.integrator;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="meuManagedBean")
@RequestScoped
public class MeuManagedBean {

private String texto;

public String getTexto() {
return "Exemplo Simples";
}
}

A estrutura de diretórios com o Managed Bean

Sua estrutura de diretórios deverá ser similar ao mostrado na Figura 2, onde apresentamos a classe MeuManagedBean.java compilada:

Figura 2. Estrutura de diretórios do projeto TrabComJSF

Alterando a página do projeto

Vá até a página index.xhtml e altere a tag JSF  <h:outputText /> da seguinte forma:

<h:outputText value=”#{meuManagedBean.texto}” />

Ao alterar a tag <h:outputText/>, o atributo value recebeu agora os delimitadores #{…}. Estes delimitadores são indicações de expressão ao qual ligam o componente JSF ao Managed Bean e seu atributo get correspondente, neste caso.

No JavaServer Faces 2.0, usamos a anotação @ManagedBean, de javax.faces.bean.ManagedBean, para registrar a classe como sendo uma Managed Bean onde, através do atributo name, damos o nome que será acessível pelos componentes das páginas JSF. No caso, chamamos de meuManagedBean.

O conteúdo é exibido pelo método público getTexto(), responsável por enviar as informações do Managed Bean para a página JSF e exibi-las através da tag <h:outputText />. A Figura 3 mostra como funciona essa integração.

Um managed bean possui um escopo onde, no caso, está definido como por requisição^[3]. Este escopo é definido na anotação @RequestScoped, de javax.faces.bean.RequestScoped.

Figura 3. Componente da página JSF lendo o Managed Bean

Os Beans em JSF

Um bean em Java é uma classe que expõe atributos/propriedades e eventos em um ambiente como o JSF. Um atributo é nada mais que uma variável nomeada com um determinado tipo que pode ser lido ou escrito. No bean, existe a convenção de declarar tais atributos como sendo do tipo privado e expô-los através de métodos públicos que encapsulam seus valores com as iniciais: set e get que servem para atribuir um valor e para pegar este valor respectivamente.

Utilizando Getters e Setters em um Managed Bean

Para compreender melhor estas características, vamos modificar novamente o exemplo de modo que possamos enviar dados de um campo e recebê-los.

Figura 4. Rascunho da representação final do exemplo

Altere a página index.xhtml como mostra o trecho a seguir:

<h:form>
<h:inputText id="texto" value="#{meuManagedBean.texto}" />
<br />
<h:commandButton value="Enviar Texto" action="enviar" />
<br />
<h3><h:outputText value="#{meuManagedBean.texto}" /></h3>
</h:form>

E altere o Managed Bean MeuManagedBean adicionando o método setText() e modificando o método getText() como mostra o trecho a seguir:

public String getTexto() {
return texto;
}
public void setTexto(String texto) {
this.texto = texto;
}

Pronto, basta rodar o exemplo que verá o resultado.

Figura 5. Submissão do texto da página para o Managed Bean e retornando

Na próxima Parte

Desta vez você utilizou mais dois componentes: <h:inputText /> e <h:commandButton />. O primeiro permite a inserção de dados. O atributo id é o nome atribuído ao componente e o value possui a expressão JSF que contém a ligação entre o componente e o atributo no Managed Bean. O segundo componente, o <h:commandButton />, teve o atributo value que representa o texto a ser exibido no componente e action, que chama um método no servidor e, se não houver método, recebe como valor uma string qualquer, que pode indicar navegação para outra página ou não.

Na Parte 3 de JavaServer Faces 2.0 na Prática teremos uma visão geral da arquitetura do framework, com pequenos exemplos funcionais em alguns dos seus aspectos.

Como Rodar o JSF 2.0 na sua máquina

A forma mais rápida de executar um aplicativo em JSF 2.0 é através do NetBeans IDE 6.8.  A versão que você deve baixar é a que possui o Sun GlassFish Enterprise Server v3 que, não por acaso, possui suporte ao Java Web e EE.

JavaServer Faces no NetBeans IDE – Criando um Projeto JSF 2.0

O NetBeans IDE, graças ao GlassFish v3, possui as bibliotecas necessárias para desenvolver uma aplicação JavaServer Faces.

Para criar um projeto com JavaServer Faces, siga os seguintes passos:

1. Vá ao menu File e clique no item New Project.

Figura 1. Criando um novo projeto no NetBeans IDE

2. Na caixa de diálogo New Project selecione o item  Web em Categories e Web Application em Projects. Clique no botão Next.

Figura 2. Criando um projeto Web no NetBeans IDE

3. Na segunda etapa você define o nome do projeto, em Project Name, e a localização, em Project Location. Digite PrimProjJSF (uma abreviação de Primeiro Projeto JavaServer Faces, como sugestão no nome do projeto). Fique atento a localização dos arquivos em sua máquina. Se desejar mudar a localização de onde se encontra o projeto, clique no botão Browse e selecione um novo local. Clique no botão Next.

Figura 3. Nome do Projeto e Localização

3. Na terceira etapa você vai manter o GlassFish v3 em Server, assim como manter o mesmo nome do projeto em Context Path. Clique no botão Next.

Figura 4. Seleção do Servidor de Aplicativos

4. A última etapa é onde você escolhe o framework  JavaServer Faces. Na parte inferior, após selecionar o framework, surgirá duas abas: Libraries e Configuration. Em Libraries mantenha Use default library which comes with Server (JSF 2.0) .

Figura 5. Selecionando o Framework JSF 2.0

5. Na aba Configuration, em  Servlet URL Pattern, mantenha como /faces/*, assim como deixe Facelets em Preferred Page Language (veremos sobre isso em outra parte). Clique no botão Finish para concluir.

Figura 6. Mapeando o Faces Servlet no arquivo web.xml

O NetBeans IDE abrirá automaticamente uma página em JSF criada pelo assistente através do template existente.

Um primeiro contato com JavaServer Faces

Se você não tem base de conhecimento no JavaServer Faces, aqui será o seu princípio.  A idéia é modificar os arquivos configurados pelo NetBeans IDE.

Uma página simples

A primeira página de um projeto Web costuma ser chamada de index. No JSF 2.0, quando utilizamos o padrão de Facelets, esta página possui a extensão .xhtml, ficando  index.xhtml. No NetBeans basta substituir o conteúdo da página index.xhtml pelo mostrado na  Listagem 1.

Listagem 1 – A página index.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:h="http://java.sun.com/jsf/html">
<h:head>
<title>Uma simples página JSF</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Exemplo Simples" />
</h:form>
</h:body>
</html>

O diretório WEB-INF

No diretório WEB-INF encontramos o arquivo web.xml (deployment descriptor) padrão, contendo as adições mostradas na Listagem 2.

Listagem 2 – O arquivo web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

O elemento <servlet-class /> declara javax.faces.webapp.FacesServlet fazendo com que este seja carregado inicialmente. O Servlet é mapeado no contexto pelo elemento <url-pattern /> para que as páginas da aplicação tenham o prefixo /faces/.

Nota: Embora na versão com Eclipse apareça o arquivo faces-config.xml, utilizado até a versão 1.2, na versão do JSF 2.0 não é obrigatório.

Você também pode configurar, para um aplicativo JSF, alguns parâmetros específicos no elemento <context-param />, como no trecho a seguir:

<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Production</param-value>
</context-param>

A seguir você tem a Tabela 1 com alguns parâmetros e sua explicação:

Tabela 1 – Parâmetros de configurações de um projeto JSF no web.xml

Executando o projeto de exemplo

No NetBeans é mais simples, pois o projeto considerado principal (main) já está ativo, sendo necessário apenas ir ao menu Run>Run Main Project.

Figura 7. Executando o Projeto no NetBeans IDE

Resultado é uma página JSF renderizada no Browser como mostrado na Figura abaixo.

Figura 8. Resultado da página JSF renderizada no Browser