JSF & Ajax
Aplicando a metodologia Ajax com JSF
Frederico Araújo Soares
O JavaServer Faces ou simplesmente JSF, surgiu para simplificar o desenvolvimento de aplicações Web utilizando a tecnologia Java e automatizar muitas das tarefas que sempre foram necessárias, como obter os dados de um formulário enviados por uma requisição. O JSF foi desenvolvido para ser um modelo 2, duas camadas, na web. O desenvolvedor apenas precisa editar a página web que é a interface com o usuário e o JavaBean que é a classe que representa a entidade de seu sistema. Sua utilização ganhou força, ênfase e prestígio após a entrada no mercado de outras tecnologias, como o Struts que tem o mesmo foco: facilidade e a rapidez no desenvolvimento. O JSF, como qualquer outro framework Web, deve permitir conversar com outras teconologias quando necessário, ou seja, deve permitir que tenha interfaces de acesso às funcionalidades dessas outras linguagens como o Javascript.
No desenvolvimento Web, é importante saber quando uma função deve ser chamada no lado servidor e outra no lado cliente. O Javascript é uma tecnologia que permite várias funcionalidades no lado cliente, como a validação de dados em um formulário antes que ele seja submetido para o lado servidor, formatação de dados ou outras funcionalidades ligadas a eventos, como em menus, animação com imagens e outras aplicações. O Javascript possui um objeto chamado XMLHttpRequest, este objeto é conhecido e utilizado em uma metodologia chamada Ajax. O uso do Ajax consiste em abrir uma conexão assíncrona, ou seja, sem ter que abrir uma linha direta com o servidor para a troca de dados.
O Ajax, para ser utilizado, precisa de uma quantidade considerável de código Javascript no lado cliente. O desenvolvedor precisa criar uma biblioteca e várias funções para cada utilização da tecnologia.
O JSF e o Ajax foram integrados através de um framework chamado Ajax4Jsf, onde o desenvolvedor não precisa digitar nenhuma linha de código Javascript e não é necessário alterar as tags padrão do JSF para adicionar a funcionalidade Ajax. O único acréscimo de código é em adicionar uma tag informando que um componente será renderizado via Ajax quando ocorrer um determinado evento. Ao longo desse artigo conheceremos um pouco mais sobre a integração entre o JSF e o Ajax para o desenvolvimento de uma aplicação Web.
Definindo o cenário do artigo
Neste artigo, vamos apresentar como utilizar Ajax com o framework JavaServer Faces (ou simplesmente JSF). Utilizaremos a versão estável do JSF 1.0 e o framework Ajax4JSF que é opensource e automatiza o processo de desenvolvimento adicionando a funcionalidade de Ajax em aplicações JSF.
O conteiner J2EE utilizado é o Tomcat 5.X . O servidor web Tomcat do grupo Apache é um dos mais utilizados hoje no mundo J2EE frente a outros concorrentes, como WebSphere da IBM e BEA Logic. Quanto à IDE utilizada, este artigo não utiliza característica de nenhuma ferramenta de desenvolvimento. É apresentado de forma clara como deve ser cada arquivo de configuração, cada arquivo JSP e suas respectivas bibliotecas Jar, e onde adicionar cada um destes no projeto J2EE de forma que o desenvolvedor que utilize Eclipse ou NetBeans possa saber como irá realizar a tarefa.
O artigo apresenta um cenário onde, em um formulário de cadastro de um cliente, o usuário escolhe em um menu o estado e, em seguida, a cidade. Toda vez que o usuário clica no menu escolhendo o estado alterando seu valor, o Ajax abre uma conexão assíncrona para listar no próximo menu as cidades do respectivo estado escolhido.
Outra aplicação apresentada é a exibição de informações quando o usuário clica em uma opção do menu, por exemplo, em uma lista de clientes. Ao clicar no cliente específico, o framework se encarrega de abrir uma conexão com o servidor buscando os dados referentes ao cliente e mostrando-os na tabela ao lado sem renderizar ou carregar toda a página Web.
E por fim, é mostrada uma animação que pode ser utilizada para vários propósitos. Esta animação, por exemplo, é utilizada na exibição de uma imagem dinâmica: toda vez que o usuário faz uma ação na página Web que cause uma consulta Ajax, a imagem é trocada durante o tempo de requisição do framework Ajax.
JSF
JavaServer Faces foi desenvolvido pela comunidade JCP (Java Community Process) que é um grupo de empresas e/ou grupos de desenvolvedores de software que estabelece padrões de solução para problemas comuns. O JSF é um framework para desenvolvimento web que implementa o modelo MVC. Surgiu com a necessidade de se agilizar e automatizar processos que eram utilizados em todos os projetos J2EE. O desenvolvedor somente se preocupa com a lógica de negócio de sua aplicação deixando as tarefas básicas e mais trabalhosas como a manipulação do servlet sob responsabilidade do framework. Para maiores informações sobre o JSF e para acessar toda a sua referência de componentes além de baixar a biblioteca, visitar http://java.sun.com/javaee/javaserverfaces/overview.html. Além disso, o JSF já foi tema de artigos na WebMobile, como no artigo Struts X JSF publicado na edição 11 da revista.
Ajax4jsf
Ajax é uma sigla para Asynchronous Javascript And XML. Ele é uma metodologia de desenvolvimento onde se utiliza objetos Javascript para abrir uma conexão assíncrona para renderizar partes ou componentes de uma página Web, sem renderizar ou atualizar toda a página.
O único incômodo para o desenvolvimento com Ajax é a grande quantidade de código Javascript que deve ser escrito para realizar toda a lógica de acesso assíncrona ao conteúdo desejado. Esse código deve ser inserido junto a sua página Web e ligada às tags HTML dos componentes Web desejados através de seu atributo id. Mas, para que se identifique um componente pelo seu id, é preciso saber qual é o id que será identificado o componente JSF. Isso é necessário pois o JSF renderiza a página Web, ou seja, seu código JSP é compilado e interpretado gerando uma id especifica para cada componente de acordo com seu contexto.
Foi então que surgiu a necessidade de um framework que além de identificar o id dos componentes JSF, pudesse adicionar código Javascript que interligasse a lógica Ajax com essa id dos componentes JSF. Surgi então o framework Ajax4Jsf que encapsula a tecnologia Ajax junto aos componentes JSF.
O framework Ajax4jsf é implementado utilizando componentes de uma biblioteca que adiciona a interatividade Ajax sem a necessidade de escrever código JavaScript. Ele permite que sejam definidas regiões na página Web onde o evento e a funcionalidade Ajax irá interagir invocando eventos a partir de requisições iniciadas quando o usuário aciona algum componente da página Web. Esses eventos são enviados para o servidor através de uma conexão assíncrona, ou seja, estas regiões serão processadas no lado do servidor e a resposta será enviada para o cliente sem que uma conexão seja aberta com o servidor HTTP. Essa conexão renderiza ou atualiza a página Web somente na região definida pelo o framework Ajax4jsf. Maiores informações e a biblioteca Jar pode ser baixada no site https://ajax4jsf.dev.java.net.
O pacote ajax4jsf é composto por dois arquivos do tipo Jar chamados ajax4jsf.jar e oscache-2.3.2.jar. Para a sua utilização é necessário que você acrescente estes arquivos no diretório lib de seu projeto, e coloque no arquivo web.xml de configuração do JSF as linhas de códigos descritas na Listagem 1, explicadas na continuidade desse artigo.
Usando Ajax em conjunto com JSF para criação de menus dinâmicos
Qual desenvolvedor nunca precisou ter dois menus dinâmicos na página web onde um, por exemplo, tem os estados brasileiros como opção e o outro tem as cidades do respectivo estado escolhido?
Vamos implementar neste artigo esta funcionalidade sem utilizar nenhuma linha de código JavaScript Ajax, adicionando somente algumas tags especiais que adicionam a funcionalidade Ajax nos componente JSF. Inicialmente será acrescentada uma tag do framework Ajax4jsf. Esta tag se chama a4j:support e fornece a funcionalidade para o sistema obter o evento onclick do menu. Ao clicar no menu à esquerda, onde temos as opções “GO” e “RJ”, o outro menu à direita vai receber as cidades de acordo com o estado escolhido. Ao final desta seção será apresentada uma tela referente a essa funcionalidade.
Primeiramente, é necessário criar a estrutura de diretórios que segue o padrão J2EE (conforme a especificação da Sun Microsystens para a versão 1.4). A Figura 1 mostra a estrutura de diretórios proposta de uma forma simplificada.
