GWT fu, Parte 1: Criando locais com o Google Web Toolkit

Transcrição

1 Page 1 of 12 GWT fu, Parte 1: Criando locais com o Google Web Toolkit Implemente aplicativos Web do tipo desktop com código Java Nível: Intermediário David Geary, President, Clarity Training, Inc. 01/Set/2009 O Google Web Toolkit (GWT) permite usar a linguagem Java para implementar interfaces com o usuário rich client que são executadas em um navegador. Neste artigo de duas partes, David Geary nos atualiza sobre a mais recente versão do GWT e mostra como implementar um aplicativo da Web de tipo desktop. Na década de 1990 eu usava bastante o Swing. Eu gostava do Swing porque ele permitia implementar qualquer coisa que eu pudesse imaginar. Para mim, essa é a sensação de desenvolver software: ser capaz de imaginar algo e, então, fazê-lo funcionar na tela. Com a API Swing, qualquer coisa, desde arrastar e soltar até jogos arcade, estava ao nosso alcance com facilidade. Então surgiu o Java do lado do servidor e estruturas primitivas como o Struts, que permitiram o que?! voltar aos anos sessenta e implementar formas do tipo mainframe. Nada de arrastar e soltar, nenhum jogo arcade, e acabou-se a diversão. Fomos jogados de volta à idade da pedra da programação. É por isso que eu adoro o Google Web Toolkit. Usando uma API tipo Swing, é possível implementar novamente em um navegador qualquer coisa que você possa imaginar. Claro, o estado das estruturas de aplicativo da Web mudou consideravelmente desde o Struts 1.0, e agora é possível implementar muito mais do que formas do tipo mainframe com estruturas como JSF 2, Ruby on Rails, e Lift. Mas o GWT não tem rival porque dá acesso a todas as potencialidades do JavaScript por meio de uma linguagem e API de fácil compreensão. Se deseja implementar um aplicativo do tipo desktop que possa ser executado no navegador, então o GWT é um grande candidato para sua empresa, pelo menos no lado do cliente. Nesta série curta, vou acompanhá-lo ao longo da curva de aprendizado do GWT implementando um aplicativo do tipo desktop. Neste artigo, vamos discutir: Widgets Remote procedure calls (RPCs) e integração de banco de dados Widgets compostos Manipuladores de eventos Testes do Ajax Na parte 2, vamos observar melhor a implementação de widgets personalizados e algumas técnicas avançadas, como o uso de visualização de eventos e imagens animadas com cronômetros. É possível fazer o download do código de origem do aplicativo de amostra completo. Locais: Um mashup de serviços da Web Ajaxificado e suportado por banco de dados O aplicativo de locais que vamos construir com o GWT permite visualizar locais. Eu defino um local como uma combinação de mapa e informações meteorológicas sobre um determinado local, como é possível ver na Figura 1: Figura 1. O aplicativo de locais: Visualizando um único local Este artigo em duas partes examina alguns fundamentos do GWT, fornece atualizações sobre as mudanças relevantes na atual API GWT, e dá uma visão geral dos aspectos avançados do desenvolvimento do GWT. Para uma introdução abrangente do release inicial do GWT, leia "Ajax for Java developers: Exploring the Google Web Toolkit."

2 Page 2 of 12 O aplicativo de locais vem com seis endereços incorporados que o aplicativo retira de um banco de dados MySQL na inicialização. O aplicativo, então, exibe os endereços em uma caixa de listagem. Quando se clica em um item na caixa de listagem, o aplicativo atualiza a grade à direita da caixa de listagem com o endereço selecionado. Quando você clica no botão Exibir da grade, o aplicativo abre uma janela. A janela contém um mapa à esquerda e as informações meteorológicas, à direita, separados por um painel dividido horizontalmente. O aplicativo obtém o mapa e as informações meteorológicas a partir do Yahoo! Web Services. É possível exibir múltiplas janelas ao mesmo tempo e ajustar as dimensões do painel dividido, como é mostrado na Figura 2: Figura 2. O aplicativo de locais: Visualizando múltiplos locais Compare o GWT e o JavaServer Faces (JSF) O aplicativo de locais desse artigo é semelhante ao aplicativo do mesmo nome que discuti na série de três partes JSF 2 fu. É possível ler ambas as séries para se ter uma ideia de como as duas estruturas diferem.

3 Page 3 of 12 Há uma coisa você é possível ver nas capturas de tela estáticas da Figura 1 e da Figura 2: Os mapas residem nas portas de visualização; assim, é possível arrastar o mapa ao longo do painel dividido. Se você arrastar o mapa rapidamente durante menos de um segundo a porta de visualização anima a visualização movendo-a continuamente no sentido em que o mouse foi arrastado. Quando a imagem chega à extremidade da porta de visualização, ela rebate na extremidade e continua em animação até você clicar na porta de visualização com o mouse. Faça o download do aplicativo se você quiser experimentar isto. Eu discutirei a porta de visualização, que ilustra algumas técnicas avançadas do GWT como o uso de cronômetros para animações e o uso de pré-visualização de eventos, na parte 2. Widgets Durante o resto do artigo, vamos implementar o aplicativo de locais desde o início até o fim. Primeiro vou buscar os endereços em um banco de dados e exibi-los em uma caixa de listagem, como mostrado na Figura 3: Figura 3. Widgets e acesso ao banco de dados

4 Page 4 of 12 A Listagem 1 mostra o código do aplicativo exibido na Figura 3: Listagem 1. Places.java, tomada 1 import java.util.arraylist; import java.util.iterator; import java.util.list; 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.ui.horizontalsplitpanel; import com.google.gwt.user.client.ui.label; import com.google.gwt.user.client.ui.listbox; import com.google.gwt.user.client.ui.rootpanel; public class Places implements EntryPoint { final ListBox addresses = new ListBox(); final ArrayList<Address> addresslist = new ArrayList<Address>(); final HorizontalSplitPanel hsp = new HorizontalSplitPanel(); public void onmoduleload() { hsp.add(addresses); hsp.add(new Label("Address grid goes here")); hsp.setsplitposition("175px"); getaddresses(); RootPanel.get().add(hsp); public void getaddresses() { // Instantiate the address service AddressServiceAsync as = (AddressServiceAsync) GWT.create(AddressService.class); // Use the address service to fetch addresses and populate the listbox Todos os aplicativos GWT são módulos do GWT, e todos os módulos do GWT implementam a interface EntryPoint, que por sua vez define um método: public void onmoduleload(). Aquele método é análogo ao método main() em um aplicativo de desktop. Para o aplicativo de locais, o método onmoduleload() acrescenta a caixa da lista de endereços e um rótulo ao painel dividido horizontalmente. Então ele retira os endereços do banco de dados e acrescenta o painel dividido ao painel raiz do aplicativo. (O painel raiz representa o corpo da página HTML do aplicativo.) É fácil criar e configurar widgets com o GWT. Obter e exibir valores de um banco de dados é um pouco mais complicado. Integração de RPCs e banco de dados Para obter endereços do banco de dados, eu uso um RPC GWT. Primeiro, eu instancio um instância de AddressServiceAsync com o método GWT.create(), e então eu uso aquela instância para invocar o RPC e capturar o resultado da chamada, como mostrado na Listagem 2: Listagem 2. Places.java, tomada 2

5 Page 5 of 12 public class Places implements EntryPoint { final ListBox addresses = new ListBox(); final final ArrayList<Address> addresslist = new ArrayList<Address>(); final HorizontalSplitPanel hsp = new HorizontalSplitPanel(); public void onmoduleload() { hsp.add(addresses); hsp.add(new Label("Address grid goes here")); hsp.setsplitposition("175px"); getaddresses(); RootPanel.get().add(hsp); public void getaddresses() { // Instantiate the address service AddressServiceAsync as = (AddressServiceAsync) GWT.create(AddressService AddressService.class); as.getaddresses(new AsyncCallback<List<Address>>() { public void onfailure(throwable caught) { GWT.log("Can't access database", caught); public void onsuccess(list<address> result) { Iterator<Address> it = result.iterator(); while (it.hasnext()) { Address address = it.next(); addresses.additem(address.getaddress()); addresslist.add(address); addresses.setvisibleitemcount(result.size()); ); RPCs GWT são definidos por duas interfaces: uma interface assíncrona que você invoca no cliente, e uma interface remota que o GWT invoca no servidor. Para o serviço de endereço, essas interfaces são AddressServiceAsync e AddressService, respectivamente. Eu chamo GWT.create na Listagem 2, passando para ele a classe da interface remota, e o GWT retorna uma instância da interface assíncrona. A Listagem 3 exibe a interface AddressService: Listagem 3. AddressService.java import java.util.list; import com.google.gwt.user.client.rpc.remoteservice; import public interface AddressService extends RemoteService { public List<Address> getaddresses(); A Listagem 4 exibe a interface AddressServiceAsync: Listagem 4. AddressServiceAsync.java import java.util.list; import com.google.gwt.user.client.rpc.asynccallback; public interface AddressServiceAsync { public void getaddresses(asynccallback<list<address>> callback); Quando eu chamo o método getaddresses() no cliente através da interface assíncrona, o GWT chama o método correspondente pela interface remota no servidor. O GWT espera até o método no servidor ser completado, e então chama de volta no callback da implementação assíncrona, como mostrado na Listagem 2. Finalmente eu declaro o servlet remoto no descritor de implementação do aplicativo web, mostrado na Listagem 5: Listagem 5. WEB-INF/web.xml

6 Page 6 of 12 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" " <web-app> <!-- Servlets --> <servlet> <servlet-name>address address</servlet-name> <servlet-class>com.clarity.server.addressserviceimpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>address address</servlet-name> <url-pattern>/places/address /places/address</url-pattern> </servlet-mapping> </web-app> Note que o nome do servlet address corresponde ao valor que eu especifiquei para a na Listagem 3. Aquela correspondência junta a interface RPC remota definida na Listagem 3 com o servlet implementado na Listagem 6. Código do banco de dados do lado do servidor As interfaces AddressServiceAsync e AddressService residem no cliente. No servidor, eu implementei um código não remarcável usando POJOs e Hibernate para acessar os endereços armazenados em um banco de dados. O POJO é mostrado na Listagem 6: Listagem 6. Address.java import java.io.serializable; public class Address implements Serializable { private static final long serialversionuid = 1L; private Long id; private String description, address, city, state, zip; public Address() { // you must implement a no-arg constructor public Address(Long id, String address, String city) { this.address = address; this.city = city; this.id = id; public String tostring() { return address + " " + city + ", " + state + zip; // Setters and getters for String properties are omitted in the interest of brevity A listagem 7 mostra o código Hibernate correspondente: Listagem 7. AddressServiceImpl.java package com.clarity.server; import java.util.list; import org.hibernate.hibernateexception; import org.hibernate.session; import com.clarity.client.addressservice; import com.clarity.client.address; import public class AddressServiceImpl extends RemoteServiceServlet implements AddressService { private static final long serialversionuid = 1L; public List<Address> getaddresses() { List<Address> addresses = null;

7 Page 7 of 12 try { Session session = HibernateUtil.getSessionFactory().getCurrentSession(); session.begintransaction(); addresses = (List<Address>)session.createQuery("from Address Address ").list(); session.gettransaction().commit(); catch (HibernateException e) { e.printstacktrace(); return addresses; A classe AddressServiceImpl, mostrada na Listagem 7, implementa a interface remota do serviço de endereços AddressService e estende o RemoteServiceServlet do GWT. O método getaddresses() retorna todos os endereços do banco de dados. A natureza assíncrona dos RPCs Para preencher a grade de endereços inicialmente com o primeiro endereço do banco de dados, você poderia pensar que seria possível fazer isto: public class Places implements EntryPoint { final ListBox addresses = new ListBox(); final private AddressGrid addressgrid = new AddressGrid(addresses, addresslist); public void onmoduleload() { getaddresses(); // this won't work addressgrid.setaddress(addresslist.get(0)); RootPanel.get().add(hsp); Mas isso não funciona, porque a chamada de getaddresses() é assíncrona. Ao invés, é necessário preencher a grade de endereços depois que o RPC retornar, desta maneira: public class Places implements EntryPoint { public void onmoduleload() { getaddresses(); RootPanel.get().add(hsp); public void getaddresses() { AddressServiceAsync as = (AddressServiceAsync) GWT.create(AddressService.class); ); as.getaddresses(new AsyncCallback<List<Address>>() { public void onsuccess(list<address> result) { addressgrid.setaddress(addresslist.get(0)); Widgets compostos Até agora eu criei alguns widgets e preenchi uma caixa de listagem com os endereços de um banco de dados. Agora vamos acrescentar a grade de endereços no lado direito do painel dividido do aplicativo, como mostrado na Figura 4: Figura 4. Acrescentando a grade de endereços

8 Page 8 of 12 A grade de endereços, mostrada à direita na Figura 4, é um widget composto. A listagem 8 mostra a implementação da classe AddressGrid: Listagem 8. AddressGrid.java import com.google.gwt.event.dom.client.clickhandler; import com.google.gwt.user.client.ui.button; import com.google.gwt.user.client.ui.composite; import com.google.gwt.user.client.ui.grid; import com.google.gwt.user.client.ui.label; import com.google.gwt.user.client.ui.listbox; import com.google.gwt.user.client.ui.textbox; public class AddressGrid extends Composite { private Grid grid = new Grid(6,2); private Label streetaddresslabel = new Label("Address"); private TextBox streetaddresstextbox = new TextBox(); private Label citylabel = new Label("City"); private TextBox citytextbox = new TextBox(); private TextBox statetextbox = new TextBox(); private Label ziplabel = new Label("Zip"); private TextBox ziptextbox = new TextBox(); private Label statelabel = new Label("State"); private Button button = new Button(); private Address address; public AddressGrid(final ListBox addresses, String buttontext, ClickHandler buttonclickhandler) { initwidget(grid); button.settext(buttontext); grid.addstylename("addressgrid"); statetextbox.setvisiblelength(3); ziptextbox.setvisiblelength(5); citytextbox.setvisiblelength(15); grid.setwidget(0, 0, streetaddresslabel); grid.setwidget(0, 1, streetaddresstextbox); grid.setwidget(1, 0, citylabel); grid.setwidget(1, 1, citytextbox); grid.setwidget(2, 0, statelabel); grid.setwidget(2, 1, statetextbox); grid.setwidget(3, 0, ziplabel); grid.setwidget(3, 1, ziptextbox); grid.setwidget(5, 0, button); button.addclickhandler(buttonclickhandler); void setaddress(address address) { this.address = address; streetaddresstextbox.settext(address.getaddress()); citytextbox.settext(address.getcity()); statetextbox.settext(address.getstate()); ziptextbox.settext(address.getzip()); public Address getaddress() { return address;

9 Page 9 of 12 public Button getbutton() { return button; Widgets compostos, como o nome sugere, são widgets compostos por outros widgets. A grade de endereços é composta de uma Grid, que é preenchida com rótulos, caixas de texto e um botão. Ao construir uma grade de endereços, você fornece o texto exibido no botão e um manipulador de cliques para o botão. A grade de endereços é uma representação reutilizável de um endereço, à qual é possível anexar uma funcionalidade. Neste caso a funcionalidade é implementada no aplicativo de locais com um manipulador de eventos. Manipulação de eventos O aplicativo de locais tem dois manipuladores de eventos: um que preenche a grade de endereços ao selecionar um endereço na caixa da lista de endereços, e outro que cria uma janela quando se clica no botão Exibir da grade de endereços. Ambos estes manipuladores de eventos são mostrados na Listagem 9, que é uma versão atualizada da Listagem 1: Listagem 9. Places.java, tomada 3 import java.util.arraylist; import java.util.iterator; import java.util.list; import com.google.gwt.core.client.entrypoint; import com.google.gwt.core.client.gwt; import com.google.gwt.event.dom.client.changeevent; import com.google.gwt.event.dom.client.changehandler; import com.google.gwt.event.dom.client.clickevent; import com.google.gwt.event.dom.client.clickhandler; import com.google.gwt.user.client.window; import com.google.gwt.user.client.rpc.asynccallback; import com.google.gwt.user.client.ui.horizontalsplitpanel; import com.google.gwt.user.client.ui.listbox; import com.google.gwt.user.client.ui.rootpanel; public class Places implements EntryPoint { final ListBox addresses = new ListBox(); final HorizontalSplitPanel hsp = new HorizontalSplitPanel(); final ArrayList<Address> addresslist = new ArrayList<Address>(); final AddressGrid addressgrid = new AddressGrid("Show", new ShowPlaceHandler()); public void onmoduleload() { hsp.add(addresses); hsp.add(addressgrid); hsp.setsplitposition("175px"); getaddresses(); addresses.addchangehandler(new ChangeHandler() { public void onchange(changeevent e) { addressgrid.setaddress(addresslist.get(addresses.getselectedindex())); ); RootPanel.get().add(hsp); public void getaddresses() { AddressServiceAsync as = (AddressServiceAsync) GWT.create(AddressService.class); as.getaddresses(new AsyncCallback<List<Address>>() { public void onfailure(throwable caught) { GWT.log("Can't access database", caught); public void onsuccess(list<address> result) { Iterator<Address> it = result.iterator(); while (it.hasnext()) { Address address = it.next(); addresses.additem(address.getaddress()); addresslist.add(address); addresses.setvisibleitemcount(result.size()); addressgrid.setaddress(addresslist.get(0)); );

10 Page 10 of 12 private class ShowPlaceHandler implements ClickHandler { private String[] urls; public void onclick(clickevent event) { final WeatherServiceAsync ws = (WeatherServiceAsync) GWT.create(WeatherService.class); final MapServiceAsync ms = (MapServiceAsync) GWT.create(MapService.class); final Address address = addressgrid.getaddress(); addressgrid.getbutton().setenabled(false); ms.getmap(address.getaddress(), address.getcity(), address.getstate(), new AsyncCallback<String[]>() { public void onfailure(throwable arg0) { Window.alert(arg0.getMessage()); public void onsuccess(final String[] urls) { addresses.setenabled(true); ws.getweatherforzip(address.getzip(), true, new AsyncCallback<String>() { public void onfailure(throwable arg0) { Window.alert(arg0.getMessage()); done(); public void onsuccess(string weatherhtml) { PlaceDialog dialog = new PlaceDialog(addressGrid.getAddress(), urls, weatherhtml); dialog.setpopupposition(200, 200); dialog.show(); done(); ); ); private void done() { addressgrid.getbutton().setenabled(true); O aplicativo de locais modificado na Listagem 9 acrescenta um manipulador de mudanças à caixa da lista de endereços. Aquele manipulador de mudanças atualiza a grade de endereços para refletir o endereço que o usuário selecionar na caixa de listagem. O aplicativo também instancia uma instância de AddressGrid com texto e um manipulador de cliques para o botão da grade. Aquele manipulador de cliques é implementado na classe ShowPlaceHandler, que aninha RPCs ao mapa e aos serviços meteorológicos da Web. Quando ambos os RPCs são completados, o manipulador de eventos cria uma caixa de diálogo que contém um mapa e a previsão do tempo para o endereço selecionado. Aquela caixa de diálogo é uma instância de PlaceDialog, que discutiremos na Parte 2. Note que a Listagem 9 usa manipuladores, e não listeners. O GWT implementou originalmente o padrão de listener familiar do Swing para manipulação de eventos: Foi implementada uma interface de listener, às vezes por meio de uma classe de adaptador que implementou métodos vazios, de forma que não é necessário implementar todos os métodos da interface. A partir do GWT 1.6, os listeners são substituídos por manipuladores. Manipuladores são bastante semelhantes a listeners, porém os manipuladores definem um só método, e os manipuladores sempre recebem um único objeto de evento. Os manipuladores, que escutam um único tipo de evento, são mais refinados que os listeners. Além disso, os listeners recebem o widget que desencadeou o evento, enquanto os manipuladores recebem mais informações através de um objeto de evento que contém informações específicas do evento, incluindo o widget que desencadeou o evento. Neste ponto, o aplicativo de locais já tem uma boa quantidade de funcionalidades. Devemos fazer alguns testes para testar aquelas funcionalidades, então a seguir vou mostrar como testar suas chamadas Ajax com o GWT. Testes do Ajax O GWT permite a integração com o JUnit, o que facilita os testes de seu aplicativo. O modo mais fácil de começar é rodar o script junitcreator do GWT, que cria testes do esqueleto de seu aplicativo. É assim que eu o rodo para criar testes de esqueleto do aplicativo de Locais: junitcreator -junit /Developer/Java/Tools/junit-4.5/junit-4.5.jar -module com.clarity.places -eclipse Places com.clarity.client.placestest

11 Page 11 of 12 O script junitcreator cria um diretório de testes e testes de esqueleto, como mostrado na Figura 5: Figura 5. Estrutura do diretório de testes Note que eu deliberadamente criei a classe de testes no mesmo pacote, embora não no mesmo diretório da implementação da interface com o usuário do aplicativo. Isso facilita o acesso, pela classe de testes, às variáveis pertencentes às classes UI, e também mantém o código de testes separado do código de UI. Colocar a classe de testes em um diretório diferente, mas no mesmo pacote do UI, é comum da linguagem do GWT. Agora que o GWT criou uma classe de testes de esqueleto, vamos fornecer a implementação. Criamos uma instância do aplicativo, manipulamos os widgets com programas, e verificamos os resultados. A listagem 10 mostra como testar a capacidade do aplicativo de locais de obter endereços do banco de dados: Listagem 10. Testando RPCs import com.google.gwt.junit.client.gwttestcase; import com.google.gwt.user.client.timer; import com.google.gwt.user.client.ui.listbox; public class PlacesTest extends GWTTestCase { public String getmodulename() { return "com.clarity.places"; public void testgetaddresses() { Places demo = new Places(); demo.getaddresses(); final ListBox addresses = demo.addresses; new Timer() { public void run() { assert (addresses.getitemcount() == 6); assert (demo.addresslist.size() == 6); finishtest();.schedule(10000); delaytestfinish(20000); A Listagem 10 implementa uma linguagem comum do GWT que usa um cronômetro, junto com chamadas de finishtest() e delayfinishtest(), para testar chamadas assíncronas ao servidor. O método testgetaddresses(): 1. Cria uma instância do aplicativo de locais. 2. Chama o método getaddresses() do aplicativo. 3. Afirma que o aplicativo subseqüentemente preencheu a caixa da lista de endereços com seis endereços. 4. Afirma que o aplicativo subseqüentemente preencheu a lista de endereços do aplicativo com seis endereços. Como a chamada de getaddresses() é assíncrona, é preciso esperar até ela terminar para poder conferir o número de itens na caixa da lista de endereços, assim fazemos essa verificação em um cronômetro que roda 10 segundos depois que o cronômetro é criado. Estes 10 segundos dão ao aplicativo tempo suficiente para completar o RPC. A chamada de delaytestfinish() diz ao GWT para esperar 20 segundos até a chamada de finishtest(). Se finishtest() não for chamado em 20 segundos, o tempo limite do teste se esgota com um erro. Na próxima vez O GWT é mais indicado para criar aplicativos do tipo desktop que são repletos de amenidades, como arraste e solte, janelas e caixas de diálogo, e widgets interativos como portas de visualização. Embora seja um aplicativo simples, o aplicativo de locais

12 Page 12 of 12 ilustra o potencial do GWT para se construir um aplicativo destes. Até agora eu mostrei alguns fundamentos do GWT, incluindo RPCs e acesso aos bancos de dados, implementação de widgets compostos, manipulação de eventos e testes do Ajax. Na parte 2 vamos aprender algumas características avançadas do GWT, incluindo eventos de sinking, implementação de módulos do GWT, e o uso da pré-visualização de eventos.