O GWT é um tecnologia extraordinária. Ela possibilita que aplicações sejam criadas em java e após compilado, transformado em JavaScript gerando assim uma aplicação dinâmica e bastante flexível.
A internet está cheia de tutorias e o próprio site do GWT somado ao grupo oficial de usuário é uma fonte excelente de informação para tirar dúvidas e melhorar o conhecimento.
Um problema que é muito comum nos vários tutoriais que vemos pela internet é que eles não são completos o suficientes para o usuário mais iniciante ter um compreensão da tecnologia e muitas vezes até desmotiva a continuidade em busca de um maior entendimento ante os primeiros desafios.
Para quem está iniciando uma boa alternativa é utilizar o Netbeans com seu plugin gwt4nb para GWT pois ele permite criar uma aplicação completa inclusive fazer deploy para seu servidor de aplicação.
Para o Eclipse, entretanto, não existe nenhuma boa alternativa livre (que eu conheça) para se trabalhar com o GWT, mas isso pode ser contornado de forma simples. Vamos lá:
Faça o download:
wget http://google-web-toolkit.googlecode.com/files/gwt-linux-1.5.2.tar.bz2
veja opções para outras plataformas em http://code.google.com/webtoolkit/versions.html
Descompacte o arquivo:
tar -xjvf gwt-linux-1.5.2.tar.bz2
Edite suas variáveis de ambiente criando a variavel para GWT_HOME e atualizando a variável PATH.
Em sistemas no padrão Linux basta editar o arquivo oculto chamando .profile em sua pasta pessoal adicionando as seguintes linhas
export GWT_HOME=/home/paulo/gwt-linux-1.5.2
export PATH=$PATH:$GWT_HOME
Lógico que você precisará substituir /home/paulo/gwt-linux-1.5.2 pela pasta onde você descompactou o gwt.
Em sistemas Windows o procedimento é realizado editando-se as propriedades do sistema conforme imagem abaixo:
Criando um projeto para teste
O objetivo do nosso teste é apenas criar um esqueleto de uma aplicação padrão, acrescentando a ela uma serviço RPC e por
fim fazer o deploy num conteiner web, no nosso caso, para simplificar, o Tomcat, mas não é preciso nenhuma mudança para que este rode no Glassfish
no console digite:
cd workspace/
applicationCreator -out gwtWebMode -eclipse gwtWebMode br.com.sample.client.GwtWebMode
o gwt criou uma estrutura básica para trabalharmos. Normalmente usaríamos um outro recurso do gwt que é criar um projeto para o eclipse, com o comando projectCreator importando-o em seguida mas não vamos fazê-lo pois o projeto criado não gera os artefatos para uma aplicação web coisa que uma aplicação gwt é por natureza.
O que vamos fazer é pedir para o Eclipse criar um novo projeto web justamente na pasta recém criada, isso aproveitará os arquivos criados pelo applicationCreator e nos dará os artefatos adicionais.
Abra o Eclipse e escolha File/New/Other/Dynamic Web Project
Digite o nome do projeto igual ao nome ao informado ao applicationCreator.
Sua aplicação já deverá funcionar em hosted mode. Experimente executar GwtWebMode-shell (está na pasta recém criada).
O hostmoded é uma opção rápida para utilização durante a fase de desenvolvimento, mas nem todos os recursos que sua aplicação irá precisar são suportados.
Executando em WebMode
O que vamos fazer é criar um mecanismo capaz de compilar nossa aplicação e fazer o deploy dela em nosso servidor web. A melhor opção ainda é utilizar um script Ant
salve o arquivo abaixo na raiz de seu projeto com o nome build.xml
< ?xml version="1.0" encoding="UTF-8"?>
salve também esse arquivo de propriedades na mesma pasta com o nome build.properties
gwt.dir=/home/paulo/gwt
web.dir=${basedir}/WebContent
module=GwtWebMode
package=br.com.sample
url=http://localhost:8080/${ant.project.name}/${package}.${module}/${module}.html
war=${ant.project.name}.war
app.server.dir = /home/paulo/bin/apache-tomcat
app.server.deploy.dir = ${app.server.dir}/webapps
app.server.lib.dir = ${app.server.dir}/lib
gwt-security=OBFUSCATE
Não vou entrar nos detalhes dos arquivos.
O Eclipse deve está se “queixando” que não conhece as classes do GWT. Para resolver este problema copie os arquivos
$GWT_HOME/gwt-user.jar
$GWT_HOME/gwt-dev-linux.jar
$GWT_HOME/gwt-servlet.jar
para a pasta: gwtWebMode/WebContent/WEB-INF/lib e dê um refresh em seu projeto.
Certifique-se que o Tomcat esteja instalado e em execução.
Abra o arquivo build.properties e altere as variáveis gwt.dir e app.server.dir para refletir sua instalação
gwt.dir=/home/paulo/gwt-linux-1.5.2
app.server.dir = /home/paulo/bin/apache-tomcat
Edite seu arquivo web.xml modificando a tag welcome-file
Clique com botão direito no arquivo build.xml e escolha Run As/Ant Build. Após concluindo abra o browse no seguinte endereço:
http://localhost:8080/gwtWebMode/
Incluindo um Serviço RPC
Um outro importante recurso do GWT é a possibilidade de executar serviços remotos. Esses serviços são servlets especiais que fazem ponte entre o javascript gerado e a parte servidora, possibilitando assim um completa integração com outras aplicações e os mais variados frameworks que somos dependentes.
O nosso serviço apenas receberá uma String e retornará a quantidade de caracteres deste.
inicie criando a interface StringLengthService. Ela precisa estender a interface RemoteService.
package br.com.sample.client;
import com.google.gwt.user.client.rpc.RemoteService;
public interface StringLengthService extends RemoteService {
public Integer length(String string);
}
Em seguida você precisa de uma outra interface que permitirá invocar os serviços de forma assíncrona, ou seja ele será executado em background e comunicado assim que houver uma “resposta” da execução do serviço.
package br.com.sample.client;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface StringLengthServiceAsync {
void length(String string, AsyncCallback async);
}
Por fim criaremos a classe responsável por implementar o serviço: Ela deve estender RemoteServiceServlet, implementar a interface StringLengthService anteriormente criada e deve ficar no
package br.com.sample.server
package br.com.sample.server;
import br.com.sample.client.StringLengthService;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
public class StringLengthServiceImpl extends RemoteServiceServlet implements
StringLengthService {
@Override
public Integer length(String string) {
if (string != null)
return string.length();
return 0;
}
}
Declando os Serviços
Aqui está um ponto crucial na execução de serviços RPC. Caso seu interese seja apenas executar seu serviço em hosted mode basta editar o arquivo GwtWebMode.gwt.xml declando nele seu serviço:
Só que não bastará isto para utiliza-lo em webmode. Você precisará declara-lo no arquivo web.xml como se faz com qualquer servlet.
Utilizando o Serviço
Por fim faremos agora a utilização do serviço. Crie uma referência ao serviço da seguinte forma:
this.lengthService = (StringLengthServiceAsync) GWT.create(StringLengthService.class);
((ServiceDefTarget) lengthService).setServiceEntryPoint(GWT.getModuleBaseURL()+ "/StringLength/StringLengthService");
Veja o código completo: GwtWebMode.java
package br.com.sample.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Image;
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 GwtWebMode implements EntryPoint {
private StringLengthServiceAsync lengthService;
/**
* This is the entry point method.
*/
public void onModuleLoad() {
// prepara o serviço
this.lengthService = (StringLengthServiceAsync) GWT.create(StringLengthService.class);
((ServiceDefTarget) lengthService).setServiceEntryPoint(GWT.getModuleBaseURL()+ "/StringLength/StringLengthService");
Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");
Button button = new Button("length");
img.getElement().setId("pc-template-img");
final TextBox textBox = new TextBox();
final Label lengthLabel = new Label();
VerticalPanel vPanel = new VerticalPanel();
vPanel.setWidth("100%");
vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
vPanel.add(img);
vPanel.add(textBox);
vPanel.add(button);
vPanel.add(lengthLabel);
// Add image and button to the RootPanel
RootPanel.get().add(vPanel);
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
lengthService.length(textBox.getText(),
new AsyncCallback() {
public void onFailure(Throwable arg0) {
lengthLabel.setText("foi mal! deu erro!");
}
public void onSuccess(Integer arg0) {
lengthLabel.setText("length = " + arg0.toString());
}
}
);
}
});
}
}
Se deseja faça o download dos fontes gwtWebMode.zip
