Ferramentas do Google

GWT | PROGRAMAÇÃO
Aplicativos Web dinâmicos com o Google Web Toolkit
PROGRAMAÇÃO
Ferramentas do Google
O Google Web Toolkit permite o desenvolvimento
de aplicativos Web complexos completamente em
Java, e converte-os automaticamente para AJAX.
por Ramon Wartala
Jean Scheijen - www.sxc.hu
O
Google é mais que um simples
mecanismo de busca. Essa
empresa grande e em rápida
expansão também compreende um
importante centro de desenvolvimento
de software. Além de programas como
o Google Desktop e o Google Earth,
a empresa produz outros softwares
baseados na Web a cada três meses.
Enquanto o Google Mail está sob os
holofotes, novos aplicativos como Google Reader, Google Calendar e Google
Spreadsheet ainda não atraíram muita
atenção. Esses aplicativos menos conhecidos compartilham a aparência
e o comportamento de seus companheiros mais populares, e utilizam
AJAX para o acesso rápido e fácil por
parte dos clientes.
Apesar de muitos suspeitarem que o
Google tivesse seu próprio framework
rodando sob o capô, não havia como ter
certeza disso até a conferência Java One,
em maio de 2006, quando foi liberado o
Google Web Toolkit (GWT) para download gratuito [1].
O que há na caixa?
O AJAX [2], processamento assíncrono
de requisições e respostas HTTP, que se
utiliza de Javascript e XML, é um termo
popular, atualmente, entre desenvolvedores Web. Os conjuntos de ferramentas
para AJAX de linguagens como Perl, Ruby
e PHP vêm se tornando cada vez mais
populares. Porém, o Google se aventurou
em território desconhecido com seu framework baseado em Java. O Java funciona
simplesmente como uma linguagem de
teste e geração, enquanto o AJAX utiliza
Javascript no lado cliente.
Mas qual o motivo da escolha do
Java? O principal é a eliminação de falhas. O GWT oferece
aos desenvolvedores a
Exemplo 1: Tabela de
possibilidade de executar
PostgreSQL para MyAddress
e testar aplicativos Java
01 CREATE TABLE myaddress.”names”
no chamado “modo hos02 (
pedado” (hosted mode).
03
id serial NOT NULL,
Isso significa executar
04
firstname varchar(50) NOT NULL,
uma versão em Java do
05
surname varchar(100) NOT NULL,
aplicativo dentro de uma
06
email varchar(128) NOT NULL,
07
CONSTRAINT id PRIMARY KEY(id)
máquina virtual Java. Os
08 )
programadores podem
09 WITHOUT OIDS;
usar seus ambientes de
10 ALTER TABLE myaddress.”names” OWNER TO myaddress;
desenvolvimento pre-
Linux Magazine #27 | Fevereiro de 2007
feridos, assim como suas ferramentas
de depuração.
Após o término do aplicativo, ele
é compilado para Javascript. O código HTML e Javascript gerado nesse
processo pode ser instalado em um
servidor web, onde será executado em
modo web (web mode). A arquitetura
de componentes do framework GWT
inclui um navegador web especial, uma
biblioteca de classes de widgets para interfaces AJAX, e implementações em
Javascript das classes padrão de Java,
tais como java.lang e java.util. Além
disso, o framework modifica o código
Javascript para se adequar a navegadores
web populares, como Mozilla, Firefox,
Internet Explorer, Opera e Safari.
Figura 1: Esse programa de emails é um dos aplicativos de
exemplo com o objetivo de demonstrar as capacidades do Google Web Toolkit.
75
PROGRAMAÇÃO | GWT
Exemplo 2: NameController
se encontrará no arquivo HTML, que
implementa a plataforma para a interface gráfica do cliente. As linhas mais
importantes são as referências à classe
do módulo e à biblioteca Javascript do
framework GWT:
01 class NameController <ApplicationController
02
scaffold :name
03
def find_names_to_json
04
# assegure-se de não enviar html, e sim texto puro
05
@headers[“Content-Type”] = “text/plain; charset=utf-8”
06
search_name = @params[‘surname’]
07
names = Name.find(:all, :conditions => [‘surname like ?’, search_name])
08
render_text names.to_json
09
end
10 end
Começando
O pacote gwt-linux-1.0.21.tar.gz, de 22
MB, inclui documentação e cinco aplicativos de exemplo, variando desde um
programa Hello, passando por um widget,
e indo até um pequeno aplicativo de
email (figura 1). Os aplicativos podem
ser iniciados através dos scripts shell nos
diretórios dos aplicativos.
O aplicativo de exemplo que discutiremos neste artigo utiliza um servidor
pré-existente para consultar um banco de
dados de endereços simples. Para manter tudo simples, o servidor será baseado
em Ruby On Rails, pois a implementação necessita de apenas algumas linhas
de código – o que obviamente não tem
qualquer efeito sobre o cliente. A versão
finalizada pode ser baixada em [3].
O serviço MeuEndereço, desenvolvido
especialmente para esse objetivo, é um
simples banco de dados (veja o exemplo
1) que gerencia prenomes, sobrenomes
e endereços de email.
A troca de dados baseia-se no formato
JSON (Javascript Object Notation) [4].
Diferentemente do XML, o JSON não
utiliza tags, e portanto gera menos trabalho. Para recuperar o endereço de um
sobrenome a partir do banco de dados
usando Rails, e para então empacotar o
endereço no formato JSON, precisamos
somente das dez linhas do exemplo 2. A
linha 6 lê o sobrenome a partir de uma
requisição HTTP, e encontra o endereço respectivo no banco de dados na linha
7. A linha 8 converte o endereço para o
formato JSON.
Figura 2: O web service do nosso exemplo pode fornecer os
registros diretamente para o navegador.
76
<meta name=’gwt:module’ content=’de.
➥wartala.MyAddress’>
<script language=”javascript” src=”gwt.
➥js”></script>
O comando ruby script\server start
inicia o serviço MyAddress. O servidor
interno de desenvolvimento em Ruby On
Rails faz o serviço escutar na porta 3000
em localhost. É possível simplesmente
consultar o servidor pelo endereço http://
localhost:3000/name/ em um navegador.
Outra vantagem do Ruby On Rails é que
se pode gerenciar o banco de dados através
de um formulário de entrada gerado (figura 2). Após preencher algumas entradas,
é possível consultá-las no navegador, na
URL http://localhost:3000/name/find_names_to_json?lastname=Name.
Agora vamos começar a desenvolver o
projeto com GWT que usa o web service.
Podemos digitar projectCreator na linha de
comando para criar a base do projeto para
um aplicativo. A opção -out especifica o
diretório de destino; -eclipse informa que
criaremos o projeto para o IDE Eclipse:
projectCreator -eclipse Myaddress_GWT -out
➥myaddress_gwt
A ferramenta de linha de comando
applicationCreator gera as classes, scripts e
arquivos de configuração necessários:
applicationCreator -eclipse MyAddress_GWT ➥out myaddress_gwt de.wartala.client.
➥MyAddress
Quando você tiver certeza
de que possui todos os arquivos
necessários, poderá importar o
projeto em GWT no Eclipse,
selecionando Import | Existing
Projects into Workspace no Package Explorer (figura 3). Dentro
da estrutura do projeto, utilizaremos a configuração em XML
de um módulo como ponto de
partida. O applicationCreator já
criou uma configuração de módulo com um ponto de partida,
baseada no pacote de destino
necessário (exemplo 3). Ele faz
referência à classe Java que o
aplicativo chamará ao ser iniciado
em modo hospedado, e também
Ao ser iniciado, o aplicativo primeiro chama o método onModuleLoad(), que
cria os widgets fornecidos pela biblioteca
gráfica, antes de instanciar outras classes:
MyAddressRequester, em nosso exemplo.
O aplicativo então envia requisições ao
serviço MyAddress, recebe as respostas
e preenche os elementos da interface
gráfica com elas.
O método initializeMainForm() cria a
interface, que consiste de um botão de
busca, uma caixa de entrada e um FlexTable.initializeMainForm(), e então especifica
os atributos e eventos, exatamente como
um AWT ou a interface Swing.
Nosso exemplo necessita somente que
um único ClickEvent acione um clique
em Search. A resposta a esse evento é
implementada pela classe interna, SearchButtonClickListener.
Um evento onClick() aciona a parte
AJAX do aplicativo, e envia uma requisição
HTTP assíncrona para o serviço, a qual
passa o resultado para um manipulador
de resposta adequado. O JSONResponseTextHandler, outra classe interna, implementa
o método onCompletion(), que é chamado
quando a requisição HTTP assíncrona
retorna um resultado.
Quando o serviço retorna um objeto
JSON, primeiro precisamos decodificar o
Figura 3: O Google Web Toolkit pode criar arquivos
de projeto para o Eclipse, oferecendo aos
programadores a possibilidade de importálos para o IDE como um projeto.
http://www.linuxmagazine.com.br
GWT | PROGRAMAÇÃO
objeto e quebrá-lo em pedaços para des- tro -eclipse ao chamar o projectCreator
vendar seus componentes. O JSONParser. cria um arquivo com um sufixo .launch
parse(responseText) lida com a tarefa de
além dos dados específicos do projeto.
decodificar o objeto, enquanto o méto- Graças aos parâmetros configurados
do displayJSONObject() é responsável pela aqui, o aplicativo pode ser executado
última etapa, delegando o fardo para o no Eclipse e depurado com uma pemétodo updateAddressTable(). O método quena ajuda de breakpoints e outras
updateAddressTable() renderiza os resulta- técnicas (figura 5).
dos sob a forma de uma tabela, entrando
Além de suportar a depuração através
os valores da resposta JSON nas linhas e do Eclipse, o framework GWT também
colunas correspondentes.
é capaz de realizar seus próprios testes de
Em relação ao script de linha de unidade sobre suas classes. A classe GWTcomando MyAddress-shell.sh, a figura 4 TestCase é o ponto de entrada que implemostra o front-end em modo hospeda- menta a integração a JUnit. A ferramenta
do. Após digitarmos um sobrenome, os de linha de comando junitCreator gera
dados retornados pelo serviço aparecem todos os arquivos necessários, incluindo
na tabela.
a própria classe de teste:
Figura 5: O modo de depuração do Eclipse acelera a eliminação de falhas.
GWT e mais
Obviamente, o Google Web Toolkit
tem um potencial maior do que um
simples exemplo consegue demonstrar.
Ele possui ao todo 20 widgets; a dojunitCreator.cmd -junit eclipse/plugins/
cumentação oferece uma visão geral
➥org.junit_3.8.1/junit.jar -eclipse
da Galeria de Widgets [5]. Além dos
➥myaddress_gwt2 -out myaddress_gwt2
A vantagem do modo hospedado se ➥de.wartala.myaddress.test.MyAddressTest
equivalentes HTML de checkboxes e
torna aparente caso ocorra um erro
botões de rádio, os Layout Managers
no programa; é mais fácil encontrar
(Panels) são especialmente úteis. O
uma falha no código Java do que no
Os arquivos criados aqui são utiliza- VerticalPanel pode ser de grande ajuJavascript compilado. Passar o parâme- dos para fins de teste, tanto no modo da para alinhar botões verticalmente,
hospedado quanto no por exemplo.
O GWT também oferece aos desenmodo web, no Eclipse
e também na linha de volvedores a possibilidade de desenhar
comando. Se o aplicativo seus próprios widgets; nos endereços [6]
for executado sem qual- e [7] há diversos exemplos e tutoriais. O
quer erro, podemos rodar framework já atraiu uma forte comunio script Project-compile. dade, que utiliza os Google Groups [8]
para discutir sobre o assunto. ■
sh para criar uma versão
em Javascript do aplicativo escrito originalmente
em Java.
Mais Informações
O script realiza a tarefa
de copiar e gerar todos os
[1] Google Web Toolkit:
arquivos necessários no
http://code.google.com/webtoolkit
subdiretório www do diretó[2] AJAX:
Figura 4: Aplicativos AJAX podem ser depurados usando-se um
rio atual, ao ser invocado
http://en.wikipedia.org/wiki/
navegador web especial no modo hospedado.
junitCreator.cmd.
Caça aos bugs
Ajax_%28programming%29
Exemplo 3: Classe cliente de ponto de partida
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
/**
* As classes de ponto de entrada definem <code>onModuleLoad()</code>.
*/
public class MyAddress implements EntryPoint {
/**
* Esse é o método de ponto de partida.
*/
public void onModuleLoad() {
TabPanel tp = new TabPanel();
MyAddressRequester myJson = new MyAddressRequester();
tp.add(myJson.initializeMainForm() ,”Lastname”);
tp.selectTab(0);
RootPanel.get().add(tp);
}
}
Linux Magazine #27 | Fevereiro de 2007
[3] Exemplos de cliente e servidor deste
artigo:
http://www.linuxmagazine.com.br/
issue/27/gwt
[4] JSON: http://www.json.org
[5] Galeria de widgets GWT:
http://code.google.com/
webtoolkit/documentation/com.
google.gwt.doc.DeveloperGuide.
UserInterface.WidgetGallery.html
[6] Biblioteca de widgets GWT:
http://gwt-widget.sourceforge.net
[7] gwtPowered.org:
http://gwtpowered.org
[8] Grupo GWT no Google Groups:
http://groups.google.com/
group/Google-Web-Toolkit
77