Esse artigo faz parte da revista Java Magazine edição 46. Clique aqui para ler todos os artigos desta edição

Atenção: por essa edição ser muito antiga não há arquivo PDF para download.Os artigos dessa edição estão disponíveis somente através do formato HTML. 

Uma Aplicação Java EE Completa

Parte 3: Aumentando a interatividade com Ajax

 

Veja como incluir funcionalidades Ajax na aplicação web, revendo conceitos e fazendo a integração com JSF através da biblioteca de componentes RichFaces e do framework Ajax4Jsf

 

Yara H. Senger e Melissa Villela

 

Neste artigo, iremos abordar o uso de Ajax com JavaServer Faces (JSF), dando seqüência ao desenvolvimento da aplicação de gerenciamento de turmas e alunos que estamos criando, com JPA e JSF, nas duas ultimas edições da Java Magazine. O quadro "Checklist" resume a configuração do ambiente de execução para o estudo de caso. O download desta parte inclui os elementos criados nas outras partes cumulativamente, além de um script do Ant que permite compilar e executar a aplicação (entre outras tarefas úteis).

Vamos realizar melhorias visuais e aumentar a interatividade da nossa aplicação. Utilizaremos componentes com suporte a Ajax da biblioteca RichFaces, como tabelas e janelas modais, além de implementar o tradicional autocomplete. Para conhecer o funcionamento básico do Ajax acompanhe o quadro "Introdução a Ajax" (veja também o artigo "Ajax Simples com JSON-RPC" nesta edição).

 

Decisões de projeto

Como vimos nas últimas partes, com a utilização de JavaServer Faces e JPA (Java Persistence API), temos um aumento na produtividade do desenvolvimento de aplicações apra web, sem perder portabilidade e robustez.

Nosso foco neste artigo é aumentar a interatividade das páginas web da aplicação. Para isto iremos alterar as telas existentes (camada View) utilizando Ajax. Graças à utilização do padrão MVC (Model-View-Controller), podemos entender e alterar o funcionamento da camada View sem conhecer os detalhes de implementação da camada Model.

Vamos discutir brevemente três formas possíveis de utilizar Ajax na nossa aplicação:

1.   Escrever código JavaScript diretamente.

2.   Utilizar um framework para que os componentes JSF suportem Ajax.

3.   Utilizar uma biblioteca de componentes JavaServer Faces que suportam Ajax.

 

Escrevendo o código JavaScript diretamente

Um programador que conheça JavaScript pode, sem grande dificuldade, criar funções que serão executadas de forma assíncrona. Com essa técnica, o usuário pode utilizar a aplicação enquanto aguarda a resposta a uma requisição enviada ao servidor. Já nas requisições síncronas a aplicação fica "travada" enquanto a requisição é enviada, até que a resposta seja recebida e processada pelo navegador. O uso de chamadas assíncronas é uma das características fundamentais do Ajax.

Ao desenvolver diretamente em JavaScript, as seguintes questões devem ser consideradas:

·       Como obter maior reaproveitamento na camada View?

·       Quais IDEs de desenvolvimento Java estão preparados para suportar o desenvolvimento em JavaScript (depuração, recursos visuais etc.)?

·       A aplicação deve ser compatível com quais navegadores web?

 

Caso os frameworks e bibliotecas de componentes que oferecem suporte a Ajax não atendam as necessidades do seu projeto, será necessário escrever seu próprio código JavaScript. Neste caso, o ideal é encapsulá-lo em componentes JSF customizados. Mas não precisaremos utilizar esta solução, pois a biblioteca de componentes RichFaces, que apresentaremos adiante, atende às necessidades do nosso projeto.

 

Utilizando um framework Ajax

 

Com o aumento da demanda por aplicações com suporte a Ajax, surgiram diversos frameworks para facilitar o desenvolvimento, encapsulando parte ou mesmo todo o código JavaScript necessário para realizar as chamadas assíncronas e fazer a atualização parcial em páginas.

Entre os frameworks disponíveis, destacamos o Ajax4Jsf, que é open source e hoje está sob o controle do grupo JBoss. Os frameworks Dojo e DWR têm sido também bastante discutidos, entretanto não são específicos para JavaServer Faces (ou seja, não são implementados como uma biblioteca de componentes JSF). Por isso não foram selecionados para uso neste estudo de caso.

O framework Ajax4Jsf oferece um conjunto de tags através das quais podemos adicionar suporte a Ajax a outros componentes JSF. Diferentemente de uma biblioteca de componentes JSF tradicional, o Ajax4Jsf não oferece componentes prontos para o uso, como tabelas, caixas de entrada de texto, painéis com abas, entre outras coisas. Recomendamos que você utilize este ou um framework similar quando não encontrar o componente desejado com suporte a Ajax em uma biblioteca de componentes tradicional. (Uma introdução ao Ajax4Jsf foi apresentada recentemente na Edição 43).

Utilizamos Ajax4Jsf indiretamente no nosso estudo de caso, pois a biblioteca de componentes escolhida utiliza este framework internamente.

 

Utilizando uma biblioteca de componentes JSF

Sem dúvida, a forma mais simples de utilizar Ajax em uma aplicação web com JSF é através de uma biblioteca de componentes JSF. Dessa forma teremos o menor contato possível com código JavaScript e com as particularidades de cada navegador.

Atualmente, existem diversas bibliotecas de componentes JSF disponíveis. Neste artigo iremos utilizar a RichFaces, que foi recentemente anunciada como open source pelo JBoss Group. Os motivos que nos levaram a esta escolha foram a confiabilidade do JBoss Group, a facilidade de uso e instalação, bem como a diversidade de componentes disponíveis.

 

Apresentando a biblioteca RichFaces

Diversos componentes da biblioteca RichFaces oferecem suporte a Ajax, que como vimos é implementado através do framework Ajax4Jsf. Esta biblioteca oferece um conjunto de componentes de grande utilidade e qualidade, como tabelas, painéis com abas (tabbed panels), painéis que podem ser exibidos e escondidos, janelas modais, caixa de sugestões para autocomplete, e integração com Google Maps, entre outros. Há também suporte a drag-and-drop.

Todos os componentes visuais do RichFaces podem ter sua identidade visual configurada através de skins. Um skin define o estilo do cabeçalho das tabelas, fontes, bordas, caixas de entrada, e outras propriedades visuais dos componentes. Essa característica, chamada skinnability, é baseada em uma extensão do padrão CSS (Cascading Style Sheets) que permite a configuração dessas propriedades.

Podemos utilizar um dos oito skins predefinidos na biblioteca RichFaces (DEFAULT,emeraldTown, blueSky, wine, japaCherry, ruby, classic e deepMarine), ou definir skins personalizados.  A configuração dos skins predefinidos pode ser feita como na Listagem 1.

Se alterarmos no arquivo web.xml o parâmetro de contexto que define o skin utilizado, a aparência da aplicação será alterada. A Figura 1 ilustra a diferença entre os skins ...

Quer ler esse conteúdo completo? Tenha acesso completo