* Recentemente foi liberado uma versão da API de Beans Binding (JSR 295) para GWT. O projeto gwt-beans-binding ainda está bastante no início, mas já possui uma boa cobertura da API de Beans Binding. É um projeto que vai trazer muitas melhorias ao GWT, mas que não seja como sua irmã mais velha, que está parada a muito tempo sem atualização.

1. Ser de um tipo básico/primitivo (String, Integer/int, Double/double, Long/long, Boolean/boolean ).
2. Implementar a interface Serializable ou IsSerializable(gwt < 1.4).
3. Todos os campos do objeto devem obedecer à(s) regra(s) 1 e/ou 2.

O uso de coleções e mapas é permitido desde que se use generics e os tipos que elas encapsulem obedeçam às regras citadas anteriormente. Assim é possível se ter por exemplo uma List<String> trafegando entre o cliente e o servidor.

Abaixo você encontra o diagrama de implementação de um serviço rpc do gwt.

Diagrama de Implementação de um Serviço RPC

O que essa coisa toda realmente significa é bastante simples:

• 2 interfaces
• 1 servlet

As duas interfaces servem para a definir o que o serviço irá realizar, por exemplo: Verificar se um usuário possui acesso a um determinado recurso, efetuar login no sistema... etc. Uma dessas interfaces é chamada de síncrona e a outra de assíncrona. O servlet define o como esse serviço será implementado e por isso ele deve implementar a interface síncrona do serviço.

Utilizando a versão 1.5 do gwt temos o seguinte:

Interface Síncrona:

Interface Assíncrona:

Reparem que na interface Assíncrona os métodos não retornam objetos e os parâmetros dos métodos são os mesmos da interface síncrona com o acréscimo de um AsyncCallback. Entrarei em detalhes logo abaixo.

Agora, restam somente dois passos para a criação do serviço. Implementar o servlet e registrá-lo no arquivo do módulo.

Abaixo o arquivo de configuração do módulo gwt.

A partir daí o serviço está pronto para ser usado. Repare que o path no módulo de configuração é o mesmo definido logo no início da interface síncrona. Feito isso enquanto estiver utilizando em hosted mode, não é necessário nenhuma outra configuração adicional. Para a utilização em web mode é necessária uma última configuração. Registrar o servlet no web.xml. Esta última tarefa não será coberta neste post por se tratar de uma atividade comum em uma aplicação JEE.

Para fazer uma chamada ao serviço o compilador do gwt deve ser invocado através da seguinte chamada:

As chamadas são sempre assíncronas, isso significa que é criada uma conexão HTTP com o servidor, essa chamada é executada e em algum momento ela irá retornar e então executará o código que faz parte do AsyncCallback que criamos. A seguir um exemplo de chamada ao método de login:

Abraços e até o próximo post

Neste primeiro artigo irei escrever basicamente sobre o que é GWT, o porquê esta tecnologia é uma opção para o desenvolvimento de aplicações web e, por fim, irei mostrar algumas de suas características básicas.

O que é GWT ?

Basicamente GWT (Google Web Toolkit) é um conjunto de ferramentas de desenvolvimento, uma API e um conjunto de componentes visuais projetadas para o desenvolvimento de aplicações Web. A principal diferença entre GWT e outros frameworks é que o código que é executado no browser é feito em Java ao invés de Javascript. Por mais que Javascript seja uma linguagem de programação com muitos defensores, utilizar Java para implementar a camada de apresentação possui várias vantagens tais como: a linguagem de programação Java é fortemente tipada e o seu código é compilado, assim, muitos erros são encontrados em tempo de compilação; existem muitas IDEs (excelentes, conhecidas e gratuitas) para o desenvolvimento em Java; por fim, a quantidade de programadores Java é muito maior do que a quantidade de programadores Javascript.

Além das razões citadas acima, o código produzido por GWT é compatível com os browsers mais utilizados e desenvolver código HTML+CSS+Javascript que funcione bem em todos os browsers não é uma tarefa das mais triviais (quem já tentou isso sabe do que eu estou falando).

Por quê GWT ?

Fazer um sistema de informação em Java envolve muito mais tarefas do que simplesmente a codificação do sistema. Atualmente até mesmo a tarefa de escolher as tecnologias que serão utilizadas em cada camada da aplicação não é das mais simples. GWT, por exemplo, é só mais um framework para a camada de apresentação de uma aplicação, existem muitos outros bons frameworks para a mesma finalidade (ex: Struts, JSF, Flex, Silverlight, Wicket, etc).

Com os novos frameworks (principalmente Adobe Flex, Microsoft Silverlight e Java FX) a questão mais difícil de responder é HTML ou não HTML ? A grande diferença destas novas opções é que o seu resultado é muito mais bonito do quê uma página HTML tradicional (e isto é obtido com muito menos esforço). Porém, o bom e velho HTML ainda é (e será por muito tempo) útil, pois seja em desktops quanto em dispositivos móveis, qualquer coisa que tem conexão com a web possui automaticamente alguma forma de mostrar conteúdo HTML (e Javascript). Por fim, através do seu hosted mode, GWT permite que os desenvolvedores fazer debug à camada de apresentação das suas aplicações Web ! Além de também ser possível construir testes de unidade (com o JUnit por exemplo).

Sendo assim, GWT é a opção para quem quer publicar suas aplicações Web em HTML, porém prefere codificar em Java do quê em Javascript.

Características do GWT

Compilador de Javascript:

A característica mais interessante do GWT é o seu compilador de Java para Javascript. GWT converte um subconjunto (bastante grande) da linguagem de programação Java para Javascript. Basicamente toda a sintaxe da linguagem Java é suportada (inclusive a sintaxe Java 5, suportada a partir do GWT 1.5) com algumas poucas exceções:

• nem todas as classes da biblioteca padrão de Java são emuladas, ex: LinkedList, StringTokenizer, Logging e BigNumber são algumas das classes que estão faltando. Uma lista completa destas classes pode ser vista em http://code.google.com/

webtoolkit/documentation/jre.html;

• existem algumas outras restrições como por exemplo a falta de reflexão, multithreading, sincronização, Throwable.getStackTrace() e asserções. Esta lista completa está no site http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.

DeveloperGuide.Fundamentals.html#LanguageSupport

Economida de espaço:

Além disto uma preocupação constante da equipe do google enquanto desenvolvem o GWT é em torná-lo eficiente, produzindo código Javascript rápido e o menor possível. Para isto, uma das medidas tomada para otimizar o espaço ocupado pelo javascript gerado é produzir apenas o código que é utilizado, para isto, todo o código produzido é analizado para determinar se existe alguma parte que nunca é executada, qualquer trecho que não for executado é automaticamente removido do javascript gerado. Além disto, só são incluídas as funções da biblioteca que são utilizadas.

Outra característica que poucos programadores conhecem a respeito do comportamento dos browsers é que estes abrem normalmente uma ou duas conexões para fazer o download dos arquivos Javascript incluídos em uma página. Este download é feito de forma sequencial. Ou seja, há um tradeoff para os programadores Javascript tradicionais entre modularidade e velocidade. No caso do GWT, todas as funções Javascript são agrupadas em um único arquivo de modo a tornar mais ágil este processo de download. Por fim, todo o código gerado é ofuscado e compactado (utilizando um filtro gzip no servidor web), deixando o tamanho final dos artefatos muito menor do quê provavelmente um programador conseguiria fazer manualmente.

Múltiplos browsers:

Quem já precisou desenvolver algum código em Javascript para múltiplos browsers ou mesmo teve a oportunidade der ler algum código feito para este fim, provavelmente deparou-se com uma infinidade de "ifs" que tentam determinar qual o browser que está acessando a página para realizar a mesma tarefa com pequenas modificações. Os desenvolvedores do GWT além de isolar os programadores deste tipo de problema ainda tiveram uma idéia bastante interessante, o compilador de Javascript gera uma versão da aplicação para cada tipo de browser diferente e o servidor web fornece para cada cliente apenas a versão adequada ao seu browser.

Múltiplos idiomas:

Da mesma forma que o GWT gera uma versão diferente da aplicação para cada browser, a mesma estratégia é utilizada caso você utilize internacionalização em sua aplicação. Desta forma, o compilador Javascript gera a combinação de todos os idiomas com todos os browsers possíveis, assim, cada cliente recebe apenas a versão da aplicação para o seu browser e para o seu idioma.

Image bundle:

Um último recurso bastante interessante e novo (pois foi adicionado ao GWT apenas na versão 1.5) é o image bundle. Com ele é possível agrupar várias imagens em apenas um arquivo (normalmente faz sentido agrupar as mesmas imagens de uma página). Assim ao invés do browser abrir várias conexões TCP para fazer o download das imagens, só é necessário abrir uma conexão e, o código HTML+CSS gerado, automaticamente "quebra" as imagens e as exibe individualmente.

Conclusão

Neste artigo escrevi uma breve introdução à tecnologia GWT e às suas principais características. Espero ter mostrado que este é um conjunto de ferramentas bem interessante e que deve ser levado bastante a sério como alternativa para a construção dos seus próximos projetos. Além disto, eu gostaria de ressaltar que este é um projeto em forte desenvolvimento e que tanto os programadores do Google quanto à comunidade de usuários é bastante solícita e ajuda bastante nos forums oficiais (http://groups.google.com/group/Google-Web-Toolkit). Por fim, este é apenas o primeiro artigo de uma série, onde mostrarei os principais conceitos e faremos iterativamente uma aplicação web do começo ao fim, utilizando, é claro, GWT.

* 5 Licensas do Ext GWT Developer
* 3 Licencas de 1 ano do GWT Designer
* 2 Cópias do livro Google Web Toolkit Applications escrito por Ryan Dewsbury
* 3 Cópias do livro GWT in Practice escrito por Robert Cooper e Charlie Collins
* 3 Cópias do livro Pro Web 2.0 Development With GWT escrito por Jeff Dwyer

Para participar existem 4 opções:

1. Se inscrever no RSS do GWT Site via email, corresponde a 1 cupom.

Escrever um comentário no post correspondente do blog deles com alguma das opções abaixo. Todas valem 4 cupons.

2. Para os novatos em GWT, efetuar o download da release 1.5 e brincar um pouco com ela. Após algum tempo, escrever para eles dando a sua opinião, comparando o framework com as tecnologias que você usa atualmente e comentando se você pretende continuar usando gwt ou não e por que.
3. Enviar um projeto em GWT que você esteja desenvolvendo, open source ou como hobby. Enviar um link para o projeto.
4. Escrever uma review da sua biblioteca e/ou ferramenta e/ou livro favoritos bem como uma aplicação baseada em GWT.

O concurso no total oferece 16 prêmios e o número máximo de cupons por participante é de 5. Então corra e participe!

Link para o Concurso: http://www.gwtsite.com/the-biggest-ever-gwt-giveaway-contest/

Um ImageBundle é um objeto que automaticamente pega todos os ícones mensionados anteriormente e os une em uma única imagem fazendo com que n requests ao servidor sejam condensadas em UMA ÚNICA!!! Além disso as imagens são "recortadas" depois tornando transparente ao usuário que se trata de uma mesma imagem. O procedimento de "recortar" novamente a figura depois de carregada é conhecido como "clipping" e é implementado através de CSS.

Parece complicado não é? Pois é... pode até parecer... mas utilizando GWT isso fica fácil fácil... e com algumas linhas de código tudo isso é rapidamente desenvolvido sem dores de cabeça e de maneira transparente ao programador!!!!! Isso é possível graças ao mecanismo batizado de Deferred Binding do GWT que fornece pontos de extensão ao framework. Em um próximo tópico explicarei como o Deferred Binding funciona e o que você pode fazer com essa funcionalidade.

Voltando ao ImageBundle....

Tudo que você precisará para a utlização de um ImageBundle é implementar uma interface que extende ImageBundle e criar métodos que retornam um object AbstractImagePrototype esse método deve conter anotações especificando quais recursos (leia-se imagens) devem ser carregados pelo compilador. O objeto AbstractImagePrototype possui um método muito útil que é o createImage() que retorna nada mais nada menos que a imagem que precisamos! Dito isso chega de conversa fiada e vamos ao código

Para exemplificar a técnica vamos construir um componente bastante usado em aplicações desktop, uma ToolBar. Como se sabe em uma ToolBar é muito comum o uso de ícones representando ferramentas ou funcionalidades do software. É nesse momento que o ImageBundle entra em cena. Para a criação do exemplo vou ilustrar uma ToolBar com e sem ImageBundle. Para verificar o número de conexões geradas para buscar a imagem utilizaremos o firebug, extensão do firefox que facilita e muito a vida dos desenvolvedores web.

As imagens utilizadas no exemplo bem como o código fonte estão disponíveis no final do post em arquivos zip.

Inicialmente a classe que representa o componente ToolBar:

Até aqui acredito que não temos muitas surpresas. A ToolBar é composta por uma FlexTable e botões adicionados a ela. Além disso é possível contar quantos botões foram inseridos.

Agora vamos verificar como foi feito o ImageBundle.

Finalmente como utilizar o ImageBundle e a ToolBar juntos.