Desenvolvimento Web com JSF2 e AJAX Construa aplicações Web mais interativas e elegantes 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. 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. 51
: : www.mundoj.com.br : : mplementar aplicações Web mais elegantes, dinâmicas e interativas 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 possibilitar 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 obrigar 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 frameworks 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 bibliotecas, 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 parcialmente e processar uma visão parcialmente. 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 componentes com suporte ao JSF2. Envio de requisição AJAX com JSF2 O JSF2 possui uma tag para realizar solicitações AJAX ao servidor. 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 chamado 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). import javax.faces.bean.managedbean; import javax.faces.bean.viewscoped; @ManagedBean @ViewScoped public class ExemploAjaxController { private String exemplo; public String getexemplo() { return exemplo; public void setexemplo(string exemplo) { this.exemplo = exemplo; Observe o uso das anotações @ManagedBean e @ViewScoped na classe ExemploAjaxController. Essa é a forma que um ManagedBean é 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 /> responsá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. Listagem 2. Página Web contendo os componentes JSF (index.xhtml). <h:inputtext value= #{exemploajaxcontroller.exemplo > <f:ajax event= keyup render= outid /> </h:inputtext> <h:outputtext id= outid value= #{exemploajaxcontroller.exemplo /> O atributo event <f:ajax event="keyup" render="outid"/> No atributo event é informado qual evento JavaScript vai disparar 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 padrão é action, para componentes de entrada de dados o com- 52
portamento é o valuechange. Se um evento que não existe for especificado, um erro será disparado quando a página for executada. Na próxima seção é apresentado como informar ao JSF quais componentes 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 requisiçã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: quando nenhum outro é informado. requisição. lário do componente que disparou a requisição. vírgula. 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: 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. tenham sido adicionados à lista de ids. Nesse caso, os componentes 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 3. Página mostrando o uso da API Java Script (index.xhtml). <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 /> 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 formulá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 chamado validarcpf será executado a cada requisição AJAX enviada pelo usuário. A Listagem 4 mostra como ficou a classe ExemploAjaxController depois de adicionado o novo método. Listagem 4. Classe ExemploAjaxController.java depois de adicionar o método toupper. import javax.faces.bean.managedbean; import javax.faces.bean.viewscoped; @ManagedBean @ViewScoped public class ExemploAjaxController { private String cpf; public void validarcpf(){ if(cpf.lenght()==11){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage( CPF Válido! )); else { FacesContext.getCurrentInstance().addMessage(null, new FacesMessage( CPF Inválido! )); //getters e setters aqui 53
: : www.mundoj.com.br : : O método validarcpf, quando executado, apenas verifica o tamanho 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. A Listagem 7 mostra o trecho de código alterado da página index.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. Listagem 5. Classe ExemploAjaxController.java depois de adicionar o método validarcpf. <h:inputtext value= #{ExemploAjaxController.cpf > <f:ajax event= blur render= msg listener= #{exemploajaxcontroller.validarcpf /> </h:inputtext> <h:messages id= msg /> Observe agora que sempre que inputtext perde o foco, o componente 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 capacidade AJAX a outros componentes. O primeiro componente será o <h:commandbutton />. Nesse exemplo, a cada click no componente, o valor exibido em um <h:outputtext /> será incrementado em um centavo. Para o exemplo, um novo atributo será adicionado à 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. Listagem 7. Página index.xhtml com o componente <h:commandbutton>. <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> 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 componente 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. Listagem 6. Classe ExemploAjaxController.java depois de adicionar o método incrementavalor. import javax.faces.bean.managedbean; import javax.faces.bean.viewscoped; @ManagedBean @ViewScoped public class ExemploAjaxController { private String exemplo; private double valor; 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 trecho de código da Listagem 8. public void toupper(){ setexemplo(exemplo.touppercase()); public void incrementavalor(){ valor = valor + 0.01; //getters e setters aqui 54
Listagem 8. Aplicando AJAX a vários componentes. <f:ajax> <h:selectbooleancheckbox> <h:inputtext> <h:commandbutton> </f:ajax> No exemplo da Listagem 8, a tag <f:ajax /> será adicionada usando o evento AJAX padrão de cada componente: tanto nenhum comportamento AJAX será adicionado. onchange. AJAX. Se preferir, um evento pode ser informado na tag <f:ajax />, atravé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. Listagem 9. Aplicando AJAX a vários componentes informando o valor do atributo event. <f:ajax event= click > <h:selectbooleancheckbox> <h:inputtext> <h:commandbutton> <f:ajax event= focus /> </h:commanbutton> </f:ajax> No exemplo da Listagem 9, o evento onclick será adicionado ao p:panelgrid, h:inputtext e h:commandbutton, que também poderá 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. Listagem 10. Aplicando AJAX a vários componentes sem propagar o event para todos os componentes. <f:ajax event= valuechange > <h:selectbooleancheckbox> <h:inputtext> <h:commandbutton> <f:ajax event= focus /> </h:commanbutton> </f:ajax> 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 evento, 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 finalizar 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 processamento 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 deverá 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: cesso; 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. 55
: : www.mundoj.com.br : : Listagem 11. Página com script para interceptar a requisição AJAX. <h:head> <script type= text/javascript > function intercepta(requisicao){ if(requisicao.status== begin ) { alert( Início da Requisição ); if(requisicao.status== success ) { alert( Requisição executada com sucesso ) if(requisicao.status== complete ) { </script> </h:head> alert( Requisição finalizada ) <h:commandbutton value= AJAXTeste > <f:ajax onevent= intercepta /> </h:commandbutton> <h:inputtext 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: viados ao servidor para processamento. to no lado do servidor. ção AJAX. contém o componente que disparou a requisição. 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 comportamento 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. Listagem 12. Submetendo apenas um formulário para processamento no servidor. Figura 2. Início da requisição. <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> Figura 3. Requisição executada com sucesso. Figura 4. Final da requisição. JSF2, AJAX e PrimeFaces O PrimeFaces tem se destacado como uma das principais bibliotecas de terceiros que trabalham integradas ao JSF. Um dos principais 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. Para demonstrar o uso do PrimeFaces e JSF2 será desenvolvido uma aplicação na qual a necessidade do uso de AJAX é evidente. 56
O sistema em questão é um site de leilão de um centavo, onde aparecem alguns produtos com um tempo que marcam o fim do leilão. Para o leilão não finalizar ao final do tempo é necessário 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 PrimeFaces 2.2 e Glassfish 3.1. O projeto será composto dos seguintes 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. Listagem 13. Classe de domínio Produto (Produto.java). public class Produto { private long id; private int tempo; private String imagem; private String descricao; private double valorinicial; //métodos getters e seterrs aqui do através do componente p:poll do primefaces. produto. Quando executado, o método incrementa o valor do produto em um centavo e reinicia o tempo do leilão do produto. O trecho de código da Listagem 14 mostra a classe LeilaoController e os métodos descritos acima. A escolha do escopo @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 produtos. 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. 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: A classe LeilaoController é o Managed Bean responsável por receber 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: lista de produtos para serem exibidos em um componente p:datagrid. corre todos os produtos e decrementa em um segundo o tempo do leilão. O método é executado de um em um segun- Considerações finais Figura 6. Exemplo em execução. Neste artigo foram apresentados os principais recursos AJAX presentes 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 fo- 57
: : www.mundoj.com.br : : Listagem 14. ManagedBean (LeilaoController.java). 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 public class LeilaoController { private List<Produto> produtos = new ArrayList(); private Produto produtoselecionado; public LeilaoController() { carregaprodutos(); public void lance() { produtoselecionado.setvalorinicial(produtoselecionado.getvalorinicial() + 0.01); produtoselecionado.settempo(20); public void atualizacronometro() { for (Produto produto : produtos) { if (produto.gettempo() > 0) { produto.settempo(produto.gettempo() - 1); private void carregaprodutos() { Produto produto = new Produto(); produto.setid(1); produto.setdescricao( ipad Apple ); produto.setimagem( ipad.jpg ); produto.setvalorinicial(0.0); produto.settempo(20); produtos.add(produto); Produto produto1 = new Produto(); produto1.setid(2); produto1.setdescricao( playstation 3 ); produto1.setimagem( ps3.jpg ); produto1.setvalorinicial(0.0); produto1.settempo(20); produtos.add(produto1); Produto produto3 = new Produto(); 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 Listagem 15. Código da página JSF que corresponde ao exemplo. <p:poll update= listaprodutos interval= 1 actionlistener= #{leilao.atualizacronometro /> <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> </p:panel> </p:column> </p:datagrid> 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. Referências GUJ Discussões sobre o tema do artigo e assuntos relacionados Discuta este artigo com 100 mil outros desenvolvedores em www.guj.com.br/mundoj 58