Olá, pessoal, tudo bom?

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, veremos aqui 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.

Para desenvolver esse exemplo, utilizei a versão do Eclipse IDE 3.6,
ainda em desenvolvimento, em um ambiente voltado para o trabalho com
Java EE.

O servidor Java que usaremos é o Tomcat 7.0, também 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 de que esse 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.

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 possui suporte direto
ao JavaServer Faces, ou seja, não contém as bibliotecas necessárias para
o desenvolvimento. Para baixar o JSF, faça download no endereço https://javaserverfaces.dev.java.net/.

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.

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.

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

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

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

Selecione o 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.

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
essa biblioteca de usuário. Confirme por fim a caixa de diálogo Preferences
no botão OK.

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.

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.

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

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.

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=<em>"http://www.w3.org/1999/xhtml"</em>

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

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

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

<h:body>
<h:form id=<em>"form1"</em>>

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

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

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

</h:inputText>

<br />

Resultado:

<strong>

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

</strong>

</h:form>

</h:body>

</html>

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.

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.

A página executada

Esse envio ao servidor, sem reload na página, e o retorno são feitos
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>

Essa 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 a 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.

Até o próximo artigo, pessoALL.