Iniciando com o GWT

Publicado porpaulofernandesjrem 17/08/2009 - 56.022 visualizaes

Introduo

comentrios: 0

Sabemos que deixar uma interface rica e que funcione nos principais navegadores muito difcil devido falta de padres existentes entre os navegadores. O GWT foi criado para facilitar essa tarefa para os desenvolvedores, pois podem passar at 90% do tempo dirio para contornar as peculiaridades de cada navegador. O GWT (Google Web Toolkit) um framework para desenvolvimento web que tem como objetivo facilitar a vida dos desenvolvedores, pois possui um conjunto de ferramentas, API e componentes visuais que facilitam a criao de modernas, ricas e dinmicas interfaces. A criao do cdigo para gerao da interface escrita usando Java e no JavaScript, o que torna o desenvolvimento muito mais fcil, pois graas as IDEs (ferramentas que auxiliam o desenvolvimento, muita delas gratuitas e conhecidas), os erros podem ser descobertos em tempo de compilao, Java fortemente tipada e muito mais fcil encontrar desenvolvedores Java no mercado do que JavaScript. No momento que a classe Java compilada o GWT faz o papel de compilador JavaScript, fazendo com que o cdigo Java seja convertido em JavaScript. OHosted Mode utilizado comodebbugerdo cdigo facilitando a identificao dos erros devido ao seu console de administrao. Uma funcionalidade muito interessante que com o GWT minimizamos ao mximo o tamanho do arquivo JavaScript, ao invs de fazer vrios ?IFs? no cdigo para saber qual o navegador, qual o idioma, etc., ele gera um arquivo JavaScript para cada tipo de combinao de navegador e se por acaso sua aplicao for internacionalizada, o GWT gerar um arquivo JavaScript para cada tipo de idioma. O responsvel por saber qual arquivo ser utilizado na hora de exibio para o usurio o servidor, tudo isso ocorre transparentemente para os usurios.

Comeando
Para iniciarmos uma aplicao usando o GWT, precisamos fazer o download de suas bibliotecas que podem ser baixadas nesse link, http://code.google.com/intl/pt-BR/webtoolkit/. Alm disso, precisaremos de uma IDE, usaremos o Eclipse IDE verso Ganymede que pode ser baixado neste link, http://www.eclipse.org/downloads/. Para facilitar ainda mais o desenvolvimento, devemos fazer o download do plugin do GWT para o Eclipse Ganymede, que pode ser encontrado neste link, http://code.google.com/intl/pt-BR/eclipse/docs/download.html Neste passo no vamos detalhar o processo de instalao, pois no site Google este passo est muito bem detalhado, veja este link, http://code.google.com/intl/pt-BR/eclipse/docs/installeclipse-3.4.html Para criar um novo projeto usando o Eclipse e o plugin, devemos clicar em File>New>Web Application Project. Preencha o campoProjectname com o nome do projeto, no exemplo usaremosPucProjeto, o campoPackagepode ser preenchido com o pacote que deseja que fique o raiz do projeto, no exemplo usaremosbr.pucsp.pos.web. No campoLocationdefinimos

oworkspaceda aplicao, no campoGoogle SDKsdefinimos qual GWT devemos usar e qual aEnginedevemos usar. Aps isso clique emFinish.

Imagem mostrando a janela para criao de um novo projeto

Aps clicar emFinishuma aplicao de exemplo ser criada, para test-la, clique com o boto do lado direito sobre o projeto e depoisRun As>Web Application, um console doGoogleser aberto e voc ver a aplicao de teste em funcionamento. Todo o cdigo que renderizado e mostrado para o usurio est na classebr.pucsp.pos.web.client.PucProjeto, que usa uma implementao da classecom.google.gwt.core.client.EntryPoint. O cdigo que ser compilado deve ficar dentro do mtodoonModuleLoad(), caso queira editar este projeto que o plugin criou, pode excluir todas as classes exceto abr.pucsp.pos.web.client.PucProjeto, fazendo isso no teremos nenhum problema, pois somente com ela o GWT consegue compilar. Na criao do projeto usando o plugin uma pasta chamadawarfoi criada, dentro dessa pasta existem dois arquivos, um com as configuraes do CSS (Cascading Style Sheet), que so as folhas de estilo. Podemos criar as nossas classes e nossos IDs e depois us-los no cdigo Java do GWT citando o id com o seguinte comando:
1. closeButton.getElement().setId("closeButton");

ou citando a classe com o seguinte comando:

1. closeButton.getElement().setClassName("sendButton");

No outro arquivo encontramos o layout da pgina HTML, todos os elementos que forem absolutos devem ser inseridos nessa pgina. Podemos definir reas nesse cdigo HTML que sero inseridas via a classe Java que estamos criando com o uso do framework GWT. No exemplo criado pelo plugin, o GWT criou uma pgina com uma tabela com duas colunas e definiu as colunas como reas, para o nosso exemplo, altere o nome dessas reas para os seguintes nomes,nameFieldContainer,aboutButtonContainer. Para que algo seja inserido nessas reas, devemos criar um tipo de painel, no exemplo usamos o SimplePanel e oDialogBoxque so referenciadas no cdigo Java atravs da seguinte linha de cdigo:
1. RootPanel.get("nameFieldContainer").add(psugBox); 2. RootPanel.get("aboutButtonContainer").add(aboutButton);

Abaixo est o cdigo completo da classe

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. br.pucsp.pos.web.client.PucProjeto package br.pucsp.pos.web.client; import import import import import import import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.event.dom.client.ClickEvent; com.google.gwt.event.dom.client.ClickHandler; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.DialogBox; com.google.gwt.user.client.ui.HTML; com.google.gwt.user.client.ui.Label; com.google.gwt.user.client.ui.MultiWordSuggestOracle; com.google.gwt.user.client.ui.RootPanel; com.google.gwt.user.client.ui.SimplePanel; com.google.gwt.user.client.ui.SuggestBox; com.google.gwt.user.client.ui.VerticalPanel;

public class PucProjeto implements EntryPoint { public void onModuleLoad() { final Button aboutButton = new Button("Sobre"); final DialogBox about = new DialogBox(); about.setText("Sobre o Exemplo"); about.setAnimationEnabled(true); final Button closeButton = new Button("Fechar"); closeButton.getElement().setId("closeButton"); aboutButton.getElement().setClassName("sendButton"); VerticalPanel dialogVPanel = new VerticalPanel(); dialogVPanel.addStyleName("dialogVPanel"); dialogVPanel.add(new HTML("<b>Projeto Desenvolvido por:</b>")); dialogVPanel.add(new HTML(" <b>Paulo Fernandes [ paulofernandesjr@gmail.com ]</b>")); dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT); dialogVPanel.add(closeButton); about.setWidget(dialogVPanel); /** * Essa uma forma de fazer */

41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. }

class MyHandler implements ClickHandler { public void onClick(ClickEvent event) { aboutButton.setEnabled(false); about.setText("Sobre o Projeto"); about.center(); closeButton.setFocus(true); } } MyHandler handler = new MyHandler(); aboutButton.addClickHandler(handler); /** * Essa outra forma de fazer */ closeButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { about.hide(); aboutButton.setEnabled(true); aboutButton.setFocus(true); } }); MultiWordSuggestOracle palavras = new MultiWordSuggestOracle(); palavras.add("abacate"); palavras.add("abacaxi"); palavras.add("acordar"); palavras.add("aeromotor"); palavras.add("agudo"); palavras.add("alcool"); palavras.add("algarismo"); SuggestBox suggestBox = new SuggestBox(palavras); suggestBox.setAnimationEnabled(true); suggestBox.setVisible(true); /** * painel para a caixa de sugestoes */ VerticalPanel sugBox = new VerticalPanel(); sugBox.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); sugBox.add(new Label("Digite a letra A")); sugBox.add(suggestBox); SimplePanel psugBox = new SimplePanel(); psugBox.setWidget(sugBox); RootPanel.get("nameFieldContainer").add(psugBox); RootPanel.get("aboutButtonContainer").add(aboutButton); }

Imagem mostrando o resultado do cdigo do projeto

Concluindo
No seguinte link http://code.google.com/intl/pt-BR/webtoolkit/doc/1.6/DevGuide.html est o guia para os desenvolvedores que quiserem se aperfeioar mais com este excelente framework. Neste outro link tem uma aplicao de exemplo que o pessoal do Google fez para vermos mais um pouco do poder do GWT http://gwt.google.com/samples/Mail/Mail.html. Com este artigo descobrimos o quanto podemos melhorar nossas aplicaes usando o GWT, para quem j desenvolve para web, sabe que para fazer o que fizemos neste exemplo, daria um trabalho um tanto quanto complexo, imagine s essa aplicao de e-mail que est no link acima. Read more:http://javafree.uol.com.br/artigo/874221/Iniciando-com-oGWT.html#ixzz2HPAXZuaH