Google Web Toolkit

Introdução

Google Web Toolkit Certamente muitos de vocês já tiveram necessidade de desenvolver algum tipo de aplicação para a Web e, como tal, devem ter investigado sobre plataformas que já dessem algum suporte ao desenvolvimento deste tipo de aplicações. Com uma rápida pesquisa no Google encontrámos um grande número de plataformas Web sobre as mais diversas tecnologias e, a quantidade e diversidade é tal, que se torna difícil saber qual plataforma escolher. Mas… este artigo não irá focar as plataformas Web existentes, mas sim sobre uma plataforma em particular, o Google Web Toolkit. O Google Web Toolkit foi desenvolvida pela Google (tal como o nome sugere), inicialmente com o objectivo de dar suporte aos seus engenheiros no desenvolvimento de aplicações Web. Posteriormente algum senhor da Google teve a amabilidade e a brilhante ideia de disponibilizar a plataforma para a comunidade em geral…

A vida Pré-GWT… Javascript vs Browser

Falando um pouco sobre a linguagem Javascript, esta é uma linguagem muito utilizada na web, pela tecnologia AJAX (Asynchronous Javascript and XML) criada para a construção de páginas dinâmicas sendo interpretada directamente pelo browser. O seu nome chega a ser enganador pois, numa primeira abordagem, pensamos logo ser uma derivação do Java, o que não é de todo verdade, pois esta linguagem possui este nome simplesmente por questões de marketing, já que na data em que o nome lhe foi atribuído o Java era linguagem sensação. Um dos problemas do Javascript é o facto de esta possuir uma relação estreita com os diferentes browsers na medida em que cada um tem a sua própria interpretação da linguagem, ou seja, não existe uma padronização que permita a correcta interpretação da linguagem em todos os browsers. Trocando por miúdos, significa que programando em Javascript corre-se risco de que as funções criadas não tenham comportamento semelhante em todos os browsers. Agora imaginem-se ali confortáveis na vossa secretária, desenvolvendo uma vossa aplicação web, fazendo umas coisas engraçadas com Javascript e, na altura de testar, todos entusiasmados, reparam que a aplicação não funciona correctamente em todos os browsers. E porquê? Simplesmente porque o Javascript precisa de “ser refinado” de forma a ser bem interpretado por cada um dos anteriores… É claro que vocês como bons profissionais querem que a vossa aplicação seja executada de uma forma correcta e completa, independentemente do browser, e como tal começam a procurar os potenciais problemas, investigar sobre incompatibilidades e entram no terrível ciclo de procurar, modificar, testar, procurar, modificar, testar… São nestes momentos que muitos de vocês fumadores respiram fundo, levantam-se e vão fumar o seu cigarro… e os que não fumam, respiram fundo, levantam-se e pensam experimentar um cigarrinho.

É realmente muito incómodo andar a programar módulos para que a mesma aplicação corra correctamente em todos, ou pelo menos, na maioria dos browsers. Isso implica que o programador tenha conhecimentos dos problemas de incompatibilidades e tempo para que possa corrigi-los (e tempo no mundo do desenvolvimento de software é preciosíssimo). Foi então que os engenheiros da Google, pessoas experientes no desenvolvimento de aplicações com tecnologia AJAX como o GMail, Google Calendar, Google Maps, cansados de incompatibilidades, correcções e testes, necessitavam de usufruir de uma plataforma que desse suporte à correcção de tais incompatibilidades e que torna-se o processo de desenvolvimento das aplicações mais produtivo, mais flexível e consequentemente mais rápido.

Como resultado surgiu o Google Web Toolkit (GWT).

Google Web Toolkit – A “caixinha mágica”

Esta plataforma revelou-se bastante poderosa na medida em que quem a utiliza pode desenvolver as suas aplicações web puramente em Java… É verdade, Java. O GWT, como já foi dito, é uma plataforma web e como tal consiste em um conjunto de APIs e componentes visuais que facilitam o processo de desenvolvimento das aplicações, sendo que este é feito utilizando a linguagem Java, uma linguagem madura, robusta, orientada à objectos, utilizada por muitos programadores e cuja documentação na web é vasta. Para além disso, o GWT permite a escolha de um IDE Java onde será desenvolvida a aplicação. Assim sendo, para utilizar a plataforma basta apenas fazer o download da respectiva, escolher um IDE Java da vossa preferência e começar a trabalhar, tão simples quanto isto… Mais adiante, no tópico GWT – Primeiros Passos este processo inicial será mais bem explicado. Mas o que torna o GWT mesmo interessante é o facto de que, depois de desenvolvida a vossa aplicação o que o este faz é compilar todo o vosso código Java para código Javascript para que possa então ser correctamente interpretada no browser. Todo o código Javascript gerado é optimizado de forma a corrigir “automaticamente” todas as incompatibilidades com os browsers, ou seja, a plataforma é responsável pelo trabalho chato. Fixe, hein… O GWT é mesmo uma “caixinha mágica”. Nada melhor do que passar a batata quente para os “outros”, neste caso, para o GWT.

Java[script]?

No meio de todo este processo engraçado existe um “Mas…” ao qual precisamos de ter muita atenção. É que como muitos sabem a linguagem Java é mais madura e mais evoluída que a linguagem Javascript e, como tal, existem classes e bibliotecas da primeira que não são suportadas por esta última. Falando concretamente no GWT 1.5 (última versão disponibilizada para a comunidade) este já é compatível com Java 1.5 onde, por exemplo, genéricos já são suportados. Mas para uma visão geral e completa o melhor mesmo é consultar a documentação disponibilizada pela Google.

GWT – Primeiros Passos

Agora que já têm noção do que é e para que serve a plataforma GWT vamos meter mãos na massa… De seguida, serão explicados os passos de demonstração de como começar a utilizar o GWT. Irá ser criado a estrutura da aplicação e do projecto para ser importado no Eclipse.

Passo 1 – Descarregando o Google Web Toolkit para o nosso computador

Antes de mais é necessário descarregar o GWT. Para tal, ir à http://code.google.com/intl/pt-PT/webtoolkit/download.html e fazer o download da última versão da plataforma (GWT 1.5).

Depois de descarregado o GWT, extraia a pasta, copie-a para a localização C: e renomeie-a com o nome gwt.

Ao abrirem a respectiva pasta podem reparar em dois aplicativos, o applicationCreator e o projectCreator, que já permitem, através de linha de comandos, criar a estrutura da aplicação e do projecto respectivamente, para que este possa ser então importado no Eclipse.

Passo 2: Variáveis de Ambiente – Adicionar o GWT ao PATH

Uma vez que os aplicativos anteriores são invocados por linha de comandos, para evitar colocar todo o endereço sempre que estes são invocados, o melhor a fazer é adicionar a aplicação GWT ao PATH do sistema, ou seja, às variáveis de ambiente.  Isto é feito da seguinte forma: Ir à Iniciar, clicar com o botão direito do rato sobre O meu computador e clicar em Propriedades.

De seguida irá surgir uma nova janela, como mostra a figura seguinte, que dá acesso as variáveis de ambiente. Clique em Variáveis de ambiente.

GWT: editar variáveis de ambiente

Finalmente surge a janela das Variáveis de ambiente. Clique sobre a variável PATH e de seguida clique em Editar.

Já “dentro” da variável PATH, digite C:/gwt (note que tem de separar todos os endereços por ponto e vírgula, tal como mostra a figura).

GWT: editar PATH

Depois é só clicar em OK e está feito… O GWT está adicionado a variável PATH.

Passo 3: Gerar a estrutura do Projecto

Agora que o GWT já foi adicionado ao PATH do sistema é agora mais fácil invocar os aplicativos applicationCreator e projectCreator na linha de comandos. As linha executadas para os aplicativos têm a seguinte sintaxe.

Para o applicationCreator:

applicationCreator -eclipse NOMEDOPROJECTO -out LOCALIZAÇÃO gwt.myfirst.sample.NOMEDOPROJECTO.client.NOMEDOPROJECTO

Como podem ver existem três secções importantes que definem respectivamente, o nome o projecto, a localização do mesmo e (a segunda linha) o local onde os ficheiros Java serão guardados (sempre dentro da LOCALIZAÇÃO). Pode especificar esta terceira linha como quiser, no entanto, convém que seja do tipo *.client.* ou *.server.* apelando assim à organização do código (código do lado cliente, código do lado servidor).

Para o projectCreator:

projectCreator -eclipse NOMEDOPROJECTO -out LOCALIZAÇÃO

Para gerar a estrutura do projecto basta especificar o nome do projecto e a sua localização. Este gera um conjunto de pastas e ficheiros que irão consistir na estrutura do projecto a importar no Eclipse.

Voltando ao trabalho, crie uma nova pasta em C: com o nome GWT_Projects. Esta será a pasta onde ficará guardada a sua primeira aplicação GWT.

Agora abra a linha de comandos e vá para a pasta GWT_Projects.

Para criar a estrutura da sua primeira aplicação GWT, designada “HelloWorld” digite a seguinte linha:

applicationCreator -eclipse HelloWorld -out HelloWorld gwt.myfirst.sample.helloworld.client.HelloWorld

Como pode ser observado, foram criados um conjunto de pastas e ficheiros que constituem a estrutura da aplicação.

GWT: resultado do comando applicationCreator

Criada a estrutura da aplicação, agora será criada a estrutura do projecto. Para tal, digite agora a seguinte linha:

projectCreator -eclipse HelloWorld -out HelloWorld

Mais uma vez, foram gerados um conjunto de ficheiros e pastas que irão constituir a estrutura do projecto da aplicação.

Agora, dentro da pasta GWT_Projects pode-se observar que existe uma nova pasta designada HelloWorld que contém todas as pastas e ficheiros gerados nos passos anteriores. Esta pasta consiste na sua nova aplicação GWT.

GWT: aplicação Hello World

A partir deste momento já é possível executar a aplicação embora esta ainda não tenha sido importada para o Eclipse. Pode se observar pela imagem acima que foram criados dois novos aplicativos, o HelloWorld-compile e o HelloWorld-shell. O primeiro permite compilar todo o código Java para código Javascript para que a aplicação possa então ser colocada e executada na web enquanto o segundo permite executar a aplicação em “Hosted-Mode”.

Mas… e o que significa “Hosted-Mode”?

Esta é outra das particularidades do GWT. Ele permite que as aplicações sobre ele desenvolvidas sejam executadas em dois modos:

  • Web-Mode; e
  • Hosted-Mode.

Web-Mode consiste na execução da aplicação já sobre a web, onde todo o código Java já foi convertido para Javascript, ou seja, a aplicação já corre sobre a plataforma para a qual foi criada, a web.

Hosted-Mode consiste num browser interno do GWT, usado durante a fase de desenvolvimento da aplicação e que permite o debugging das aplicações em código Java. Ou seja, sempre que for preciso testar a aplicação não é necessário compilar todo o código Java para Javascript e executar a respectiva sobre a web. Desta forma, toda a aplicação é desenvolvida e testada em Java, facilitando muito a tarefa do programador e tendo-se a certeza de que quando esta for “migrada” para a web estará em pleno funcionamento.

Passo 4: Importar e executar a aplicação no Eclipse

Agora que a estrutura da aplicação está criada, basta importá-la para o Eclipse. Para importar o projecto, siga os seguintes passos:

  1. Abra o Eclipse e vá ao menu File > Import (irá surgir uma janela com o item Existing Projects into Workspace já seleccionado).
  2. Clique Next.
  3. Surge novamente uma janela, onde deverá seleccionar a pasta onde se encontra o projecto que pretende importar. Vá à pasta GWT_Projects e seleccione a pasta HelloWorld.
  4. Para concluir o processo clique em Finish e pronto, já está, a aplicação Hello World foi importada no Eclipse com sucesso.

A classe HelloWorld implementa a interface designada EntryPoint que basicamente consiste no main de uma aplicação Java normal, ou seja, este é o ponto de entrada de execução da aplicação.

Para correr a aplicação em Hosted-Mode basta clicar no botão Run. Irá surgir uma nova janela onde devem seleccionar o item à esquerda correspondente ao projecto, neste caso HelloWorld.

Cliquem em Run e a aplicação será então executada através do browser interno do GWT.

Esta é a aplicação por defeito. A partir daqui podem começar a desenvolver a vossa aplicação web. Foi-vos aqui ensinado o “modo manual” para trabalhar com a plataforma para que pudessem entender um pouco a estrutura e o processo de criação de um projecto GWT. No entanto, já existem plugins como o GWTDesigner, que infelizmente não é freeware mas na qual é disponibilizado um trial, e que dá suporte ao desenvolvimento de aplicações GWT sobre o Eclipse. O IntelliJ Idea (outro IDE Java) já permite também criar projectos GWT dando também muito e bom suporte ao desenvolvimento deste tipo de aplicações.

Concluindo…

O Google Web Toolkit é uma plataforma muito interessante e sem dúvida será muito requisitada na medida em que esta utiliza uma linguagem muito popular, Java. Embora alguns dos seus componentes ainda tenham alguns bugs, esta está sendo constantemente corrigida e aperfeiçoada, tornando-se cada vez melhor a cada versão que é disponibilizada.

Com este artigo foi pretendido dar-vos a conhecer o Google Web Toolkit e os primeiros passos com esta plataforma web. Ficaram a conhecer de uma forma geral o que é, para que serve e como funciona.

No próximo artigo irá ser elaborado uma aplicação GWT mais complexa de forma a abordar mais aspectos desta plataforma, como por exemplo comunicação cliente/servidor, desenho de interfaces, etc… Até lá espero que tenham curiosidade em investigar mais sobre o GWT, pois existem já muitos e bons livros que descrevem e ensinam de uma forma exaustiva todas os detalhes do GWT.