Google Web ToolKit

Escrever aplicações em AJAX com Google Web Toolkit (GWT) é fácil principalmente para quem já tem experiência em aplicações JAVA, mesmo para quem esta iniciando o framework é uma boa opção pois tem uma ótima documentação com vários exemplos, é em cima de um destes exemplos que farei uma simples analise mostrando como é simples entender as Classes e usar as documentações para buscar referências nos códigos de exemplo.

Resumindo com o GWT você cria aplicações AJAX a partir classes em JAVA, o framework do Google faz todos o trabalho de conversão dos códigos do JAVA para JavaSript e XML, tornando o desenvolvimento do AJAX restrito somente na programação JAVA.

Cada vez que eu uso o meu Gmail penso: o AJAX realmente facilita as coisas, no Google varias aplicações usam o AJAX, com isso podemos criar site/aplicações web com a mesma tecnologia que o Google usa.

Primeiro vamos fazer o download do GWT no http://code.google.com/webtoolkit ( tem a versão para Linux e windows, estarei usando o Linux mas pouca coisa muda para o windows ). Outro requisito é ter o Eclipse instalado ( com Web Tools Project – WTP), eu usei O Eclipse Callisto para facilitar o trabalho, e claro estou considerando que o JAVA esta instalando e configurado. Vamos começar instalando o GWT, eu intalei em /opt mas pode ser em qualquer diretório, ( bom seria colocar o diretório do GWT em sua variável PATH).

Será criado o diretório gwt-linux-1-0.21, ou seja o /opt/ gwt-linux-1-0.21 é o diretório que esta instalado o GWT.

Estrutura de arquivos do GWT, O arquivo index.html traz os links para as documentações e exemplos incluídos no pacote padrão.

Agora crie um diretório onde ficará o nosso projeto de teste.

Criando o Projeto no padrão do Eclipse.

O GWT traz dois utilitários para a criação do projeto já no padrão do Eclipse com todas as bibliotecas necessárias já configuradas.

Onde EtiGwt é o nome no projeto criado.

Depois execute:

Acima foi criado a estrutura básica de um projeto no Eclipse, com as devidas configurações das bibliotecas
do GWT.

Agora acesse o seu eclipse e importe o projeto criado. ( menu File -> Import )

Acesse o diretório onde você criou o projeto

Será carregado o projeto criado pelo GWT, no exemplo o EtiGwt

Com isto estará criado a estrutura padrão do nosso projeto no eclipse

Onde, o código de exemplo gerado esta no pacote com.eti.client ( o arquivo .java). O pacote com.eti tem um diretorio public que guarda os arquivos HTML que são usados para apresentar os componentes do GWT.

Rodando o código de exemplo.

Apenas para demonstrar como é feita a execução de uma aplicação feita em GWT, vá até o shell dentro do diretório onde esta o projeto do eclipse e execute.

Será executado a aplicações sem a necessidade de fazer a compilação.

Clicando no botão Click me, você verá a pequena e famosa mensagem , “Hello World!”

Estudando um pouco o código é bem simples:

01 componente Button: que é o botão click me

01 componente Label: Que é o texto “Hello World”

Foi adicionado uma ação ao clicar no componente Button ( com o button.addClickListener …), esta ação mostra a mensagem no Label modifica o texto padrão do Label ( setText() ) como “” ( ou seja em branco ). Ao fim é chamado o gerenciador de painéis (Panel, esta é uma classe muito importante) para colocar os dois componentes nas devidas especificações do artigo EtiGwt.html, através da TAG id dentro do html.

GWT a documentação:

A grande vantagem é que o GWT tem um ótima documentação ( claro que não é tudo, mas para começar esta muito bom ), e vamos usar um exemplo da documentação para mostrar mais um código.

Acesse o arquivo index.html dentro do diretório de instalação do GWT.

Depois acesse o link da documentação.

Você terá exemplos dos componentes (Widgets) disponíveis, e toda a documentação das classes sempre com um pequeno exemplo de código.

Acesse a documentação do pacote com.google.gwt.user.client.ui.

Acesse o linke o componente COMPOSITE.

Copie o exemplo ( o código em verde ) o cole no eclipse dentro do arquivo EtiGwt.java, como abaixo.

Repare que o eclipse aponta vários erros no código isto porque os “imports” das classes necessárias não estão feitos, o eclipse mesmo já sugere quais são as classes que estão faltando ( basta clicar em um linha que esta indicando o erro) . Abaixo os “imports” depois da modificação feita automaticamente pelo eclipse

Cole também o código abaixo com o chamado do “RootPanel.get” dentro do método onModuleLoad() existente, para mostrar o novos componentes no fim da tela O código completo deve ficar mais ou menos assim.

 
package com.eti.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
/**
 * 
 * Entry point classes define onModuleLoad().
 */
public class EtiGwt implements EntryPoint {
/**
 * A composite of a TextBox and a CheckBox that optionally enables it.
 */
public static class OptionalTextBox extends Composite implements ClickListener {
   private TextBox textBox = new TextBox();
   private CheckBox checkBox = new CheckBox();
/**
 * Constructs an OptionalTextBox with the given caption on the check.
 * 
 * 
 * @param caption
 *            the caption to be displayed with the check box
 */
public OptionalTextBox(String caption) {
// Place the check above the text box using a vertical panel.
   VerticalPanel panel = new VerticalPanel();
   panel.add(checkBox);
   panel.add(textBox);
// Set the check box’s caption, and check it by default.
   checkBox.setText(caption);
   checkBox.setChecked(true);
   checkBox.addClickListener(this);
// All composites must call setWidget() in their constructors.
   setWidget(panel);
// Give the overall composite a style name.
   setStyleName(“example-OptionalCheckBox”);
}
public void onClick(Widget sender) {
    if (sender == checkBox) {
     // When the check box is clicked, update the text box’s enabled state.
      textBox.setEnabled(checkBox.isChecked());
     }
}
/**
 * Sets the caption associated with the check box.
 * 
 * 
 * @param caption
 *            the check box’s caption
 */
public void setCaption(String caption) {
// Note how we use the use composition of the contained widgets to provide
// only the methods that we want to.
   checkBox.setText(caption);
}
/**
 * Gets the caption associated with the check box.
 * 
 * @return the check box’s caption
 */
public String getCaption() {
  return checkBox.getText();
   }
}
/**
 * This is the entry point method.
 */
public void onModuleLoad() {
  final  Button button = new   Button(“Click me”);
  final Label label = new Label();
  button.addClickListener(new ClickListener() {
  public void onClick(Widget sender) {
  if(label.getText().equals(“”)) {
    label.setText(“Hello World!”);
  else
    label.setText(“”);
  }
  }
 }
);
// Assume that the host HTML has elements defined whose
// IDs are “slot1″, “slot2″. In a real app, you probably would not want
// to hard-code IDs. Instead, you could, for example, search for all
// elements with a particular CSS class and replace them with widgets.
//
  RootPanel.get(“slot1″).add(button);
  RootPanel.get(“slot2″).add(label);
// Create an optional text box and add it to the root panel.
  OptionalTextBox otb = new OptionalTextBox(“Check this to enable me”);
  RootPanel.get().add(otb);
  }  
}

Execute novamente a aplicação:

Teremos agora no fim da pagina, um checkBox e abaixo um TextBox, onde o TextBox pode ser habilidade e desabilitado com base no checkBox .

Analisando rapidamente o código:

Criamos um método em nossa classe que tem como objetivo mostrar um TextBox (OptionalTextBox) onde é possível desabilita-lo através de um CheckBox Estes dois componentes foram alinhados com o gerenciador de painéis (Panel) na vertical ( ou seja um abaixo do outro ).Foi atribuído ao CheckBox um texto padrão que neste caso é o titulo do Check, checkBox , .setText(caption).Foi atribuído uma ação ao Check Box, que será o responsável por habilitar e desabilitar o TextBox.

Conclusão:

Temos em mãos um ótimo framework e claro com todo o suporte do google, este exemplo é realmente simples usei um exemplo pronto da documentação do GWT, experimente isto, pegar cada classe e fazer o testes. O Gerenciador de painéis DockPanel é muito interessante e vale a pena ser estudado. Neste exemplo não foi usado acesso a bando de dados, tarefa que claro esta disponíveis no GWT, também existe a possibilidade de integrar o GWT com o acesso ao banco de dados em PHP, o mais comum e default seria fazer acesso a banco de dados com JDBC, o GWT traz as classes necessárias para fazer esta interface.

Aguardo comentários, e sugestões para estudar e criar aplicações em GWT.