• OOPHM: Out Of Proccess Hosted Mode
• RunAsync: Quebre o tamanho do arquivo javascript gerado
• SOYC:Story Of Yout Compile
• Novos Paineis aineis mais rápidos
• ClientBundle:Já pensou num ImageBundle melhorado? pois é… conseguiram..

Em breve pretendo escrever posts sobre cada uma das funcionalidades acima.

Você encontra o link para o download da apresentação do Bruce Johnson aqui e o video da apresentação logo após o break

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:
[java]
package br.com.gwt.rpc.client.servico;

@RemoteServiceRelativePath(”/servico”)
public interface Servico extends Service{
public Boolean autoriza(String loginToken, String recurso);
public String login(String login, String senha) throws Exception;
public void logout(String loginToken);
}
[/java]

Interface Assí­ncrona:

[java]
package br.com.gwt.rpc.client.servico;

public interface ServicoAsync {
public void autoriza(String loginToken, String recurso, AsyncCallback>Boolean< callback);
public void login(String login, String senha, AsyncCallback>String< callback);
public void logout(String loginToken, AsyncCallback>Void< callback);
}
[/java]

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.

[java]
package br.com.gwt.rpc.server.servico;
public class ServicoImpl extends RemoteServiceServlet implements Servico {
public Boolean autoriza(String loginToken, String recurso) {
…
/*implementação da autorização;*/
…
}
public String login(String login, String senha) throws Exception {
…
/*implementação do login*/
…
}
public void logout(String loginToken) {
…
/*implementação do logout*/
…
}
}
[/java]

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

[xml]

…

…

[/xml]

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:

[java]
ServicoAsync servico = GWT.create(Servico.class);
[/java]

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:

[java]
…
servico.login(”login”, “1234″, new AsyncCallback callback{
public void onSuccess(String result) {
loginToken = result;
Window.alert(”Login efetuado com sucesso!”);
}

public void onFailure(Throwable cause){
Window.alert(”Ocorreu uma falha no processo de login. Causa: \n”+cause.getMessage());
}
});
[/java]

Abraços e até o próximo post

* 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:

[java]
package br.com.gwt.client.toolbar;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.ButtonBase;
import com.google.gwt.user.client.ui.SimplePanel;

/**
* Uma ToolBar nada mais é senão um painel com botões que representam ações ou
* funcionalidades de um sistema. Geralmente os botões da toolbar utilizam ícones
* em vez de textos, entretanto esse detalhe não será tratado nessa classe.
*
* @author Marcelo Emanoel
*/
public class ToolBar extends Composite {
private FlexTable toolbarTable;
private int buttonCount;

public ToolBar(){
init();
setupStyles();
}

/**
* Inicializações
*/
private void init() {
toolbarTable = new FlexTable();
buttonCount = 0;

SimplePanel panel = new SimplePanel();
panel.add(toolbarTable);

initWidget(panel);
}

/**
* Adiciona um botão à ToolBar.
* @param button
*/
public void addButton(ButtonBase button){
toolbarTable.setWidget(0, buttonCount++, button);
}

/**
* Seta os estilos dos componentes internos e da ToolBar.
*/
private void setupStyles() {
setStylePrimaryName(”br_com_gwt_ToolBar”);
toolbarTable.setStylePrimaryName(”br_com_gwt_ToolBar”);
}
/**
* Retorna o número de botões existentes na ToolBar.
* @return
*/
public int getButtonCount() {
return buttonCount;
}
}
[/java]

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.

[java]/**
*
*/
package br.com.gwt.client.toolbar.imagebundle;

import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.ImageBundle;

/**
* BlogBundle contém imagens relacionadas à atividades de um blog. Adicionar,
* remover, inserir videos bem como configurar alguma coisa no blog.
*
* As imagens foram retiradas do IconsPedia. Todos os direitos reservados.
* @author Marcelo Emanoel
*/
public interface BlogBundle extends ImageBundle {

/**
* Imagem de adicão.
* @return
*/
@Resource(”br/com/gwt/resources/add.png”)
public AbstractImagePrototype add();

/**
* Imagem de remoção.
* @return
*/
@Resource(”br/com/gwt/resources/remove.png”)
public AbstractImagePrototype remove();

/**
* Imagem de video.
* @return
*/
@Resource(”br/com/gwt/resources/video.png”)
public AbstractImagePrototype video();

/**
* Imagem de configuração.
* @return
*/
@Resource(”br/com/gwt/resources/settings.png”)
public AbstractImagePrototype settings();

/**
* Imagem de ok.
* @return
*/
@Resource(”br/com/gwt/resources/check.png”)
public AbstractImagePrototype check();
}[/java]

Finalmente como utilizar o ImageBundle e a ToolBar juntos.

[java]package br.com.gwt.client;

import br.com.gwt.client.toolbar.ToolBar;
import br.com.gwt.client.toolbar.imagebundle.BlogBundle;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define onModuleLoad().
*/
public class ImageBundleTest implements EntryPoint {

/**
* This is the entry point method.
* Instancia duas ToolBars uma com as imagens adquiridas via ImageBundle e a
* outra criada com imagens extraídas por css.
*
* O intuito é verificar o número de conexões extras causadas pela ausência
* do ImageBundle.
*/
public void onModuleLoad() {
/**
* Instancia-se o ImageBundle via Deferred Binding.
*/
BlogBundle blogBundle = GWT.create(BlogBundle.class);

ToolBar blogTools = new ToolBar();
ToolBar dbTools = new ToolBar();

DockPanel dock = new DockPanel();
RootPanel.get().add(dock);

dock.setStylePrimaryName(”dock”);

HTML center = new HTML();
dock.add(center, DockPanel.CENTER);
dock.setCellHeight(center, “100%”);

/*
* Instancia todas as imagens do ToolBar que usa ImageBundle.
*/
Image addImg = blogBundle.add().createImage();
Image removeImg = blogBundle.remove().createImage();
Image checkImg = blogBundle.check().createImage();
Image settingsImg = blogBundle.settings().createImage();

blogTools.addButton(createButton(addImg, blogTools.getButtonCount()));
blogTools.addButton(createButton(removeImg, blogTools.getButtonCount()));
blogTools.addButton(createButton(checkImg, blogTools.getButtonCount()));
blogTools.addButton(createButton(settingsImg, blogTools.getButtonCount()));

dbTools.addButton(createEmptyButton(dbTools.getButtonCount(),”feather”));
dbTools.addButton(createEmptyButton(dbTools.getButtonCount(), “db”));

dock.add(blogTools, DockPanel.NORTH);
dock.add(dbTools, DockPanel.SOUTH);
}

/**
* Método de fábrica. Cria botões a partir de uma posição e o nome do estilo
* que deverá ser atribuído ao botão.
* @param pos
* @param id
* @return
*/
public Button createEmptyButton(int pos, String id){
Button simpleButton = new Button();
simpleButton.setTitle(pos+”");
simpleButton.setStylePrimaryName(id);
simpleButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert(sender.getTitle());
}
});
return simpleButton;
}

/**
* Método de fábrica. Cria botões a partir de uma imagem e uma posição.
* @param icon
* @param pos
* @return
*/
public PushButton createButton(Image icon, int pos){
PushButton pushButton = new PushButton(icon);
pushButton.setTitle(pos+”");
pushButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert(sender.getTitle());
}
});
return pushButton;
}
}
[/java]

Agora vejamos o que o firebug nos diz a respeito das toolbars criadas e suas imagens via css e imageBundle.

Comparação ImageBundle

Como pode se observar com uma única requisição feita através do imageBundle, quatro imagens foram trazidas até o cliente, e podem ser colocadas em cache tranquilamente (O nome “maluco” do arquivo é um número hash). Enquanto isso, para cada imagem setada através de css é feita uma nova requisição ao servidor, consumindo tempo e banda do usuário.

As vantagens do uso de ImageBundle são claras em relação ao carregamento de imagens via CSS. Além disso, uma outra utilidade dos ImageBundle’s que não foi citada no texto é o uso de internacionalização de imagens. Mas esse é assunto para um próximo post. Espero que tenham gostado. A seguir um arquivo zip com o projeto desenvolvido.

imagebundletest.zip

Porém “o mundo é cruel”, e quando nós caímos no mundo real e tentamos desenvolver uma aplicação mais robusta do que um Hello World nos deparamos com alguns problemas um pouco mais complicados.

Vou tentar escrever alguns posts falando de algumas experiências que eu tive com GWT, os problemas que surgiram e como eu resolvi estes problemas.

O primeiro problema que eu tive foi quando tentei utilizar uma biblioteca javascript pré-existente, ou quando eu tentei utilizar alguma funcionalidade que há nos objetos providos pelos browser via javascript (window, document, etc) mas está implementada nos mesmos objetos no nível GWT.

A forma que encontrei para resolver este (e mais um monte de problemas) foi utilizar JSNI – Java Script Native Interface. JSNI está para GWT assim como JNI (Java Native Interface) está para Java. Com JSNI é possível implementar o corpo de métodos GWT utilizando Java Script.

Vejamos um exemplo. Vamos supor que, por alguma razão esquisita, eu queira escrever um método que faça o mesmo que o Window.alert. Vamos chamar este método de meuAlert:

[java]
public native void meuAlert(String mensagem) /*-{
alert(mensagem);
}-*/;
[/java]

Apesar de este não ser um exemplo muito funcional (na realidade ele não é funcional de jeito nenhum) dá pra entender a “mecânica da coisa”. Todo método JSNI deve ser declarado como native (assim como métodos cuja implementação será feita em JNI, utilizando Java convencional). A implementação do método deve vir em um bloco comentado localizado entre o fim da lista de parâmetros do método e o seu ponto-e-vírgula. O bloco de código JSNI é delimitado por “-{” e “}-”, desta forma o tradutor Java/Java Script do GWT irá saber que este bloco de comentários trata-se na realidade de instruções Java Script.

Vimos como fazer chamadas do lado Java para Java Script, vamos ver agora como fazer o caminho contrário, chamar métodos Java de dentro de código JSNI.

Para isto, basta chamar o método de qualquer classe seguindo a convenção:

[instância.]@nomeDaClasseCompleto::nomeDoMetodo(assinaturaDosParametros)(argumentos)

Onde:

• instância (atributo opcional) – Referente a instância da qual o método será chamado, caso não seja informada uma instância, será assumido que a chamada será feita de forma estática;
• nomeDaClasseCompleto – “full qualified class name”, ou seja, o nome da classe completo (toda a árvore de pacotes seguido do nome da classe);
• nomeDoMetodo – Nome do método que será chamado;
• assinaturaDosParametros – Assinatura dos parâmetros no formato JNI;
• argumentos – Lista de valores passados como parâmetros para o método.

Vamos fazer outro exemplo simples:

[java]
package br.com.gwt.client;

public class TesteJSNI {
public void exibeMensagem(String nome, int idade) {
Window.alert(”nome: ” + nome + ” – idade: ” + idade);
}

public native void callJavaMethod(TesteJSNI teste, String nome, int idade) /*- {
teste@br.com.gwt.client.TesteJSNI::exibeMensagem(Ljava/lang/String;I)(nome, idade);
}-*/;
}
[/java]

Por fim, JSNI define dois objetos implícitos $wnd e $doc, que nos permitem, respectivamente acessar os contextos da janela e do documento principais. Estes objetos são importantes pois, como o código GWT é executado em um iframe oculto, se você tentar utilizar window e document diretamente, você não irá acessar a janela e o documento principais, mas sim do iframe oculto do GWT. Outro motivo, é que estes objetos devem ser utilizados quando se quiser criar funções nomeadas que o programador queira chamar posteriormente em um outro ponto do código. A razão para isto é que o código gerado pelo GWT é ofuscado, então, qualquer nome de função atribuído diretamente via JSNI será ofuscado, tornando impossível de “adivinhar” qual será esse nome em tempo de compilação.

Vamos a alguns exemplos:

Definição de uma função:

[java]
public native void criaFuncao() /*{-
$wnd[meuAlert] = function() {
$wnd.alert(’Teste’);
}-}*/;

public native void chamaFuncao() /*-{
$wnd[meuAlert]();
}-*/;
[/java]

Adicionando um listener ao documento:

[java]
public void trackMousePosition() /*-{
$doc.addMouseMoveListener(function(evt) {
$wnd.title = ‘x: ‘ + evt.x + ‘ – y: ‘ + evt.y;
});
}-*/;
[/java]

Por enquanto é só. No próximo post eu vou mostrar como se faz uma invocação JSONP utilizando os conceitos mostrados aqui.

Para aqueles que pretendem se aventurar na web 2.0 o GWT é um ótimo começo! Através dele uma aplicação pode ser completamente desenvolvida em uma única página html! Com acesso a banco de dados e efeitos visuais bastante interessantes. O melhor de tudo isso é que através do framework, não será necessário escrever uma única linha sequer de javascript! Tudo é feito através do compilador fornecido, que traduz o código Java para Javascript. Obviamente nem tudo são flores, não é fácil nem tampouco acho que seja possí­vel traduzir a imensa API Java para javascript. Além disso as novidades introduzidas na API 5.0 de Java não estão funcionando ainda. Por exemplo o novo for, as enums e os tipos genéricos além das annotations. Apesar de todas essas limitações a API do GWT é bastante completa possibilitando ainda diversas oportunidades de extensões.

Uma aplicação escrita em GWT é basicamente dividida em duas partes:

1. Cliente
2. Servidor

Na parte do cliente é onde “a mágica acontece” é o local onde o compilador traduz o código Java para Javascript. Nesse local ocorrem as maiores limitações. Dispõe-se apenas de algumas classes da API java como por exemplo os tipos básicos da linguagem, seus respectivos wrappers. Algumas classes do Collections Framework. A maior parte do código escrito no lado do cliente é derivada dos componentes, Widgets, fornecidos pela api. As classes disponibilizadas no pacote
com.google.gwt.user.client.ui este pacote contém os componentes gráficos.

Na parte do servidor a liberdade é total, inclusive para usar as novas funcionalidades da api 5.0 de java. Toda a estrutura de acesso a banco de dados e qualquer outra tecnologia deve permanecer no servidor.

A princí­pio, é isso aí­. Nós aqui do GWT Brasil pretendemos discutir sobre o assunto e servir de meio de comunicação entre os usuários brasileiros como forma de tirar dúvidas, criar tutoriais básicos e avançados ajudando a disseminar o uso do framework. Aguardem os próximos posts com aplicações de exemplo, temas para discussão e notí­cias sobre o desenvolvimento da API que dentro de em breve estará na versão 1.4 com muitas novidades!