はじめてのUIBinderプログラミング
UIBinderとは
GWT2.0から用意された仕組みです。
- GUIレイアウトの定義をXMLで記述できる
- Widgetのイベント処理の記述が簡略化できる
といった利点があります。前者については、従来の方法だとクラスを生成しながらWidgetの配置を頭の中で想像する必要がありましたが、XMLで直接的に記述できるのでわかりやすくなります。後者は、イベントの記述が簡素化し、Javaコードの可読性が高まります。
以下は、サンプルプログラムにUiBinderで作った画面を表示するまでの基本操作です。
Eclipseでの作成方法
srcの上で右クリックをして、【New】→【Other】とウィザード画面を開きます。Google web ToolKit からUiBinderを選びます。
クラス名を入力してFinishを押します。デフォルトではサンプルコードが書かれますので、適時、チェックを外してください。
サンプルコードを理解する
【test.ui.xml】
このファイルにXML形式でインタフェース（画面）を設計します。具体的にはGWTのWidget（部品）を貼り付けます。ネームスペースが g:で始まっているのがGWTのタグです。UIBinderの便利なところは、一般的なCSSやHTMLの記述を含めてもほぼ問題ないということです。ここでのポイントは、ui:field属性です。ここで指定した名前が、Javaのコードで呼び出す部分になります。
<!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>.important {font-weight: bold;}</ui:style><g:HTMLPanel>Hello,<g:Button styleName="{style.important}" ui:field="button" /></g:HTMLPanel></ui:UiBinder>【test.java】
このファイルに、各ウィジェットの操作を行います。内容を書き換えたり、イベント処理をしたりです。下記のサンプルでは、ボタンをクリックするとHelloというダイアログボックスが出てきます。
public class test extends Composite implements HasText {private static testUiBinder uiBinder = GWT.create(testUiBinder.class);
interface testUiBinder extends UiBinder<Widget, test> {
}
public test() {
initWidget(uiBinder.createAndBindUi(this));
}
@UiField
Button button;
public test(String firstName) {
initWidget(uiBinder.createAndBindUi(this));
button.setText(firstName);
}
@UiHandler("button")
void onClick(ClickEvent e) {
Window.alert("Hello!");
}
public void setText(String text) {
button.setText(text);
}
public String getText() {
return button.getText();
}
}変数の対応について
@UiFieldアノテーションで、xmlで定義したwidget要素と関連付けられます（同じ名前である必要があります）。@UiFieldアノテーションによる記述については、特にプログラム中で呼び出しをしないのであれば、インスタンス変数を記述する必要がありません。つまり、わざわざ newでインスタンスを生成する必要がないということです。ただし、@UiFieldアノテーションは、各変数ごとに必ず付けてください。
ダメな例）
下記のように書いたからと言って、それぞれがUiFieldとして解釈はされません
@UiField Button btn1;
Button btn2; 良い例）
めんどくさいですが、ひとつづつ書いていきましょう。
@UiField Button btn1; @UiField Button btn2; 同じクラスに限り、以下の書き方でもOKなようです。
@UiField Button btn1,btn2;
イベントの記述について（@UiHandler）
UIBinderで素晴らしいところは、イベントの記述が簡単になることです。@UiHandlerアノテーションで、イベント貼付けます。@UiHandlerアノテーションを利用したでのイベントの割り当てですが、
- イベントの関数名 はなんでもいい
- キャッチするイベントの種類を決定するのはメソッドの引数の型
@UiHandler("button")
void onClick(ClickEvent e) {
Window.alert("Hello!");
}
クリックイベントを拾いたいからといってメソッド名をonClickにしているのではありません。 上記の場合は、ClickEventを引数の型にしているので、buttonに対する ClickEventを拾っているのです。
イベントへの複数のWidgetへの割り当て
複数のWidgetに同じような処理を割り当てたい時は、下記のように複数指定できます。この場合、どのWidgetが反応したのかを識別したい場合は、getSourceメソッドを利用します。
@UiHandler({"radioButtonA","radioButtonB","radioButtonC"}) void onClickRadio(ClickEvent e) { selectedRadioBtn = (RadioButton)e.getSource(); //Window.alert("Hello!"); }UIBinderで作成したWidgetの呼び出し
以上まででは、プログラムを実行しても画面には反映されません。これを表示するには、通常のWidgetと同様にRootPanelにaddする必要があります。
サンプルプロジェクトで作成したFirstgwtを例にします。このプロジェクトでは、Firstgwt.javaファイルが onModuleLoadメソッドを含んだ起動クラスです。サンプルでは、下記のようにいろいろサンプルの記述があります。
、
とりあえず、下記のようにonModuleLoadのところを全てコメントアウトし、作成した UIBinderクラスである test をRootPanelにaddします。
これを実行すると、下記のようにボタンらしきものが表示されるのでクリックするとHelloのダイアログメッセージが出てくるはずです。
