Artigo WebMobile 9 - Introdução ao Google Web Toolkit

Clique aqui para ler este artigo em PDFtrata-se do AJAX (Asyncronous Javascript And XML); que é o uso sistemático de Javascript e XML (e derivados) para tornar o navegador mais interativo com o usuário. Ele tornou-se bastante popular devido a sua utilização no GMail (www.gmail.com). Mas a sua utilização ainda demanda um esforço considerável de desenvolvimento. A fim de diminuir esse esforço, o Google lançou o Google Web Toolkit.

O Google Web Toolkit (GWT) é um framework Java construído para facilitar o desenvolvimento de aplicações internet que façam uso de Ajax. Com ele é possível desenvolver e depurar essas aplicações na linguagem Java utilizando uma IDE convencional. Para distribuir essa aplicação, o GWT compila e traduz a aplicação Java para código JavaScript e HTML compatíveis com os navegadores, além de permitir uma maior modularização dos componentes AJAX e JavaScript.

Neste artigo é mostrado um estudo de caso que utiliza o GWT para construir um aplicativo Ajax que faz acesso ao serviço Google Calendar, o qual mostra a lista de eventos presentes em um calendário pessoal ou público. Esse aplicativo faz acesso a um servlet que a partir de uma biblioteca fornecida pelo próprio Google acessa as informações presentes no calendário.

Configuração do ambiente

Utilizaremos para o projeto um ambiente montado no Windows que consiste em ter instalado o Java SDK, Eclipse 3.1, Google Web Toolkit SDK (code.google.com/webtoolkit/) e o Google Data API  (GData) (code.google.com/apis/gdata/), que faz acesso ao serviço do Google Calendar. A instalação do GWT é bastante simples, basta baixá-lo e descompactar o arquivo em uma pasta qualquer. O GData também é um arquivo compactado que possui duas bibliotecas que utilizaremos posteriormente.

Junto com a instalação do GWT temos os arquivos de script para execução em linha de comando que ajudam na criação dos projetos para o Ant e para o Eclipse, são eles o projectCreator (para criar os arquivos de projeto) e applicationCreator (para criar a primeira aplicação). Faremos uso deles para criar o projeto do Eclipse. Para isso devem ser executados na pasta do GWT os seguintes comandos:

projectCreator.cmd –eclipse Calendario

applicationCreator.cmd –eclipse Calendário cal.client.Calendario

A execução desses comandos irá gerar a pasta “src” e os arquivos .project (projeto do Eclipse), Calendario-compile.cmd (script para compilar a aplicação gerada), Calendario-shell.cmd (script para executar o ambiente de teste GWT) e Calendario.launch (arquivo de configuração do Eclipse para execução do ambiente de teste GWT). A pasta e os arquivos criados devem ser movidos para uma pasta qualquer onde ficará o projeto.  

É necessário importar o projeto criado e para isso, com o Eclipse aberto, vá até o menu File -> Import, onde aparecerá a caixa de diálogo Import (Figura 1). Selecione “Existing Projects into Workspace” e clique em Next. Na tela seguinte selecione o local onde foi colocada a pasta com os arquivos em “Select root directory” e depois marque o projeto “Calendario” e clique em Finish. Teremos a estrutura de pastas mostrada na Figura 2.

Figura 1. Caixa de diálogo Import.

Figura 2. Estrutura de pastas do projeto.

Devemos também adicionar as bibliotecas do GData ao Build Path do projeto. Para isso, acesse a caixa de diálogo de propriedades do projeto através do menu Project -> Properties. Escolha o item “Java Build Path” e depois selecione a aba  “Libraries”. Clique no botão “Add External JARs...” e adicione os arquivos gdata-client-1.0.jar e o gdata-calendar-1.0.jar, que estão na pasta onde foi descompactado o arquivo zip do GData, e clique em “OK”.

Com o projeto, já foi criado uma configuração de execução que rodará o ambiente de teste do GWT. Para executar, vá ao menu Run -> Run..., onde aparecerá a caixa de diálogo Run (Figura 3). Selecione em Java Application a configuração Calendário e clique no botão Run. Feito isso, aparecerá o GWT Shell (Figura 4) e um navegador embutido (Figura 5) que mostrará o aplicativo de exemplo gerado. 

Figura 3. Caixa de diálogo Run.

...