JSF2 e AJAX. Desenvolvimento Web com. Construa aplicações Web mais interativas e elegantes

(1)

AJAX pode ser definido como um conjunto de tecnologias que possibilita a troca de informações assíncronas entre o cliente (navegador) e o servidor Web. Dessa forma, é possível fazer requisições ao servidor sem necessidade de atualizar a página por completo. Essa tecnologia está bastante difundida e a versão 2.0 do Java Server Faces (JSF2) trouxe uma integração nativa com AJAX. Este artigo apresenta os principais recursos para desenvolvimento AJAX utilizando tags do próprio JSF2. Além disso, foi desenvolvida uma aplicação-exemplo mostrando a possibilidade do uso desses recursos com PrimeFaces, uma das suítes de componentes em evidência no momento.

JSF2 e AJAX

Wagner Borges

(wagner@quebrandoparadigmas.com): é formado em Sistemas de Informação pela FACID e especializado em Sistemas de Informação para Web. Analista de Sistemas pela Agência de Tecnologia do Piauí, trabalha com desenvolvimento Java na Unidade de Tecnologia da SEFAZ-PI desde 2005. Fundador do site www.quebrandoparadigmas. com com foco em Java, JSF e PrimeFaces.

Ellen Gera de Brito Moura

(ellengera@quebrandoparadigmas.com): é formado em Ciência da Computação pela UESPI e especializado em Tecnologias para Desenvolvimento Web. Analista de Sistemas pela Agência de Tecnologia do Piauí e gerente de Sistemas Corporativos da SEFAZ-PI. Professor das disciplinas Banco de Dados, Estrutura de Dados e Análise e Projeto de Sistemas na Faculdade de Tecnologia do Piauí. Mantém o site www.quebrandoparadigmas.com com foco em Engenharia Ágil.

(2)

: : www.mundoj.com.br : :

mplementar aplicações Web mais elegantes, dinâmicas e intera-tivas tornou-se um dos principais objetivos do desenvolvimento Web. Nesse contexto, o uso de tecnologias AJAX (Asynchronous Javascript and XML) popularizou-se nos últimos anos por possibili-tar solicitações assíncronas de informação entre cliente (navegador) e servidor Web. Como benefício, é possível citar a diminuição da taxa de transferência de dados entre cliente e servidor, por não obri-gar a renderização da página-cliente por completo, e a melhora na usabilidade dos aplicativos Web.

Para atender a essa demanda, existem diversos frameworks que facilitam e aumentam a produtividade na construção de aplicações Web utilizando AJAX. O JavaServer Faces (JSF) é uma dessas fra-meworks e, por ser orientado a componentes e eventos, oferece uma forma intuitiva para o uso de AJAX. O JSF possui integração com vários outros frameworks e suítes de componentes, como, por exemplo, PrimeFaces, RichFaces, IceFaces e OpenFaces. Na versão 1.2 do JSF os recursos AJAX eram obtidos através dessas

biblio-tecas, sem existir um padrão. Entretanto, com o foco em oferecer um ambiente de desenvolvimento mais prático e produtivo, o JSF trouxe na sua versão 2.0 (JSF2) uma API nativa para AJAX. Deste modo, é possível que requisições assíncronas sejam realizadas sem a necessidade de utilizar bibliotecas de terceiros. Agora, existe no JSF2 uma tag própria que fornece as funcionalidades AJAX. Se você está familiarizado com o uso de a4j:support ou p:ajax do RichFaces e PrimeFaces, respectivamente, não terá problema em assimilar e utilizar os novos componentes AJAX presentes no JSF2.

Nesse texto serão apresentadas várias listagens com exemplos prá-ticos do uso de recursos da API AJAX nativa ao JSF2. As listagens mostrarão como enviar requisições, renderizar uma visão parcial-mente e processar uma visão parcialparcial-mente. Na sequência, é listado e comentado passo a passo o desenvolvimento de um pequeno aplicativo Web de leilão de um centavo utilizando AJAX, JSF2 e a biblioteca PrimeFaces que atualmente é a principal suíte de compo-nentes com suporte ao JSF2.

Envio de requisição AJAX com JSF2

O atributo event

O JSF2 possui uma tag para realizar solicitações AJAX ao

servi-dor. Essa tag cria comportamentos, do lado do cliente, que são associados a um componente de interface do usuário. Sendo um comportamento, a tag depende de uma interação do usuário para que seja executada.

Para exemplificar esse recurso, uma página Web contendo um campo de texto será criada. A cada tecla pressionada no campo de texto uma requisição AJAX será enviada ao servidor. Uma classe chamada ExemploAjaxController, contendo um atributo chama-do de exemplo, será criada para funcionar como o Managed Bean. O atributo exemplo estará vinculado ao campo de texto da página Web e será atualizado a cada requisição AJAX realizada, como na Listagem 1.

Listagem 1. Managed Bean para exemplificar uma requisição AJAX (ExemploAjaxController.java).

Listagem 2. Página Web contendo os componentes JSF (in-dex.xhtml).

import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped;

@ManagedBean

@ViewScoped

publicclass ExemploAjaxController { private String exemplo;

public String getExemplo() { return exemplo; }

publicvoidsetExemplo(String exemplo) { this.exemplo = exemplo;

} }

<h:body> <h:form> <h:panelGrid>

<h:inputText value=”#{exemploAjaxController.exemplo}”> <f:ajax event=”keyup” render=”outid”/>

</h:inputText>

<h:outputText id=”outid” value=”#{exemploAjaxController.exemplo}”/> </h:panelGrid>

</h:form> </h:body>

Observe o uso das anotações @ManagedBean e @ViewScoped na classe ExemploAjaxController. Essa é a forma que um

ManagedBe-an é definido no JSF2, não sendo necessário o uso de configuração no arquivo faces-config.xml.

O Managed Bean da Listagem 1 está ligado à página web index. xhtml que possui dois componentes: um <h:inputText /> respon-sável por disparar a requisição e um <h:outputText /> que será responsável por exibir o novo valor do atributo exemplo alterado a cada evento keyup do componente <h:inputText />. A Listagem 2 mostra o código desta página.

<f:ajax event="keyup" render="outid"/>

No atributo event é informado qual evento JavaScript vai dispa-rar a solicitação e no caso da Listagem 2 é com base no evento onkeyup. Observe que o nome utilizado no atributo event da tag <f:ajax/> é keyup. O atributo event recebe uma string contendo o nome do evento que dispara a requisição AJAX. Se nenhum nome for especificado, um comportamento padrão com base no componente-pai será aplicado. Para componentes de ação como <h:commandButton /> ou <h:commandLink /> o comportamento

(3)

Na próxima seção é apresentado como informar ao JSF quais com-ponentes da página deseja-se atualizar ao final da requisição.

Renderizando a visão parcialmente

Com JSF 1.2, e sem ajuda de um framework AJAX, a cada requi-sição realizada toda página era submetida e retornada ao usuário. Era simples, não havia uma preocupação com que partes da página JSF fossem atualizadas. Esse comportamento é indesejado quando apenas uma pequena área da página precisa ser reexibida.

O atributo render

O atributo render da tag <f:ajax /> é o responsável por tornar possível a reexibição parcial da página. Observe no trecho de có-digo da Listagem 2 que o conteúdo do atributo render é o id do componente que será reexibido ao final da requisição AJAX.

<h:inputText value=”#{exemploAjaxController.exemplo}”> <f:ajax event=”keyup” render=”outid”/>

</h:inputText>

<h:outputText id=”outid” value=”#{exemploAjaxController.exemplo}”/> O atributo render suporta os seguintes valores:

t !BMMSFFYJCFUPEPTPTDPNQPOFOUFTEBWJTÍP QÈHJOB t !OPOF OÍP SFFYJCF OFOIVN DPNQPOFOUF ² P WBMPS VTBEP

quando nenhum outro é informado.

t !UIJTBUVBMJ[BBQFOBTPQSØQSJPDPNQPOFOUFRVFEJTQBSPVB requisição.

t !GPSNBUVBMJ[BUPEPTPTDPNQPOFOUFTQFSUFODFOUFTBPGPSNV-lário do componente que disparou a requisição.

t 6NB MJTUB EF JET EF DPNQPOFOUFT TFQBSBEPT QPS FTQBÎP PV vírgula.

t 6NB&- &YQSFTTJPO-BOHVBHFDPOUFOEPVNBMJTUBEFJET Usando-se EL é possível determinar, em tempo de execução, a lista de ids dos componentes que serão atualizados ao final da requisição. Nesse caso, funciona da seguinte maneira:

t 4VQPOIBRVFPBUSJCVUPUFOIBTJEPTFUBEPDPNVNBMJTUBDPO-tendo os valores id1 e id2. Na próxima requisição AJAX que acontecer, os componentes dos referidos ids, id1 e id2 serão atualizados.

t 4VQPOIBBHPSBRVF OFTTBQSJNFJSBSFRVJTJÎÍP PTJETJEFJE tenham sido adicionados à lista de ids. Nesse caso, os compo-nentes dos id3 e id4 só serão atualizados na próxima requisi-ção.

Opcionalmente, o exemplo mostrado acima poderia ter sido feito utilizando-se a API Java Script do JSF2 diretamente. A Listagem 3 mostra como ficaria a página do exemplo da Listagem 2 com o uso dessa API.

Listagem 4. Classe ExemploAjaxController.java depois de adicionar o método toUpper.

<h:head>

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

<h:inputText onkeyup=”jsf.AJAX.request(this, event,

{render:’form:outid’});” value=”#{ExemploAjaxController.exemplo}”> </h:inputText>

<h:outputText id=”outid” value=”#{ExemploAjaxController. exemplo}”/> </h:panelGrid> </h:form> </h:body> import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; @ManagedBean @ViewScoped

publicclass ExemploAjaxController { private String cpf;

publicvoidvalidarCpf(){ if(cpf.lenght()==11){

FacesContext.getCurrentInstance().addMessage(null, newFacesMessage(“CPF Válido!“));

} else {

FacesContext.getCurrentInstance().addMessage(null, newFacesMessage(“CPF Inválido!“));

}

//getters e setters aqui

} }

Alguns pontos importantes precisam ser observados no exemplo da Listagem 3. Primeiro, é necessário que se faça a inclusão do arquivo jsf.js. Esse arquivo fornece todas as funcionalidades Java Script necessárias ao funcionamento do AJAX. Segundo, observe que agora o id informado não é mais o id do componente, mas o id do componente no cliente, ou seja, id após a página ter sido transformada em HTML. Esse id é formado pelo nome do formu-lário seguido de dois pontos mais o id do componente.

O atributo listener

Outro atributo interessante do componente <f:ajax /> é o atributo listener. Com esse atributo é possível informar, através de EL, um método do Managed Bean para ser executado quando a requisição AJAX for disparada. No exemplo da Listagem 4, um método cha-mado validarCpf será executado a cada requisição AJAX enviada pelo usuário. A Listagem 4 mostra como ficou a classe ExemploA-jaxController depois de adicionado o novo método.

(4)

Listagem 5. Classe ExemploAjaxController.java depois de adicionar o método validarCpf.

Listagem 7. Página index.xhtml com o componente <h:commandButton>.

Listagem 6. Classe ExemploAjaxController.java depois de adicionar o método incrementaValor.

<h:inputText value=”#{ExemploAjaxController.cpf}”> <f:ajax event=”blur” render=”msg” listener= ”#{exemploAjaxController.validarCpf}”/> </h:inputText> <h:messages id=”msg”/> </h:panelGrid> </h:form> </h:body> <h:body> <h:form> <h:panelGrid>

<h:outputText id=”idvalor” value=”#{ExemploAjaxController.valor}”> <f:convertNumber locale=”pt_BR” type=”currency”/>

</h:outputText>

<h:commandButton value=”Lance”> <f:ajax render=”idvalor” listener=

”#{ExemploAjaxController.incrementaValor}”/> </h:commandButton> </h:panelGrid> </h:form> </h:body> import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; @ManagedBean @ViewScoped

publicclass ExemploAjaxController { private String exemplo; privatedouble valor;

publicvoidtoUpper(){

setExemplo(exemplo.toUpperCase()); }

publicvoidincrementaValor(){ valor = valor + 0.01; }

//getters e setters aqui

}

O método validarCPf, quando executado, apenas verifica o tama-nho do conteúdo do atributo cpf e envia uma mensagem que será exibida de acordo com a regra de validação. A Listagem 5 mostra o código da página index.html após ter sido alterada para que o método fosse chamado.

Observe agora que sempre que inputText perde o foco, o com-ponente h:message é atualizado exibindo uma mensagem. Isso acontece porque a cada requisição feita o método validarCpf está sendo executado.

Nos próximos exemplos, será mostrado como adicionar capaci-dade AJAX a outros componentes. O primeiro componente será o <h:commandButton />. Nesse exemplo, a cada click no compo-nente, o valor exibido em um <h:outputText /> será incrementado em um centavo. Para o exemplo, um novo atributo será adicio-nado à classe ExemploAjaxController. Um novo método também será adicionado com a responsabilidade de incrementar o valor. A Listagem 6 mostra a classe alterada contendo o novo atributo e o novo método.

A Listagem 7 mostra o trecho de código alterado da página in-dex.xhtml contendo os dois novos componentes. O componente <h:commandButton />, responsável por realizar a solicitação AJAX, e o componente <h:outputText /> que será atualizado sempre que uma requisição for finalizada.

Observe que a tag <f:ajax /> agora está entre a tag do componente <h:commandButton />, tornando-o responsável por realizar a requisição AJAX. No atributo render é informado o id do compo-nente que será atualizado, que no exemplo é um outputText. No atributo listener é informado qual o método será executado, que na demonstração é o método incrementaValor, responsável por incrementar em um centavo o conteúdo da variável valor. A figura 1 mostra o que foi descrito nas Listagens 6 e 7.

Figura 1. Tela da página index.xhtml em execução.

Adicionando AJAX a um grupo de componentes

Com a tag <f:ajax /> também é possível adicionar comportamento AJAX a vários componentes de forma simultânea. Observe o tre-cho de código da Listagem 8.

(5)

Listagem 9. Aplicando AJAX a vários componentes informan-do o valor informan-do atributo event.

<h:panelGrid> <h:selectBooleanCheckbox> <h:inputText> <h:commandButton> </h:panelGrid> </f:ajax>

<f:ajax event=”click”> <h:panelGrid>

<h:selectBooleanCheckbox> <h:inputText>

<h:commandButton> <f:ajax event=”focus”/> </h:commanButton> </h:panelGrid> </f:ajax>

<f:ajax event=”valueChange”> <h:panelGrid>

<h:selectBooleanCheckbox> <h:inputText>

<h:commandButton> <f:ajax event=”focus”/> </h:commanButton> </h:panelGrid> </f:ajax> No exemplo da Listagem 8, a tag <f:ajax /> será adicionada usando

o evento AJAX padrão de cada componente:

t IQBOFM(SJE OÍP QPTTVJ DPNQPSUBNFOUP "+"9 QBESÍP QPS-tanto nenhum comportamento AJAX será adicionado. t ITFMFDU#PPMFBO$IFDLCPY WBJEJTQBSBSBSFRVJTJÎÍPOPFWFOUP

onchange.

t IJOQVU5FYU EJTQBSBBSFRVJTJÎÍPOPFWFOUPPODIBOHF t IDPNNBOE#VUUPO FWFOUPPODIBOHFEJTQBSBVNBSFRVJTJÎÍP

AJAX.

Se preferir, um evento pode ser informado na tag <f:ajax />, atra-vés do atributo event. Nesse caso, o evento seria aplicado a todos os componentes no interior da tag. Observe o trecho de código da Listagem 9.

No exemplo da Listagem 9, o evento onclick será adicionado ao p:panelGrid, h:inputText e h:commandButton, que também po-derá disparar sua requisição AJAX utilizando o evento onfocus.c Existem situações em que o evento definido na tag <f:ajax /> não é propagado para todos os componentes no interior da tag. Observe esse comportamento no trecho de código da Listagem 10.

No exemplo acima, o evento aplicado é o valueChange. Observe que o evento pode ser aplicado aos componentes h:selectBooleanCheckbox e h:inputText, mas não poderá ser aplicado ao h:panelGrid, pois este componente não possui um evento AJAX padrão. O evento também não será aplicado ao h:commandButton, pois este componente não suporta esse even-to, nesse caso apenas o onfocus será aplicado.

Interceptando as requisições AJAX

A tag f:ajax possui um atributo que permite, através de JavaScript, interceptar as requisições AJAX em três momentos: no início da requisição, quando a requisição finalizar com sucesso e ao fina-lizar com sucesso. Imagine que você desejasse interceptar uma requisição AJAX no momento em que ela estivesse acontecendo. Por exemplo, para mostrar uma imagem do tipo “aguarde proces-samento” no início da requisição e ocultá-la ao final da requisição. Isso é possível através do atributo onevent. O atributo espera uma string contendo o nome de uma função JavaScript. A função de-verá possuir um parâmetro que vai tornar-se um objeto contendo, dentre outros atributos, o atributo status. Esse atributo poderá assumir um dos seguintes valores:

t CFHJO JOGPSNBRVFÏPJOÓDJPEBSFRVJTJÎÍP

t TVDDFTT SFUPSOBEPRVBOEPBSFRVJTJÎÍPGPJFYFDVUBEBDPNTV-cesso;

t DPNQMFUF RVBOEPBSFRVJTJÎÍPGPSmOBMJ[BEB

Para exemplificar, uma página contendo um componente h:commandButton será criada. O componente será o responsável por realizar a solicitação AJAX. Uma função JavaScrit chamada de intercepta será criada para ser executada em cada uma das três fases da requisição. A Listagem 11 mostra o código da página. Observe no trecho de código da Listagem 11 que apenas o nome da função é informado no atributo onevent. As figuras 2, 3 e 4 mostram a sequência em que as mensagens aparecem para o usu-ário.

(6)

Listagem 11. Página com script para interceptar a requisição AJAX.

Listagem 12. Submetendo apenas um formulário para proces-samento no servidor.

<h:head>

if(requisicao.status==”success”) { alert(‘Requisição executada com sucesso’) } if(requisicao.status==”complete”) { alert(‘Requisição finalizada’) } } </script> </h:head> <h:body> <h:form>

<h:commandButton value=”AJAXTeste”> <f:ajax onevent=”intercepta”/> </h:commandButton> <h:inputText </h:form> </h:body> <h:form> <h:panelGrid>

<h:outputLabel value=”Email:”/> <h:inputText/>

<h:outputLabel value=”Senha:”/> <h:inputSecret/>

<h:commandButton value=”Entrar”>

<f:ajax event=”click” execute=”@form” listener= ”#{ExemploAjaxController.login}”/>

</h:commandButton> </h:panelGrid> </h:form> Figura 2. Início da requisição.

Figura 3. Requisição executada com sucesso.

Figura 4. Final da requisição.

Processamento parcial da visão

Até o momento apenas foi apresentado como atualizar partes da página que realiza uma solicitação AJAX. Mas como utilizar a tag f:ajax para informar que partes da página deverão ser enviadas ao servidor para ser processada?

O atributo execute

É através do atributo execute que é informado quais componentes devem ser enviados ao servidor durante uma solicitação AJAX. O atributo pode assumir os seguintes valores:

t !BMM WBMPSQBESÍPFUPEPTPTDPNQPOFOUFTEBWJTÍPTFSÍPFO-viados ao servidor para processamento.

t !OPOF OFOIVNDPNQPOFOUFTFSÈFOWJBEPQBSBQSPDFTTBNFO-to no lado do servidor.

t !UIJT BQFOBTPQSØQSJPDPNQPOFOUFRVFEJTQBSPVBTPMJDJUB-ção AJAX.

t !GPSN UPEPT PT DPNQPOFOUFT QSFTFOUFT BP GPSNVMÈSJP RVF contém o componente que disparou a requisição.

t 6NBMJTUBEFJETTFQBSBEPTQPSWÓSHVMBPVFTQBÎP t &- VNB&YQSFTTJPO-BOHVBHFDPOUFOEPVNBMJTUBEFJET A Listagem 12 mostra um exemplo em que apenas o formulário é submetido ao servidor para processamento. Lembrando que, se nenhum comportamento for informado, o comportamento padrão é enviar apenas o próprio componente. Esse não é o com-portamento que é sempre desejado. Na verdade, geralmente o que se deseja é apenas enviar um formulário e todos os componentes de entrada de dados que estão em seu interior. O trecho de código da Listagem 12 mostra esse comportamento.

JSF2, AJAX e PrimeFaces

O PrimeFaces tem se destacado como uma das principais biblio-tecas de terceiros que trabalham integradas ao JSF. Um dos princi-pais motivos para essa adoção é o fato desse framework ter sido o primeiro a disponibilizar uma suíte de componentes compatíveis com JSF2. Atrelado a isso vem o fato do PrimeFaces ser bastante simples e possuir componentes para quase todas as necessidades do desenvolvedor JSF, inclusive com suporte a AJAX.

(7)

que se dê um lance no produto. O lance incrementa o preço do produto em um centavo e reinicia o tempo do leilão. Todos esses eventos acontecem enviando-se requisições AJAX ao servidor. O exemplo será feito utilizando-se a IDE NetBeans 6.9.1 com Pri-meFaces 2.2 e Glassfish 3.1. O projeto será composto dos seguin-tes artefatos: uma classe de domínio chamada de Produto, um Managed Bean e a página JSF. A estrutura do projeto é mostrada na figura 5. Além das classes Java, o projeto ainda possui algumas imagens e uma pasta chamada blitzer que corresponde ao skin que será aplicado aos componentes do PrimeFaces.

Figura 5. Estrutura do projeto.

O trecho de código mostrado na Listagem 13 corresponde à classe Produto. A referida classe possui apenas quatro atributos, abaixo a descrição de cada um deles:

t JEoJEFOUJmDBEPSÞOJDPQBSBDBEBPCKFUP t UFNQPoBUSJCVUPRVFNBSDBBEVSBÎÍPEPMFJMÍP t EFTDSJÎÍPoBEFTDSJÎÍPEPQSPEVUP

t WBMPS*OJDJBMoWBMPSEPQSPEVUPOPJOÓDJPEPMFJMÍP

privatelong id; privateint tempo; private String imagem; private String descricao; privatedouble valorInicial;

//métodos getters e seterrs aqui

}

A classe LeilaoController é o Managed Bean responsável por rece-ber as requisições enviadas pela página JSF. A classe possui, além dos métodos assessores e modificadores (getters e setters), mais três métodos. Os métodos serão descritos logo abaixo:

t DBSSFHB1SPEVUPT o NÏUPEP SFTQPOTÈWFM QPS DBSSFHBS VNB lista de produtos para serem exibidos em um componente p:dataGrid.

t BUVBMJ[B$SPOPNFUSP o FTTF NÏUPEP RVBOEP FYFDVUBEP QFS-corre todos os produtos e “decrementa” em um segundo o tempo do leilão. O método é executado de um em um

segun-A escolha do escopo @segun-ApplicationScope para o ManagedBean se deve ao fato de que todos os usuários da aplicação devem ver, de forma simultânea, quais produtos estão recebendo lance, qual o valor atual dos produtos e qual o tempo de leilão atual de cada produto. De modo que um lance de usuário deve ser refletido para cada usuário do sistema.

Os principais componentes do PrimeFaces usados no exemplo são: p:poll, p:pataGrid e o p:panel. O componente p:poll é o componente responsável por enviar, de tempos em tempos, uma requisição ao servidor e executar o método atualizaCronometro. O componente p:dataGrid será utilizado para listar todos os pro-dutos. Cada produto será descrito em um componente p:panel. O código da página JSF é exibido na Listagem 15.

A figura 6 mostra o exemplo em execução. do através do componente p:poll do primefaces.

t MBODFoDIBNBEPRVBOEPPVTVÈSJPEBSVNMBODFFNBMHVN produto. Quando executado, o método incrementa o valor do produto em um centavo e reinicia o tempo do leilão do pro-duto.

O trecho de código da Listagem 14 mostra a classe LeilaoControl-ler e os métodos descritos acima.

Figura 6. Exemplo em execução.

Considerações finais

Neste artigo foram apresentados os principais recursos AJAX pre-sentes na mais nova especificação do framework Java Server Faces, o JSF2. O objetivo principal foi destacar que nessa nova versão o JSF trouxe recursos AJAX de forma nativa. Diversos exemplos

(8)

fo-: fo-: www.mundoj.com.br fo-: fo-:

Listagem 14. ManagedBean (LeilaoController.java). Listagem 15. Código da página JSF que corresponde ao exemplo. package mundoj.controller; import java.util.ArrayList; import java.util.List; import javax.faces.bean.ApplicationScoped; import javax.faces.bean.ManagedBean; import mundoj.modelo.Produto; @ManagedBean(name = “leilao”) @ApplicationScoped publicclass LeilaoController {

private List<Produto> produtos = newArrayList(); private Produto produtoSelecionado;

publicLeilaoController() { carregaProdutos(); }

publicvoidlance() {

produtoSelecionado.setValorInicial(produtoSelecionado.getValorInicial() + 0.01);

produtoSelecionado.setTempo(20); }

publicvoidatualizaCronometro() { for (Produto produto : produtos) { if (produto.getTempo() > 0) {

produto.setTempo(produto.getTempo() - 1); }

} }

privatevoidcarregaProdutos() { Produto produto = newProduto(); produto.setId(1);

produto.setDescricao(“iPad Apple”); produto.setImagem(“ipad.jpg”); produto.setValorInicial(0.0); produto.setTempo(20); produtos.add(produto);

Produto produto1 = newProduto(); produto1.setId(2);

produto1.setDescricao(“playstation 3”); produto1.setImagem(“ps3.jpg”); produto1.setValorInicial(0.0); produto1.setTempo(20); produtos.add(produto1);

Produto produto3 = newProduto(); produto3.setId(3);

produto3.setDescricao(“iPhone Apple”); produto3.setImagem(“iphone.jpg”); produto3.setValorInicial(0.0); produto3.setTempo(20); produtos.add(produto3);

}

// getters e setters omitidos

}

<h:body> <h:form>

<p:poll update=”listaprodutos” interval=”1” actionListener= ”#{leilao.atualizaCronometro}”/>

<h:panelGrid>

<p:dataGrid id=”listaprodutos” value=”#{leilao.produtos}” var=”produto” columns=”4” paginator=”true” paginatorPosition=”both”> <p:column>

<p:panel id=”panelproduto” header=”#{produto.descricao}” style=”text-align: center”>

<h:panelGrid style=”width: 100%” columns=”1”> <h:graphicImage url=”#{produto.imagem}” /> <h:outputText style=”font-family: Heveltica;color:blue; font-weight: bold;font-size: 18pt” value=

”#{produto.tempo}”/>

<h:outputText value=”#{produto.valorInicial}” style=”font-family: Heveltica;color:red; font-weight: bold;f> <f:convertNumber type=”currency” locale=”pt_BR”/> </h:outputText>

<h:commandButton image=”img_bnt_lance.png” value=”Lance” action=”#{leilao.lance}”>

<f:setPropertyActionListener value=”#{produto}” target=”#{leilao.produtoSelecionado}”/> <f:ajax render=”panelproduto”/> </h:commandButton> </h:panelGrid> </p:panel> </p:column> </p:dataGrid> </h:panelGrid> </h:form> </h:body>

ram mostrados para exemplificar os principais recursos e usos da tag <f:ajax /> do JSF2. Por fim, uma aplicação-exemplo, utilizando recursos AJAX do JSF2 em conjunto com a suíte de componentes do PrimeFaces, foi apresentada para evidenciar o uso prático dos novos recursos.

GUJ – Discussões sobre o tema do artigo e

assuntos relacionados

Discuta este artigo com 100 mil outros

t IUUQXXXRVFCSBOEPQBSBEJHNBTDPN #MPHEPTBVUPSFTDPOUFOEPDFOUFOBTEFFYFNQMPTVTBOEP"+"9FN+4' DPN1SJNF'BDFT t IUUQNLCMPHFYBEFMDPNMFBSOJOHKTG"+"9JOKTGVTJOH G"+"9UBH 4JUFDPNNVJUBJOGPSNBÎÍPTPCSFFTTFFNVJUPTPVUSPTBTTVOUPT t IUUQXJLJOFUCFBOTPSH%FWFMPQ"+"9+4'"QQ &YDFMFOUFFYFNQMPEFDPNPVTBS"+"9OP+4' t IUUQXXX"+"9QSPKFDUTDPN"+"9UVUPSJBMEFUBJMTQIQ JUFNJE &YFNQMPEFVTPEB"1*"+"9QBSB+4' t IUUQKBWBTZTDPODPNOPEF "SUJHPFTDSJUPQPS.BY,BU[RVFNPTUSBPTQSJODJQBJTSFDVSTPT"+"9QBSB +4' t IUUQCMPHHJMMJBSEFUJCS"+"9OPKTG "SUJHPFTDSJUPQPS(JMMJBSEEFTUBDBOEP"+"9FN t IUUQXXXDPSFTFSWMFUTDPN+4'5VUPSJBMKTG"+"9 4JUFDPOUFOEPEJWFSTPTUVUPSJBJTTPCSF+4' t IUUQ