Olá a todos,
Em posts anteriores fizemos uma pequena apresentação do que é o App Engine e como preparar uma máquina para desenvolver nessa plataforma. Já demonstramos também como é possível desenvolver a camada de apresentação em páginas JSP e como publicar nossa aplicação nos servidores do App Engine. Nesse post continuaremos falando sobre como desenvolver a camada de apresentação nessa plataforma. Porém dessa vez o foco será utilizar o Google Web Toolkit (GWT).
O GWT é uma biblioteca que facilita a construção da camada de apresentação e da comunicação com o lado Server das nossas aplicações. Para quem conhece a plataforma Microsoft podemos dizer que o GWT é um meio termo entre o Silverlight e ASP .Net. Suas principais vantagens são a ausência da necessidade da instalação de um plug-in na máquina cliente, pois o código que é recebido pelo browser é HTML e JavaScript, e a facilidade de desenvolvimento (quando comparado com as páginas JSP). Os seus dois pontos fracos são: a falta de uma ferramenta de edição da interface com o usuário, pois tudo é feito no código (caso algum leitor conheça alguma ferramenta nos avise via comentário nesse post) e a comunicação com o lado Server da aplicação, que é realizada por um protocolo proprietário.
Nesse post demonstraremos como escrever a camada de apresentação de nossas aplicações nessa tecnologia além de apresentar um modelo para facilitar a troca das telas em nossos softwares. Deixaremos a construção da comunicação com o lado Server para outro post. Vamos passar para o nosso exemplo que será um tela de login seguido de uma tela com uma opção para o usuário que acessa outra tela. A partir do desenvolvimento dessa mecânica é esperado que fique fácil a construção da navegação com diversas telas.
O primeiro passo é criarmos o projeto no Eclipse, através do menu File, opção New e em seguida Web Application Project. Nos será aberta uma tela semelhante a imagem abaixo, onde devemos informar o nome do projeto e de seu pacote. Antes de clicar com o botão OK para criar o projeto verifique se as opções Use Google App Engine e Use Google Web Toolkit estão habilitadas. A opção Use Google App Engine fornece ao projeto as configurações necessárias para ser hospedado nos servidores do Google. Já a opção Use Google Web Toolkit configura automaticamente o projeto para utilizar o GWT.

- Criando um projeto que utilize o GWT
Confirmadas as configurações do projeto será criada uma estrutura semelhante à descrita em um post anterior. Porém será adicionada a referência ao GWT e serão criadas mais duas subpastas dentro da pasta src: uma pasta com o nome do pacote e com o sufixo Server e outra pasta com o sufixo client. Na pasta com o sufixo Server ficam os códigos que rodarão no lado Server e que será assunto de outro post. Na pasta com o sufixo client devemos colocar todos os códigos que são executados no lado cliente.
Podemos então executar o nosso projeto com o template inicial para confirmar que a instalação de todos os requisitos foi realizada com sucesso. Ao executar o projeto note que duas janelas são abertas. Uma delas é a janela com um mini browser onde é executada a aplicação e outra janela com o nome Google Web Toolkit Hosted Mode é uma aplicação que executa o código Java, transformando o resultado em HTML e JavaScript. Segundo a documentação do GWT em tempo de execução é identificado qual o browser que está em uso pelo cliente e o conteúdo enviado é adaptado para esse browser, evitando a necessidade de customizações ou verificações desse tipo no nosso código. Note que o conteúdo dessa última janela é um log do que ocorre na nossa aplicação, algo semelhante ao que podemos fazer com a Fabric local no Windows Azure. Podemos encerrar a sessão fechando essa janela.

Tela do host do GWT
Antes de iniciar as alterações no código vamos entender como funciona esse exemplo. A aplicação é iniciada quando a página HTML, situada na pasta war, é acessada. Nessa página temos um código HTML simples onde os pontos de interesse são o código JavaScript, responsável pela chamada ao código Java que será transformado, a chamada desse código javascript e dois itens da tabela que possuem id. Na pratica os únicos pontos que temos que nos preocupar é com esses dois itens da tabela que possuem id, pois como veremos mais adiante são esses itens que conterão o resultado da execução do código Java.

Codigo original da pagina HTML
Vamos agora examinar a classe inicial do nosso projeto que pode ser localizada na subpasta com o sufixo client. O arquivo que contém essa classe possui o mesmo nome do projeto. Note que a classe herda de outra classe chamada EntryPoint. A classe EntryPoint possui a implementação necessária para iniciar a execução do código Java pela engine do GWT. O primeiro método chamado que temos controle é o onModuleLoad. Nele temos a criação e customização de diversos tipos de objetos farão a composição da tela. Nesse método temos o código que monta a relação entre os IDs da página HTML e o código Java, que é realizado pelo objeto RootPanel da clase EntryPoint. Esse objeto tem a capacidade de adicionar ou remover os controles de IDs da página HTML.

Trecho do codigo inicial do template
Entendido o funcionamento básico do template inicial vamos começar as alterações para construir a nossa aplicação removendo todo o código do método onModuleLoad. Alteraremos também a página HTML, trocando o objeto table por um div, pois para essa demonstração será necessário apenas um item que receberá todo o conteúdo da execução do nosso código. Além disso, vamos desenvolver um método padrão para facilitar a troca de telas. Esse método é baseado no tutorial PageSwitch publicado no site do Silverlight.

Codigo da pagina HTML alterado para o exemplo
O primeiro passo é criar uma interface para facilitar a troca de parâmetros entre as telas, assim bastará que os objetos que representam as telas implementem essa interface para estarem prontos para receberem parâmetros de telas anteriores. Essa interface, assim como o restante do código utilizado nesse post devem ser criados na subpasta com o sufixo client. Nesse exemplo utilizei o nome ISwitchable (mesmo nome utilizado no tutorial de Silverlight). Essa interface estabelece apenas um método que será chamado durante a troca de telas com passagem de parâmetros, recebendo um objeto do tipo object para permitir a passagem de qualquer tipo de objeto entre as telas.

Codigo da interface para troca de parametros entre paineis
O próximo passo é criar a classe que realmente trocará as páginas. Essa classe deverá herdar da classe Widget do pacote do GWT. Nesse exemplo chamei essa classe de PageSwitcher (mesmo nome utilizado no tutorial de Silverlight). Essa classe possui duas versões do método Navigate, onde ambas farão a troca de páginas. A primeira versão troca as páginas sem passagem de parâmetros. Já na segunda versão do método ele realiza a troca de telas com a passagem de parâmetros. A troca de telas é realizada removendo o painel atual do id do HTML e inserindo um novo painel. Quando ocorre essa ação as telas são trocadas instantaneamente.

Codigo da classe que realiza a troca dos paineis
O último passo para a montagem do modelo para troca de telas é criar uma classe que realiza a chamada do método Navigate da classe PageSwitcher. Essa classe visa facilitar o uso dessa estrutura. No exemplo chamei essa classe de Switcher. Essa classe possui uma variável membro do tipo PageSwitcher declarada como static. A declaração como static permite que utilizemos a mesma instância do objeto, evitando criarmos diversas cópias desse tipo na memória. Semelhante ao método Navigate da classe PageSwitcher temos nessa classe duas versões do método Switch. Uma versão para troca de telas sem passagem de parâmetros e outra versão para trocarmos a tela informando parâmetros.

Codigo da classe Helper que facilita a troca dos paineis
Vamos agora passar para a montagem da interface do usuário e uso da nossa estrutura. Para a montagem de cada tela da nossa aplicação precisamos de um objeto do tipo Panel, ou que o estenda, para armazenar e exibir nossos controles. Nesse exemplo criei três classes que herdam da classe VerticalPanel, uma para a tela de login, uma para a tela principal e outra para uma tela de detalhes.
Nesse ponto é onde temos o ponto fraco da tecnologia, pois como não temos um editor visual para desenhar a tela, temos que fazê-lo no código aumentando o tempo de desenvolvimento. Nas telas principal e de detalhe adicionei em cada um label para identificar a tela e um botão para navegar entre elas. Note que no código temos que criar uma instância de cada objeto, alterar suas propriedades de acordo com nossa necessidade e adicionar no painel para estarem visíveis. Além disso, devemos montar via código também os handlers para os eventos, que nesse caso utilizamos somente o clique do mouse nesses botões. Nos eventos do clique do mouse sobre os botões ficam a chamada da nossa estrutura de troca de telas (na verdade painéis), conforme pode ser visto no código.

Codigo de um dos paineis com a implementacao do Handler de click do botao que realiza a troca de paineis
Na tela de login montamos uma estrutura um pouco mais complexa, pois adicionamos controles para o usuário informar o login e a senha, além de outros painéis para organizar os controles. Porém nesse post ainda não faremos validações sobre os controles, pois nosso foco agora é apenas demonstrar o uso básico do GWT e uma estrutura para troca de painéis que facilite a construção de aplicações nessa tecnologia. Assim ao clicarmos no botão login seremos direcionados para o painel principal.
Agora podemos executar a nossa aplicação e vê-la funcionando. Temo então um exemplo bem simples, mas que nos permite experimentar o uso do GWT junto com o App Engine. Para publicar essa aplicação nos servidores do Google devem ser seguidos os mesmos passos descritos em um post anterior. Como sempre deixei os fontes utilizados para escrever o post no meu Sky Drive, nesse caso com o nome POCAppengine.zip. Além dos fontes deixei uma cópia do tutorial original de Silverlight explicando o funcionamento do modelo de troca de painéis.
Abraço a todos e até o próximo post.