はじめての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のダイアログメッセージが出てくるはずです。



Comments