Aprendendo AJAX com Google Web Toolkit (GWT) e Eclipse

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:

eremos 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.

Link interessantes sobre o GWT:



gwtpowered.org * Site com muitos tutoriais e links de novos componente GWT

eclipse.org/webtools * Plugin do eclipse para desenvolvimento Web

intellij.net *IDE com suporte ao GWT

Outros artigos sobre AJAX:

Criando
uma aplicação em PHP para trabalhar com o Google Calendar

Yahoo!
TV: Agora com Ajax.

Componentes
do YUI-EXT produzem interfaces profissionais em AJAX!

Yahoo!
UI Library - Conheça o AJAX do Yahoo.


Ajax/Javascript
Com DHTMLGoodies: Resulta em interfaces profissionais


ADOBE
doa código fonte para Mozilla, que pretende criar Framework AJAX

Ajax
com Dojo: Tem até gráfico!

JQuery
- Uma nova forma de programar em JavaScript

Pyjamas:
Criando aplicações AJAX programando em python

Aprendendo
AJAX com Google Web Toolkit (GWT) e Eclipse

Um
Cliente Samba Feito em Ajax

Ajax é com
o Eclipse