Sabemos que deixar uma interface rica e que funcione nos principais navegadores é muito difícil devido à falta de padrões existentes entre os navegadores. O GWT foi criado para facilitar essa tarefa para os desenvolvedores, pois podem passar até 90% do tempo diário 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 criação de modernas, ricas e dinâmicas interfaces.

A criação do código para geração da interface é escrita usando Java e não JavaScript, o que torna o desenvolvimento muito mais fácil, pois graças as IDEs (ferramentas que auxiliam o desenvolvimento, muita delas gratuitas e conhecidas), os erros podem ser descobertos em tempo de compilação, Java é fortemente tipada e é muito mais fácil encontrar desenvolvedores Java no mercado do que JavaScript.

No momento em que a classe Java é compilada, o GWT faz o papel de compilador JavaScript, fazendo com que o código Java seja convertido em JavaScript. O Hosted Mode é utilizado como debbuger do código facilitando a identificação dos erros devido ao seu console de administração.

Uma funcionalidade muito interessante é que com o GWT minimizamos ao máximo o tamanho do arquivo JavaScript, ao invés de fazer vários “IFs” no código para saber qual o navegador, qual o idioma, etc., ele gera um arquivo JavaScript para cada tipo de combinação de navegador e se por acaso sua aplicação for internacionalizada, o GWT gerará um arquivo JavaScript para cada tipo de idioma. O responsável por saber qual arquivo será utilizado na hora de exibição para o usuário é o servidor, tudo isso ocorre transparentemente para os usuários.

Começando

Para iniciarmos uma aplicação usando o GWT, precisamos fazer o download de suas bibliotecas que podem ser baixadas nesse link, http://code.google.com/intl/pt-BR/webtoolkit/. Além disso, precisaremos de uma IDE, usaremos o Eclipse IDE versão 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 não vamos detalhar o processo de instalação, pois no site do Google este passo está muito bem detalhado, veja este link, http://code.google.com/intl/pt-BR/eclipse/docs/install-eclipse-3.4.html

Para criar um novo projeto usando o Eclipse e o plugin, devemos clicar em File > New > Web Application Project. Preencha o campo Project name com o nome do projeto, no exemplo usaremos PucProjeto, o campo Package pode ser preenchido com o pacote que deseja que fique a raiz do projeto, no exemplo usaremos br.pucsp.pos.web. No campo Location definimos o workspace da aplicação, no campo Google SDKs definimos qual GWT devemos usar e qual a Engine devemos usar. Após isso clique em Finish.

Após clicar em Finish, uma aplicação de exemplo será criada. Para testá-la, clique com o botão do lado direito sobre o projeto e depois Run As > Web Application, um console do Google será aberto e você verá a aplicação de teste em funcionamento.

Todo o código que é renderizado e mostrado para o usuário está na classe br.pucsp.pos.web.client.PucProjeto, que usa uma implementação da classe com.google.gwt.core.client.EntryPoint. O código que será compilado deve ficar dentro do método onModuleLoad(), caso queira editar este projeto que o plugin criou, pode excluir todas as classes exceto a br.pucsp.pos.web.client.PucProjeto, fazendo isso não teremos nenhum problema, pois somente com ela o GWT consegue compilar.

Na criação do projeto usando o plugin, uma pasta chamada war foi criada. Dentro dessa pasta existem dois arquivos, um com as configurações do CSS (Cascading Style Sheet), que são as folhas de estilo. Podemos criar as nossas classes e nossos IDs e depois usá-los no código Java do GWT citando o id com o seguinte comando:

closeButton.getElement().setId("closeButton");

ou citando a classe com o seguinte comando:

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

No outro arquivo encontramos o layout da página HTML, todos os elementos que forem absolutos devem ser inseridos nessa página. Podemos definir áreas nesse código HTML que serão inseridas via classe Java que estamos criando com o uso do framework GWT. No exemplo criado pelo plugin, o GWT criou uma página 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 o DialogBox que são referenciadas no código Java através da seguinte linha de código:

    RootPanel.get("nameFieldContainer").add(psugBox);
    RootPanel.get("aboutButtonContainer").add(aboutButton);

Abaixo está o código completo da classe br.pucsp.pos.web.client.PucProjeto

package br.pucsp.pos.web.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.SuggestBox;
import 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("<br><b>Paulo Fernandes [ paulofernandesjr@gmail.com ]</b>"));
        dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);
        dialogVPanel.add(closeButton);
        about.setWidget(dialogVPanel);

        /**
         * Essa é uma forma de fazer
         */
        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);

    }
}

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 aperfeiçoar mais com este excelente framework. Neste outro link tem uma aplicação 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 aplicações 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 aplicação de e-mail que está no link acima.

Fontes

http://code.google.com/intl/pt-BR/webtoolkit/

http://www.gwt.com.br/

http://www.comp.ufscar.br/~bruno_abrahao/Trabalhos/Tutorial%20GWT.pdf