• 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

Primeiramente crie um projeto usando o Project Creator e o Application Creator como explicado em posts anteriores. Em seguida acrescente o gwm.jar ao seu classpath e copie o diretório themes para a pasta public do seu projeto, é nela que se encontram todos os arquivos css e de imagem do gwm. Feito isso, o próximo passo é efetuar a ligação entre a página e esses arquivos. Acrescente as seguintes linhas no head do html da página:

[html]

Modificando o código que foi gerado pelo application creator ficamos com o entry point da seguinte forma:

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

import org.gwm.client.GDesktopPane;
import org.gwm.client.GInternalFrame;
import org.gwm.client.impl.DefaultGDesktopPane;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

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

private GDesktopPane desktop;
private static GWM instance;
/**
* This is the entry point method.
*/
public void onModuleLoad() {
instance = this;
desktop = new DefaultGDesktopPane();

RootPanel.get().add((Widget) desktop);
}

/**
* Singleton
* @return
*/
public static GWM getInstance() {
return instance;
}

/**
* Adicione os seus GInternalFrames ao desktop
* @param iframe
*/
public void addWindow(GInternalFrame iframe) {
desktop.addFrame(iframe);
iframe.setVisible(true);
}
}

[/java]

Agora vejamos alguns detalhes do código:

Primeiramente declaramos que iria ser usado um Desktop, o desktop nada mais é do que um objeto capaz de receber janelas e gerenciá-las. Além disso, implementamos um dos mais usados e simples padrões de projeto um singleton. O Singleton garante que somente uma instancia de um determinado objeto será criado. Como o método onModuleLoad é o primeiro a ser chamado pelo gwt, e somente é executado uma única vez, é bastante adequado inicializar o singleton nesse ponto. No caso de se adicionar construtores ao entryPoint eles devem ser construtores padrão sem argumentos, podendo até mesmo ser privados caso contrário o compilador irá reclamar. Após a execução do onModuleLoad a qualquer momento será possível se obter uma instancia do entryPoint através do método getInstance().

Observem que a inicialização do desktop se dá através da classe DefaultGDesktop o que indica que a classe GDesktop na verdade é uma interface, isso configura um dos vários pontos de extensão do framework. Caso seja necessário implementar um desktop com comportamentos diferentes do original tudo que se tem que fazer após a implementação é alterar esta linha.

Por ultimo, no método onModuleLoad é adicionado esse objeto desktop ao RootPanel, que como já explicado anteriormente, é a página html. Repare aqui que a referência ao desktop não é de um widget, embora a implementação o seja, daí a necessidade do cast.

Agora analisemos o método addWindow(GInternalFrame iframe) ele faz duas coisas:

1. Adiciona o GInternalFrame ao desktop, porém isso não a torna visível;
2. Mostra a janela finalmente. Uma chamada ao método setVisible sem que a janela esteja previamente adicionada a um desktop provocaria uma Exceção em tempo de execução por isso ela só é feita nesse ponto.

Até agora temos uma aplicação com um desktop. Nada além disso, entretanto visualmente já pode-se observado o seguinte:

Entretanto isso não é nem de longe o suficiente para uma aplicação
Vamos criar pelo menos uma janela e brincar um pouco com ela

Para se criar uma janela que possa ser usada em conjunto com o GDesktop devemos criar uma classe que extenda de DefaultGInternalFrame ou então uma que a implemente, embora eu não recomende a implementação do início por que a DefaultGInternalFrame já possui bastante funcionalidades e sem contar que você pode extendê-la facilmente.

Assim, vejamos, vamos criar uma janela que possa utilizar o método singleton que criamos anteriormente e que tenha alguma utilidade também ai vai o código:

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

import org.gwm.client.impl.DefaultGInternalFrame;

import com.google.gwt.user.client.ui.ChangeListener;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.Widget;

/**
* Cria uma janela com um combo box com os temas disponíveis. Ao selecionar um
* tema diferente altera o desktop completo.
* @author Marcelo Emanoel
*
*/
public class ThemeChanger extends DefaultGInternalFrame {

private ListBox combo;

public ThemeChanger() {
init();
initLayout();
attachListeners();
}

/**
*Inicializa os componentes da janela
*/
private void init() {
combo = new ListBox();
combo.addItem(”default”);
combo.addItem(”alphacube”);
combo.addItem(”citrus”);
combo.addItem(”cloudy”);
combo.addItem(”darkX”);
combo.addItem(”mac”);
combo.addItem(”sky”);
combo.addItem(”spread”);
combo.addItem(”theme1″);
}
/**
*Inicializa o layout da Janela
*/
private void initLayout() {
setCaption(”Seletor de temas”);
setContent(combo);
}
/**
*Adiciona algum possível listener da janela
*/
private void attachListeners() {
combo.addChangeListener(new ChangeListener() {
public void onChange(Widget sender) {
int selecao = combo.getSelectedIndex();
String tema = combo.getValue(selecao);
GWM.getInstance().changeTheme(tema);
}
});
}
}
[/java]

Repare que a janela é a mais simples possível, contém apenas um combobox com o nome dos estilos css que foram adicionados no início. No método attachListeners acrescentei um ChangeListener ao combobox de maneira que sempre que ouvesse a mudança de valor fosse possível interceptar essa mudança e reagir de alguma maneira, no caso chamei o método getInstance() que retorna a instancia do singleton de GWM e em seguida o método changeTheme passando o valor do combobox. abaixo segue o código que realiza a mudança de tema:

[java]
public void changeTheme(String newTheme){
desktop.setTheme(newTheme);
}
[/java]

Simples e direto. No método initLayout() foi alterada a propriedade Caption que nada mais é senão o Título da janela e em seguida o conteudo da janela foi setado para ser o combo box. O método utilizado para isso, setContent() foi sobrecarregado de 3 maneiras:

1. Receber um widget, a que provavelmente será a mais usada nas suas aplicações.
2. Receber uma String, supondo que seja de interesse do usuário adicionar somente texto à janela.
3. Receber uma url, também bastante usada para carregar uma página html dentro da janela em si.

Existem também outros métodos que facilitam bastante a vida, como por exemplo, o bloqueio ou não de propriedades como Maximizable, Minimizable, Draggable, Closable. Permitindo ou bloqueando respectivamente, maximizar, minimizar, arrastar e fechar a janela. Além disso, é possível acrescentar ouvintes à janela de maneira a interceptar os eventos anteriores além de outros permitindo uma reação a cada um deles.

Vamos revisitar agora a classe GWM já que vamos adicionar uma janela ao desktop. O código segue abaixo:

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

import org.gwm.client.GDesktopPane;
import org.gwm.client.GInternalFrame;
import org.gwm.client.impl.DefaultGDesktopPane;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

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

private GDesktopPane desktop;
private ThemeChanger themeChanger;
private static GWM instance;

/**
* This is the entry point method.
*/
public void onModuleLoad() {

instance = this;
desktop = new DefaultGDesktopPane();

themeChanger = new ThemeChanger();

changeTheme(”default”);
addWindow(themeChanger);

RootPanel.get().add((Widget) desktop);
}

/**
* Singleton
* @return
*/
public static GWM getInstance() {
return instance;
}

/**
* Adicione os seus GInternalFrames ao desktop
* @param iframe
*/
public void addWindow(GInternalFrame iframe) {
desktop.addFrame(iframe);
iframe.setVisible(true);
}

public void changeTheme(String newTheme){
desktop.setTheme(newTheme);
}
}

[/java]

Veja que criamos uma instancia da janela ThemeChanger e a adicionamos ao desktop. Feito isso é só atualizar a página do projeto e finalmente ver a janela em ação.

A janela por default pode ser maximizada, minimizada, fechada e ser arrastada. Aproveitem e brinquem um pouco.

Segue o código implementado no post. Aguardo comentários!

Projeto GWM

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.