UIBinderとは

UIBinderとはGWTで見た目のGUIとロジックを分離するための仕組み

Androidでいえば、XMLでUIを記述するようなもので、サーバーサイドでいえばJSP見たいな感じです。
昔Swingとかにあった、ゴミのようなコードを自動で生成するのではなく、HTMLに似たXMLで記述されたUI部分を読み込んで、Javaクラスを生成します。

メリットとしては見た目と実装を分けれるので、デザイナーとの共同作業時の作業がやりやすいのと、あとコードの再利用が楽になります。

はじめるには

公式サイトのドキュメントにそうのが一番でしょう。
http://code.google.com/intl/en/webtoolkit/doc/latest/DevGuideUiBinder.html

最初のHello WorldはHTMLを作成するサンプルです。
EclipseとかでUIBinderを作ると、最初の設定ではWidgetを生成しますので混乱しやすいので気をつけましょう。

飛ばして、Hello Widget World から始めるといいでしょう。

Simple binding of event handlers　ところではイベントの取り方を説明しています。
ここで、button に対して、マウスイベントを取るわけですが、



私は最初、複数のボタンからイベント取るとき、どうするか迷いましが、なんのことはなく
メソッド名は飾りです。偉い人にはわからんのですという決まりです。メソッド名は重ならないように、好きなのに変えればいいだけでした。


あと、Click以外のイベントの取り方ですが、このページ見るまで気づきませんでしたが、引数で受け取るイベントのクラスを変更すれば、そのイベントをとるようになります。
http://stackoverflow.com/questions/3440763/documentation-for-uihandler

活用

(UIはUIBinderで直書き、値のやり取りは、Editor使うのがGWTでの正統な方法のようです)
正直、まだまだ使いこなせていません。コピペでコード増えるのが嫌なので、UIBinder内のクラスに直接記述せず、外からアクセスしてPOJOとして使っています。
これじゃ、UIBinder使うメリットが半減しますが、それでも自力でUIをPOJOまで持ち込むのも大変だったと思いますので、UIBinder使って生産性は上がったと感じます。

呼び出し部分
  

       newData = new LabelAndBox2();   
        newData.getLabel1().setText("グループ名");
newData.getLabel1().setStylePrimaryName("titleLabel");
newData.getLabel2().setText("画像URL");
newData.getLabel2().setStylePrimaryName("titleLabel");


newData.getTextBox1().setStylePrimaryName("inputbox");
newData.getTextBox2().setStylePrimaryName("inputbox");

newData.getButton().setText("追加");
newData.getButton().addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
addData();
}
});

Java部分

package com.akjava.gwt.simplewordbook.client.ui;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class LabelAndBox2 extends Composite {

private static LabelAndBox2UiBinder uiBinder = GWT
.create(LabelAndBox2UiBinder.class);

interface LabelAndBox2UiBinder extends UiBinder<Widget, LabelAndBox2> {
}

public LabelAndBox2() {
initWidget(uiBinder.createAndBindUi(this));
}

@UiField Button button1;
@UiField Label label1,label2;
@UiField TextBox box1,box2;
public Button getButton(){
return button1;
}
public Label getLabel1(){
return label1;
}
public Label getLabel2(){
return label2;
}
public TextBox getTextBox1(){
return box1;
}
public TextBox getTextBox2(){
return box2;
}
}

XML部分

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>

</ui:style>
<g:HTMLPanel>
<g:HorizontalPanel><g:Label ui:field='label1'></g:Label><g:TextBox ui:field='box1'></g:TextBox></g:HorizontalPanel>
<g:HorizontalPanel><g:Label ui:field='label2'></g:Label><g:TextBox ui:field='box2'></g:TextBox></g:HorizontalPanel>
<g:Button ui:field='button1'></g:Button>
</g:HTMLPanel>
</ui:UiBinder>