GWT2.0 のUIBinderを試してみた（その２）

前回の記事以降いろいろ試行錯誤してわかってきたことがあるので、訂正も含めて改めて書きます（あの記事はなかった事にしてもらっても結構ですw）。Netbeansでは、最新のプラグインを入れていればUIBinderに対応しているので簡単に作成することができます（Eclipseでも同様です）。

UIBinder関連ファイルの作成
【新規ファイル】→【GWT UIBinder】を選択することで、xmlファイルとJavaファイルが作成されます。
XMLファイル
ここでは、ボタンを配置してみます。htmlPanelがベースになっていますので、そこに下記のようにボタンを追加します。

view plainprint?

1. <ui:uibinder xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:ui="urn:ui:com.google.gwt.uibinder">  
2.  <ui:style>  
3.   
4.  </ui:style>  
5.  <g:htmlpanel>  
6.             <g:button ui:field="btn1">ボタンー</g:button>  
7.  </g:htmlpanel>  
8. </ui:uibinder>  

 

 
 
            ボタンー
 

Javaファイル
ここでは、ボタンにイベントを記述しています。

view plainprint?

1. public class NewUiBinder extends Composite {  
2.     private static NewUiBinderUiBinder uiBinder = GWT.create(NewUiBinderUiBinder.class);  
3.   
4.     interface NewUiBinderUiBinder extends UiBinder＜widget, newuibinder=""> {  
5.     }  
6.     @UiField  
7.     Button btn1;  
8.       
9.     @UiHandler("btn1")  
10.     void onClick(ClickEvent e) {  
11.         Window.alert("ボタンが押されましたー");  
12.   
13.     }  
14.   
15.   
16.     public NewUiBinder() {  
17.         initWidget(uiBinder.createAndBindUi(this));  
18.     }  
19. }  

public class NewUiBinder extends Composite {
    private static NewUiBinderUiBinder uiBinder = GWT.create(NewUiBinderUiBinder.class);

    interface NewUiBinderUiBinder extends UiBinder＜widget, newuibinder=""> {
    }
    @UiField
    Button btn1;
    
    @UiHandler("btn1")
    void onClick(ClickEvent e) {
        Window.alert("ボタンが押されましたー");

    }


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

上記のJavaファイルのポイントは２点。

• @UiFieldアノテーションで、xmlで定義したwidget要素と関連付ける。
  注意1：同じ名前である必要があります
  注意2：各変数のそれぞれこのアノテーションを書かないといけません
• @UiHandlerアノテーションで、イベント貼付け

@UiFieldアノテーションによる記述については、特にプログラム中で呼び出しをしないのであれば、記述する必要がありません。つまり、わざわざ newでインスタンスを生成する必要がないということです。@UiHandlerアノテーションを利用したでのイベントの割り当てですが、 イベントの関数名はなんでもいいです。上記の場合は別にクリックイベントを拾いたいからといってメソッド名をonClickにしているのではありません。キャッチするイベントの種類を決定するのはメソッドの引数の型です。上記の場合は、ClickEventを引数の型にしているので、btn1に対するClickEventを拾っているのです。

最後、上記の方法で定義したWidgetの呼出し方法ですが、

view plainprint?

1. final NewUiBinder uib = new NewUiBinder();  
2.  RootPanel.get().add(uib);  

final NewUiBinder uib = new NewUiBinder();
 RootPanel.get().add(uib);

というように、普通にWidgetを張り付ける方法でオッケイです。

以上のように、プラグインが自動生成するファイルを利用することで、効率良く開発することができます。UIBinderは必須の機能ですね。