Ricardo Serathiuk

Fixando o Eclipse na Barra de Tarefas do Windows 7

Ricardo Serathiuk — Sun, 06 Mar 2011 13:05:07 +0000

Esta é uma dica para fixar o Eclipse na barra de tarefas do Windows 7. Apenas siga os passos a seguir.

1. Abra o eclipse.ini no diretório do Eclipse.

2. Adicione as seguintes linha no início do arquivo e salve:

-vm

[Caminho para o diretório bin da Java VM. Ex: C:\Program Files\Java\jdk1.6.0_22\bin]

3. Salve o arquivo e abra o Eclipse, e depois de aberto, tente fixar.

È simples assim.

Fonte: https://bugs.eclipse.org/bugs/show_bug.cgi?id=314805

Motorola Milestone para desenvolvimento Android no Eclipse

Ricardo Serathiuk — Mon, 10 Jan 2011 23:08:03 +0000

Neste artigo irei explicar como fiz para utilizar o Motorola Milestone para debugar e rodar aplicações em modo de desenvolvimento no Android. Este artigo não tem propósito de ensinar Android, Java ou qualquer coisa do tipo. Somente utilizar o Milestone em ambiente de desenvolvimento. E esse artigo é um passo a passo do que fiz para conseguir isso. No meu caso estou utilizando o sistema operacional Windows 7, mas acredito que não seja muito diferente adaptar os passos para Linux e MacOS. E também meu Milestone está com o ShadowMod 0.9.14(Android 2.2.1).

1. Baixe e instale a Android SDK(instalei em c:/android-sdk): http://developer.android.com/sdk/index.html
2. Baixe e instale o driver USB da Motorola(link não oficial da Motorola): : http://code.google.com/p/shadowmodbr/downloads/list
3. Adicione os diretórios “tools” e “platform-tools” da SDK no Path do seu Sistema Operacional.
4. Ligue o modo de debug no Milestone. Fica em Configurações, Aplicativos, Desenvolvimento, Depuração USB.
5. Conecte o Milestone via cabo de dados USB em seu computador.
6. No Prompt de Comando(ou bash, qualquer coisa do gênero), dê o comando “adb devices”. Ele deverá mostrar um “código maluco”(que formalmente se chama serial number). Se não mostrar, repita os passos anteriores. Se mostrar, muito bem Fliper, o negócio tá indo.
7. Inicie o Eclipse(é necessário que ele tenha o plugin do Android instalado)..
8. Crie um projeto caso não possua um criado.
9. No arquivo “AndroidManifest.xml”, na tag “application”, adicione o seguinte atributo e valor: android:debuggable=”true”
10. Agora tente rodar ou debugar sua aplicação. Para mim isso já funcionou. Mas o artigo que segui e fiz uma “tradução livre”, diz que pode ser que apareça uma pop-up para escolher o dispositivo. Se aparecer, escolha seu dispositivo e pronto.

Fonte do artigo: http://androiddevblog.blogspot.com/2010/02/android-programming-and-debugging-on.html

Agilizando a compilação do GWT/Google Web Toolkit

Ricardo Serathiuk — Sat, 21 Aug 2010 13:26:02 +0000

Existem algumas coisas no mundo que demoram. Podemos citar entre elas a aprovação de qualquer coisa no congresso nacional, a redução de juros no Brasil e a entrega dos produtos enviados pela Deal Extreme. A compilação do GWT entra nesta categoria, mas ao contrário das 3 que citei, tem como melhorar “um pouco” seguindo algumas dicas.
O grande “problema” do compilador do GWT, é que ele tem um compromisso “sagrado” de tentar produzir um código Javascript melhor que o de um programador humano. Por isso, ele faz uma série de análises para que código não usado não seja convertido e não esteja presente no código final. Ele não deixa na versão compilada os métodos que você nunca usa e varíaveis nunca usadas. E também ele obfusca seu código. E isso leva tempo. Como diria a pensadora: “Isto não é feitiçaria, é tecnologia”. Por isso não existem milagres e essas dicas irão apenas ajudar a “diminuir a demora”.
Mas falando sobre a demora, existe outra coisa que pode deixar suas pausas para o café um pouco mais longas. É o fato de o GWT ter as “maravilhosas” permutações. Mas o que seriam as permutações Arnaldo? Isso pode? Claro que pode Galvão. As permutações são etapas em que o compilador do GWT compila diferentes versões do código para diferentes navegadores. Em vez de ter 1 código javascript com um monte de condições no meio tratando diferentes situações para diferentes navegadores, o compilador produz 1 código específico para cada navegador. Isso faz com que o código fique otimizado para o navegador do usuário, mas em contrapartida, faz com que a compilação fique mais demorada.
Irei falar sobre algumas opções para diminuir a demora. Você pode utilizar todas elas juntas, ou utilizar separadas. Fica a seu critério.

1. Evite utilizar Code Splitting

O Code Splitting é um recurso do GWT que posibilita que você quebre o código a faça com que ele seja carregado aos poucos. O RunAsync(comando GWT.runAsync) serve para dizer onde se deve quebrar o código. Ele funciona bem, mas ele pode gerar um problema. São feitas uma série de análises adicionais para verificar os pontos de ‘quebra’ e separar os arquivos javascript a serem gerados. Dependendo do tamanho da aplicação e do número de pontos de quebra, a aplicação pode ficar ‘incompilável’ para muitas máquinas(por alto uso de memória e processamento). Então, analise a real necessidade de utilizar Code Splitting e se realmente aqueles KB’s a menos que o usuário irá carregar no início realmente farão diferença.

2. Go to hell IE6

Então daí que vem a segunda opção para diminuir a demora. Esta seria definir no GWT que você não quer compilar para alguns navegadores. Exemplo: Seu sistema só funcionará em IE8, Firefox 3 e Chrome. Não precisará funcionar em Opera, IE6, IE7 e versões antigas do Firefox. Então o que você faz é. Definir os navegadores que seu sistema terá suporte, e o resto que se f… fique sem compatibilidade. .
Para configurar os navegadores que você quer suporte, é só utilizar o seguinte comando no final de seu XML de configuração do módulo:

Sendo as opções:

ie6 = Microsoft Internet Explorer 6 e 7;

ie8 = Microsoft Internet Explorer 8;

gecko = Mozilla Firefox 3.x e superiores;

gecko1_8 = Mozilla Firefox 1.5 e 2;

safari = Navegadores baseados em Webkit(Safari, Chrome, etc…);

opera = Opera.

3. LocalWorkers

Esta é a melhor técnica de todas as apresentadas na minha opinião. Consiste em você fazer com que sejam compiladas mais de 1 permutação por vez. Esta técnica só traz resultados reais para processadores de mais de 1 nucleo. Exemplo: Você tem um processador com 2 núcleos, então configuramos o GWT para compilar uma permutação por núcleo, sendo que ele sempre compilará 2 permutações simultaneamente.
Para configurar isso é fácil. È só passar um paramêtro para o compilador informando o número de localWorkers desejado. Para linha de comando é apenas “-localWorkers [numero]”. Em um script Ant é só utilizar o seguinte:

4. Verifique a configuração de localização.

Além de criar uma permutação para cada navegador, o GWT cria uma compilação por localização por navegador. Exemplo. Se eu tenho uma aplicação com suporte a todos os navegadores e com 2 opções de localização(ex: pt_BR e en_US), o GWT irá gerar 12 permutações, sendo que originalmente são 6. Se eu colocar mais uma opção de localização, o número de permutações sobe para 18. Então, se você vai utilizar apenas 1 opção, especifique para o GWT isso da seguinte forma, no arquivo XML de configuração do módulo:

Raiva

Ricardo Serathiuk — Thu, 29 Apr 2010 21:42:59 +0000

Esse vídeo não é tão novo, mas representa uma situação que muitas pessoas já passaram. O suporte telefônico… O Rafinha Bastos do CQC falando como foi sua jornada com o suporte da NET.

WTF? Quake II em GWT?

Ricardo Serathiuk — Tue, 06 Apr 2010 21:53:21 +0000

Veja isso…

Um desenvolvedor do Google, nos 20% de tempo que são fornecidos para projeto próprio, resolveu portar o Quake II utilizando os novos recursos do HTML5. E para isso também utilizou o GWT. Não é impressionante? Agora acredito que o Flash possa “morrer”. Vou baixar o código-fonte do projeto e dar uma fuçada…

Utilizando Javascript no GWT/Google Web Toolkit com JSNI (Parte 1)

Ricardo Serathiuk — Sat, 13 Mar 2010 16:44:52 +0000

Muitas vezes os desenvolvedores precisam de um novo componente para sua aplicação, e esse componente a maioria das vezes é desenvolvido em Javascript. Quem conhece o GWT, sabe que a framework permite desenvolver aplicações RIA sem saber Javascript, mas sim desenvolvendo em Java de uma forma muita parecida como a que se desenvolve em Swing ou SWT. Você não tem contato direto com o Javascript, pois ele é gerado na compilação. Mas como então se faz para utilizar um componente Javascript no GWT?
O GWT tem uma funcionalidade que se chama JSNI(Javascript Native Interface). Ela é baseada no JNI(Java Native Interface), que permite aos desenvolvedores Java utilizarem recursos específicos do sistema operacional. No JNI são métodos na classe Java escritos em C. No JSNI são métodos na classe Java que utilizam Javascript. Mas a forma em que eles são escritos é muito parecida, tanto que é possível utilizar parte da documentação do JNI como referência para o JSNI.
Vamos primeiramente criar o já conhecido “Hello World!”, para que começar a se familizar com o JSNI:

public class JSNI implements EntryPoint {
public void onModuleLoad() {
Button btn = new Button("Clique aqui");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
alert("Hello World!");
}
});
RootPanel.get().add(btn);
}

//Dê uma atenção especial a este método
public native void alert(String txt) /*-{
$wnd.alert(txt);
}-*/;
}

Quando esse código for executado, dará para ver um botão, que você clica e mostra um alert com o “Hello World!”. Mas este alert é feito utilizando Javascript, como dá para ver. È criado um método nativo(“public native void alert”) que recebe uma String. O bloco de código é delimitado por “/*-{” e “}-*/” em vez de um simples par de chaves. E dentro do bloco de código é executado um “$wnd.alert(txt);”, que seria o correspondente a “window.alert(txt)” ou a apenas “alert(txt)”. O GWT precisa que tudo que seja referente a janela(window) seja chamado com o “$wnd” no início, pois internamente ele utiliza alguns iframes e algumas coisas que não vem ao caso, e ele precisa disso para não se perder na compilação. Da mesma forma, quando você precisar utilizar um “document.“, você utilizará “$doc.“. Resumindo:

document = $doc
window = $wnd

Vamos fazer um exemplo utilizando o “$doc” agora.

public class JSNI implements EntryPoint {
public void onModuleLoad() {
TextBox txt = new TextBox();
txt.setName("campoTexto");
RootPanel.get().add(txt);
Button btn = new Button("Clique aqui");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
mostraTextoTextBox();
}
});
RootPanel.get().add(btn);
}

public native void mostraTextoTextBox() /*-{
var txt = $doc.getElementById("campoTexto");
$wnd.alert(txt.value);
}-*/;
}

Neste exemplo, é criado um campo TextBox e um botão. Quando se clica no botão, é mostrado em um alert o texto do TextBox. Mas é utilizado Javascript para isso. È utilizado um “$doc.getElementById” para pegar a instância do TextBox(que no fundo no fundo é um “input text” HTML), e retornar o valor. Pode ver que é feita a mesma coisa que seria feita com um campo de texto HTML. A diferença é que se utiliza o $doc ao invés do “document” no getElementById.
A partir disso dá para ver que dá para fazer muita coisa com o JSNI. Esse é o básico do básico do que a ferramenta pode fazer. No próximo artigo irei explicar como utilizar objetos Java no Javascript e fazer com que métodos Java sejam visíveis para Javascript’s externos. Qualquer dúvida, tire nos comentários.

FeedBurner

Ricardo Serathiuk — Wed, 13 Jan 2010 02:57:23 +0000

Disponibilizei o blog no Feedburner para quem tiver interesse. O endereço é http://feeds.feedburner.com/serathiuk.

Escrevendo uma extensão de Twitter para o Google Chrome utilizando o Google Web Toolkit(GWT)

Ricardo Serathiuk — Sat, 21 Nov 2009 13:17:52 +0000

Estava olhando os exemplos de como criar extensões para o Chrome, e vi que assim como o no Firefox, as extensões não são nada mais que Javascript(mas no caso do Firefox tem os XUL envolvidos e etc…). Então pensei eu: “GWT gera Javascript, então ele deve funcionar para criar extensões”. Fiz uns testes básico e conclui. Funcionou. E aqui escrevo um tutorial dizendo como fiz para fazer isso funcionar. O objetivo desse tutorial não é ensinar GWT, é somente mostrar como configurar um projeto do GWT para rodar como uma extensão do Chrome.
Antes de tudo, vou dar um aviso que vai lhe poupar de alguns problemas: Salve todos os arquivos do exemplo com codificação UTF-8.
Como exemplo, criei uma aplicação para twitter bem simples, que só lê as últimas mensagens de um usuário qualquer.
Primeiramente criei uma aplicação no Eclipse chamada “ExtensaoChrome” com o pacote base chamado “com.serathiuk.chrome.extension.teste.client”.

Depois disso, alterei o arquivo ‘ExtensaoChrome.html’ da pasta war, deixando apenas com o seguinte HTML:

Na pasta war, coloquei o arquivo icon.png(o mesmo do exemplo oficial, link no final) e o arquivo manifest.json, que tem o seguinte conteúdo:

{
"name": "Leitor de Twitter",
"version": "1.0",
"description": "Exemplo de extensão para Chrome utilizando GWT do site serathiuk.com.",
"browser_action": {
"default_title": "Leitor de Twitter",
"default_icon": "icon.png",
"popup": "ExtensaoChrome.html"
},
"permissions": [
"http://www.twitter.com/"
]
}

Depois disso, apaguei aqueles arquivos que são criados pelo exemplo, deixando apenas o “ExtensaoChrome.java”, que é o Entry Point da aplicação. E no EntryPoint, apaguei todas aquelas informações do exemplo, e colocando o código para fazer a aplicação funcionar:

public class ExtensaoChrome implements EntryPoint {

private TextBox txtLogin;
private FlexTable tableTwitter;

public void onModuleLoad() {
HorizontalPanel h = new HorizontalPanel();
txtLogin = new TextBox();
h.add(txtLogin);
Button btn = new Button("Carregar");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
carregarTwitts();
}
});
h.add(btn);

ScrollPanel align = new ScrollPanel();
align.setWidth("100%");
align.setHeight("320");

tableTwitter = new FlexTable();
tableTwitter.setCellPadding(1);
tableTwitter.setCellSpacing(1);
tableTwitter.setBorderWidth(1);
align.add(tableTwitter);

VerticalPanel v = new VerticalPanel();
v.add(h);
v.add(align);
RootPanel.get("intro_panel").add(v);
}

protected void carregarTwitts() {
String url = "http://twitter.com/statuses/user_timeline/"+txtLogin.getValue()+".json";
RequestBuilder req = new RequestBuilder(RequestBuilder.GET, URL.encode(url));
try {
req.sendRequest(null,
new RequestCallback() {
public void onResponseReceived(Request request, Response response) {
preencheValores(response.getText());
}

public void onError(Request request, Throwable exception) {
showError(exception);
}
}
);
} catch(RequestException e) {
showError(e);
}
}

protected void preencheValores(String jsonText) {
tableTwitter.removeAllRows();

JSONArray json = (JSONArray) JSONParser.parse(jsonText);
for(int i = 0; i < json.size(); i++) {
JSONObject obj = (JSONObject) json.get(i);
if(obj != null) {
JSONString str = (JSONString) obj.get("text");
tableTwitter.setText(i+1, 0, str.stringValue());
}
}
}

protected void showError(Throwable e) {
Window.alert(e.getMessage());
}
}

Agora é só compilar o projeto e adicionar a extensão ao Chrome. Para fazer isso, digite o endereço “chrome://extensions/”, clicar em “Load Unpacked Extension” e selecionar o diretório war da aplicação(ou o diretório onde está o manifest.json). Com isso a extensão estará rodando, é só clicar no ícone dela ao lado da barra de endereços.

Exemplo Oficial: http://code.google.com/chrome/extensions/getstarted.html

Código-Fonte deste exemplo: http://gwtchrome.googlecode.com/files/ExtensaoChrome.7z

Depois disso, alterei o arquivo ‘ExtensaoChrome.html’ da pasta war, deixando apenas com o seguinte HTML:

Na pasta war, coloquei o arquivo icon.png(o mesmo do exemplo oficial, link no final) e o arquivo manifest.json, que tem o seguinte conteúdo:

{
“name”: “Leitor de Twitter”,
“version”: “1.0″,
“description”: “Exemplo de extensão para Chrome utilizando GWT do site serathiuk.com.”,
“browser_action”: {
“default_title”: “Leitor de Twitter”,
“default_icon”: “icon.png”,
“popup”: “ExtensaoChrome.html”
},
“permissions”: [
"http://www.twitter.com/"
]
}

private TextBox txtLogin;
private FlexTable tableTwitter;

public void onModuleLoad() {
HorizontalPanel h = new HorizontalPanel();
txtLogin = new TextBox();
h.add(txtLogin);
Button btn = new Button(“Carregar”);
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
carregarTwitts();
}
});
h.add(btn);

ScrollPanel align = new ScrollPanel();
align.setWidth(“100%”);
align.setHeight(“320″);

tableTwitter = new FlexTable();
tableTwitter.setCellPadding(1);
tableTwitter.setCellSpacing(1);
tableTwitter.setBorderWidth(1);
align.add(tableTwitter);

VerticalPanel v = new VerticalPanel();
v.add(h);
v.add(align);
RootPanel.get(“intro_panel”).add(v);
}

protected void carregarTwitts() {
String url = “http://twitter.com/statuses/user_timeline/”+txtLogin.getValue()+”.json”;
RequestBuilder req = new RequestBuilder(RequestBuilder.GET, URL.encode(url));
try {
req.sendRequest(null,
new RequestCallback() {
public void onResponseReceived(Request request, Response response) {
preencheValores(response.getText());
}

public void onError(Request request, Throwable exception) {
showError(exception);
}
}
);
} catch(RequestException e) {
showError(e);
}
}

protected void preencheValores(String jsonText) {
tableTwitter.removeAllRows();

JSONArray json = (JSONArray) JSONParser.parse(jsonText);
for(int i = 0; i < json.size(); i++) {
JSONObject obj = (JSONObject) json.get(i);
if(obj != null) {
JSONString str = (JSONString) obj.get(“text”);
tableTwitter.setText(i+1, 0, str.stringValue());
}
}
}

protected void showError(Throwable e) {
Window.alert(e.getMessage());
}
}

Configurando o SmartGWT em um projeto do Eclipse

Ricardo Serathiuk — Sun, 08 Nov 2009 14:56:07 +0000

A muito tempo tinha falado em escrever um artigo sobre SmartGWT, mas acabei ‘se enrolando’ e isso nunca aconteceu. Mas nos últimos dias, tenho acompanhado as estatistícas do blog com mais atenção, pois configurei o Google Analytics. Por lá, que boa parte dos visitantes daqui do blog, chegam nele pelo Google, e atrás de artigos sobre SmartGWT. Eu sempre postei notícias sobre os lançamentos aqui, mas nunca tinha feito um artigo sobre. Esse é o primeiro, e acredito que será o início de uma série deles.

Irei mostrar como configurar um projeto já criado para funcionar com SmartGWT. Já escrevi um artigo a algum tempo mostrando como configurar o Eclipse com o plugin do Google e criar um projeto do Eclipse com ele. Esse artigo explica como utilizar o Google Plugin com o GWT 1.6, mas ele funciona muito bem com o 1.7.*, e também funciona com o GWT 2.0 MS2. E o artigo foi testado e escrito se baseando no SmartGWT 1.3.

Para configurar o SmartGWT em um projeto já criado, siga os seguintes passos:

Baixe o SmartGWT do seguinte local: http://code.google.com/p/smartgwt/
Descompacte o arquivo .zip e copie o arquivo smartgwt.jar para o diretório “war/WEB-INF/lib” do seu projeto.
Dê um refresh em seu projeto (clique em cima do nome dele no Package Explorer e pressione F5).
Vá em “Configure Build Path” (botão direito em cima do projeto no Package Explorer, Build Path, Configure Build Path).
Vá em Libraries, clique em “Add Jar” e adicione o smartgwt.jar a lista de bibliotecas.
Vá no arquivo de configuração do módulo (um que termina com a extensão *.gwt.xml) e adicione a seguinte linha: “”
Vá no arquivo html(o que a aplicação carrega por padrão quando ela inicia) e adicione a seguinte linha dentro do HEAD: “”. O “[NOME_DO_MODULO]” deve ser substituído pelo mesmo nome que está no arquivo “.gwt.xml”. Lá ele está no atributo rename-to da tag module.

Com isso o projeto já deve funcionar com o SmartGWT. Se quiser um exemplo pronto para teste, cole o seguinte conteúdo em seu EntryPoint, adicionando as linhas dentro do seu onModule.

final TextItem txt = new TextItem("nome", "Nome");

Button btn = new Button("Clique");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert((String) txt.getValue());
}
});

DynamicForm form = new DynamicForm();
form.setFields(txt);

VLayout v = new VLayout();
v.addMember(form);
v.addMember(btn);

v.draw();

Salve e tente rodar o exemplo. Caso funcionar corretamente, irá aparecer uma caixa de texto com um botão. Quando clicar no botão, irá aparecer em um alert o que foi digitado no campo de texto.

Introdução ao UIBinder do GWT 2.0

Ricardo Serathiuk — Sat, 31 Oct 2009 14:31:51 +0000

Uma das grandes novidades do GWT 2.0 é o UIBinder. UIBinder é uma funcionalidade que permite que você separe o layout da aplicação da parte de “negócio”(validações, interações com o servidor, etc.). Permite que você deixe toda a parte de layout separadas em arquivos XML, deixando para os arquivos Java (que irão ser compilados e transformados em Javascript) somente o que importa do código. Essa funcionalidade facilita bastante as coisas, pois melhora o entendimento e a ajuda na hora de dar manutenção no código fonte das telas. Aposto que quem já utilizou JSF (principalmente o 2.0) e o Adobe Flex, irá se sentir em casa.

Vou dar um exemplo simples, que não é um Hello World como você conhece. È só um formulário com dois campos, que adiciona tudo o que é preenchido em uma tabela. Não envolve comunicação com o servidor e nem nada. È só para dar pano de fundo para mostrar como funciona todos os elementos que fazem o UIBinder funcionar. Bom, vamos parar de blá blá blá e vamos para o que interessa.

Primeiramente, vamos configurar o módulo do UIBinder no GWT 2.0. Acredito que você já tenha um projeto GWT 2.0 criado e funcionando neste momento. Se não tiver, leia antes o tutorial que escrevi sobre. Para configurar e habilitar o UIBinder no GWT 2.0, apenas adicione a seguinte linha no seu arquivo de configuração do GWT(*.gwt.xml) :

Depois disso vamos criar o arquivo de tela. O nome que estou dando para o mesmo é HelloWorld(tá, é um Hello World) que está no pacote ‘com.serathiuk.gwt2teste.client’ no meu caso. Sinta-se livre para mudar. O nome do arquivo será HelloWorld.ui.xml. Detalhe para o ‘ui.xml’, pois esse é o padrão da framework.

UiBinder xmlns:ui=’urn:ui:com.google.gwt.uibinder’

xmlns:g=’urn:import:com.google.gwt.user.client.ui’>

Nome:

E-mail:

Agora iremos criar o arquivo HelloWorld.java, que se encontra no mesmo pacote que o arquivo de tela(HelloWorld.ui.xml).

//Arquivo HelloWorld.java

package com.serathiuk.gwt2teste.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class HelloWorld extends Composite {

interface Binder extends UiBinder {}

private static Binder binder = GWT.create(Binder.class);

@UiField Button btnTeste;

@UiField TextBox txtNome;

@UiField TextBox txtEmail;

@UiField FlexTable flexTable;

public HelloWorld() {
initWidget(binder.createAndBindUi(this));
}

@UiHandler(“btnTeste”)
public void onClickBtnTeste(ClickEvent event) {
int num = flexTable.getRowCount();
flexTable.setText(num, 0, txtNome.getValue());
flexTable.setText(num, 1, txtEmail.getValue());
}

@UiHandler(“txtNome”)
public void onChangeTxtNome(ChangeEvent event) {
Window.alert(txtNome.getValue());
}

}

E como ficou meu onModuleLoad do meu EntryPoint:

public void onModuleLoad() {
RootPanel.get().add(new HelloWorld());
}

O UIBinder funciona da seguinte maneira. No arquivo XML da tela, temos os componentes TextBox txtNome e txtEmail e existe um Button chamado btnTeste. Também tem uma FlexTable com o nome flexTable. Você já deve ter percebido que todos esses componentes tem o atributo “ui:field”. Esse atributo é responsável por dizer qual será o atributo da classe Java que aquele componente representa. Na classe Java, temos os atributos txtNome, txtEmail, btnTeste e flexTable também, e eles estão anotados com a annotation “UIField”. Essa anotação é responsável por dizer que aquele atributo representa um componente na tela. O atributo deve ter o mesmo nome que o correspondente na tela, e não pode ser private. Você não precisa se preocupar em instanciar esse atributo, pois via Injeção de Dependência, o próprio GWT se encarrega disso. Você pode trabalhar normalmente com o componente, mudando tamanho, configurações, etc… pelo Java. Mas recomendo deixar essas coisas para o arquivo de tela.

Para adicionar um evento a um componente é simples. É criado um método, com qualquer nome que desejar, e utiliza a annotation ‘UiHandler’ neste método. Essa annotation irá receber um valor, que é o componente da tela que ele representa. Em nosso exemplo existem 2. O ‘onClickBtnTeste’ e o ‘onChangeTxtNome’, que poderiam ser trocados facilmente por ‘aoClicarNoBtnTeste’ e ‘aoAlterarTxtNome’. Vai do gosto do freguês. E eles sempre iriam ser chamados quando o botão fosse clicado no primeiro caso, ou quando o nome fosse alterado, no segundo caso.

Mas você deve estar se perguntando: “O nome do método pode ter o nome que eu desejar, e o campo Nome pode ter mais de um tipo de evento, mas não é especificado na annotation qual evento que eu quero. Como ele sabe é aquele método deve ser chamado no onChange?”. È pelo parâmetro que é passado no método. No caso do onClickBtnTeste, ele recebe como parâmetro um objeto da classe ClickEvent, enquanto o onChangeTxtNome recebe como parâmetro um objeto da classe ChangeEvent. Se um dia resolver mudar o tipo de evento que aquele método representa, basta apenas alterar o parâmetro para o correspondente da ação que você deseja.

Lembrando que no objeto do parâmetro vem muitas informações úteis, como o componente que invocou esse evento, funcionalidade de parar o evento e algumas coisas a mais.

Acho que deu para entender como começar a utilizar o UIBinder. Acredito que ele se tornará o novo padrão para desenvolvimento com GWT, e acredito que nas próximas versões do Google Plugin, teremos mais facilidades para utiliza-lo. Não demorará muito para aparecer RAD’s utilizando a tecnologia.

Qualquer crítica, sugestão e essas coisas entrem em contato.