Ricardo Serathiuk

Introdução ao UIBinder do GWT 2.0

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

<inherits name=’com.google.gwt.uibinder.UiBinder’/>

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.

<!– Arquivo HelloWorld.ui.xml –>

<?xml version=”1.0″ encoding=”UTF-8″?>

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

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

<g:HTMLPanel>

Nome: <g:TextBox ui:field=”txtNome” /><br/>

E-mail: <g:TextBox ui:field=”txtEmail” /><br/>

<g:Button ui:field=”btnTeste” text=”Teste” />

<br/>

<g:FlexTable ui:field=”flexTable”/>

</g:HTMLPanel>

</ui:UiBinder>

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

E como ficou meu onModuleLoad do meu EntryPoint:

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.