Clique aqui para ler todos os artigos desta edição
AJAX Avançado com GWT
Criando componentes e serviços com o Google Web Toolkit
Descubra como tornar a sua aplicação Web mais interessante e eficiente utilizando o novo framework AJAX do Google.
Há algum tempo houve uma mudança significativa na forma como interagimos com as aplicações web. Uma nova tendência, denominada Web 2.0, tem mudado nossas concepções sobre o paradigma request/wait/response, usado na maioria dos sites tradicionais. O conjunto de tecnologias AJAX (Asynchronous JavaScript and XML) tornou possível trazer às aplicações web recursos de aplicações desktop com que sonhávamos desde nossos primeiros websites.
Uma grande divulgação do AJAX aconteceu através de aplicações criadas pelo Google, como Google Maps e GMail, e a empresa empresa vislumbrou a necessidade de se construir um framework para facilitar o desenvolvimento de aplicações com AJAX. Foi assim que nasceu o Google Web Toolkit (GWT).
Neste artigo abordaremos a construção de uma aplicação AJAX que utiliza diversos componentes personalizados estendendo a API do GWT. Veremos como criar uma tabela paginada com campos editáveis e uma caixa de diálogo personalizada, além de demonstrar o gerenciamento de eventos e chamadas de serviços para acesso a dados. Para cada componente abordaremos particularidades da API e dicas sobre sua utilização. Para uma introdução ao GWT, sua API básica e a estrutura utilizada para projetos, recomendo a leitura do artigo “Google Web Toolkit” na Edição 38 da Java Magazine.
Preparação
Para a construção do exemplo, vamos utilizar o IDE Eclipse com dois plug-ins: WTP (Web Tools Project) e Googlipse. No site do WTP (eclipse.org/webtools) existe uma versão do Eclipse com este plug-in incluso. Se você já tem o Eclipse instalado, pode também baixar e instalar o WTP do site de atualizações do Callisto.
Tendo instalado o WTP, faça o download do JAR do Googlipse (em googlipse.com) e coloque-o dentro da pasta eclipse/plugins. Depois, dentro do Eclipse, abra o menu Window|Preferences, escolha a opção Googlipse e defina a pasta onde está instalado o GWT (download em code.google.com/webtoolkit/). Com isso sua IDE fica preparada para o desenvolvimento dos exemplos mostrado neste artigo.
Como banco de dados usaremos o MySQL. A Listagem 1 mostra o script para a criação da única tabela que precisamos. Todo o código aqui demonstrado está disponível no site da Java Magazine. Para facilitar os testes o download inclui também uma classe que carrega o banco de dados com nomes e endereços aleatórios.
Listagem 1. Script para criação do banco de dados. Apenas uma tabela será necessária.
CREATE TABLE artigogwt.contato (
contato_id BIGINT NOT NULL AUTO_INCREMENT,
nome VARCHAR(45),
telefone VARCHAR(45),
celular VARCHAR(45),
email VARCHAR(45),
endereco VARCHAR(150),
PRIMARY KEY(contato_id)
)
Construção de componentes
O exemplo que construiremos será uma lista de contatos (veja a Figura 1), formada por uma tabela com paginação e uma área de exibição de fotos. Além disso, criaremos uma caixa de diálogo que mostra mais informações sobre um contato selecionado na tabela. Veja algumas particularidades do exemplo:
· A tabela terá campos editáveis, sensíveis a cliques do mouse e à tecla Enter.
· A persistência é feita de forma transparente: assim que o campo editável não possuir mais o foco os dados serão atualizados na base de dados, sem necessidade de intervenção do usuário.
· A caixa de diálogo pode ser fechada tanto com o mouse como com o teclado (Enter ou Esc).
Figura 1. Lista de contatos com paginação, DialogBox, campos editáveis e fotografia.
Iniciando o projeto
Começamos criando um projeto GWT. No Eclipse (com o WTP e o Googlipse instalados), acione File|New>Project>Web>Dynamic Web Project. Na primeira tela (Figura 2) preencha apenas o nome do projeto (“ComponentesGWT”) e clique
Figura 2. Criando de um Dynamic Web Project
Clique com o botão direito sobre o nome do projeto, navegue até New>Other>Googlipse e escolha a opção GWT Module. Na próxima tela configure o campo Location: clique no botão Create, e em Name forneça br.com.jm.gwt; depois clique
· br.com.jm.gwt.client – Com código Java que será transformado em JavaScript e executará no browser.
· br.com.jm.gwt.server – Onde estarão a implementações dos serviços, como código de acesso a dados e classes de negócio.
· br.com.jm.gwt.public – Contendo imagens, arquivos CSS, páginas HTML etc.
Note que alguns arquivos também foram criados:
· br.com.jm.gwt.public.JMListaContatos.html – Arquivo HTML com tags indicando as posições onde serão incluídos os componentes AJAX, e onde é importada a biblioteca JavaScript do GWT (gwt.js). Esse arquivo, que é chamado na documentação do GWT de Host Page, possui também um elemento
definindo qual módulo será carregado.
· br.com.jm.gwt.client.JMListaContatos.java – Classe responsável por inicializar os componentes e posicioná-los dentro do HTML. É chamada pelo GWT de Entry Point.
· br.com.jm.gwt.JMListaContatos.gwt.xml – Define as configurações do módulo GWT e seus serviços.
Deixe a classe JMListaContatos e o arquivo JMListaContatos.gwt.xml inalterados por enquanto. Mas modifique o arquivo JMListaContatos.html deixando-o igual à Listagem 2. Este arquivo inclui dois componentes que são referenciados pelos seus ids (contatos e fotografia) dentro de uma tabela HTM.
Listagem 2. HTML que define onde ficarão nossos componentes - JMListaContatos.html
Com a organização do projeto concluída (veja a Figura 3), podemos passar à construção dos nossos componentes. Todos os componentes serão criados dentro do pacote br.com.jm.gwt.client.
Figura 3. Estrutura de pacotes e arquivos de um projeto GWT
Componente Fotografia
O primeiro componente que vamos criar mostra a fotografia do contato selecionado, e estende a classe Image do GWT. Uma funcionalidade adicional da nossa classe Fotografia (mostrada na Listagem 3) é que se não houver imagem cadastrada para o contato, será mostrada uma imagem padrão. A classe também demonstra o tratamento de eventos na leitura de imagens.
