GWT2.0のUIBinderを試してみた

2.0からの新機能であるUIBinderについて、試してみました。ネタ元は、本家のサイ トDeclarative Layout with UiBinderです。

本記事の改訂記事をアップしましたので、記述の方法についてはそれを見てください。

ファイル構成
○○○.ui.xml　
ここで ユーザインタフェースの定義をします。Java側で呼び出す際の変数名も指定します。スタイルシートの設定も可能です。

view plainprint?

1. <ui:uibinder xmlns:ui="urn:ui:com.google.gwt.uibinder">  
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9. <div>Hello, <span ui:field="nameSpan"></span>.  
10. </div></ui:uibinder>  

Hello, .

○○○.java

• UIObject を継承したクラスを宣言します。ui.xmlと同じ名前にしましょう。
• クラス内でUiBinderを継承したインタフェース （MyUiBinder）を宣言します。
• MyUiBinderを呼び出し、コンストラクタにてUIBindの初期化をします。
• @UiField アノテーションにより、上記xmlファイルで定義した要素と変数を関連付けます
  

view plainprint?

1. public class HelloWorld extends UIObject { // Could extend Widget instead  
2.   interface MyUiBinder extends UiBinder＜divelement, helloworld=""> {}  
3.   private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);  
4.   
5.   @UiField SpanElement nameSpan;  
6.   
7.   public HelloWorld() {  
8.     // createAndBindUi initializes this.nameSpan  
9.         
10.     setElement(uiBinder.createAndBindUi(this));  
11.   }  
12.   public void setName(String name) { nameSpan.setInnerText(name); }  
13. }  

public class HelloWorld extends UIObject { // Could extend Widget instead
  interface MyUiBinder extends UiBinder＜divelement, helloworld=""> {}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField SpanElement nameSpan;

  public HelloWorld() {
    // createAndBindUi initializes this.nameSpan
      
    setElement(uiBinder.createAndBindUi(this));
  }
  public void setName(String name) { nameSpan.setInnerText(name); }
}

わかりにくいのは、UIBinderを継承したインタフェース定義のところでしょうか？このインテフェース定義は、最終的にUiBind処理の初期化に利用 されます。ここで重要なのは、 extends UiBinder＜U,O＞のところの２つのパラメーターです。

• U はui.xmlファイルで記述しているエレメントのrootのタイプを記述します。
• O は@UiFields を所有するクラスを記述します。

ui.xmlとJavaのファイルの関連付け
次の 2つの方法があります。

• ファイル名を同じにする
• @UiTemplate("ファイル名.ui.xml")　と 指定する

後者については、interface定義をするところの直前に記述すればOKです。


MainEntryPoint クラスでの記述
普通にクラスのインスタンスを生成し、Elementとしてappendするという方法になります。

view plainprint?

1. public void onModuleLoad() {  
2.         HelloWorld helloWorld = new HelloWorld();  
3.         Document.get().getBody().appendChild(helloWorld.getElement());  
4.         helloWorld.setName("おちくん");  
5.        
6.     }  

public void onModuleLoad() {
        HelloWorld helloWorld = new HelloWorld();
        Document.get().getBody().appendChild(helloWorld.getElement());
        helloWorld.setName("おちくん");
     
    }

---

ちょっと 触ってみて感想

今のところ、個人的には正直、このUIBinderの利便性についてはいまいち整理できてなく、

• 全部Javaでゴリゴリ 書きあげることができるGWTが好きだったので、タグを書くことになるのは個人的にはどうも、、、
• でも、複雑なレイアウトのUIを考え た場合、Javaで書いていくのはちょっと面倒な点はある。その点、UIBinderのやり方は直感的
• というか雰囲気的に StrutsとかJSFでやってるUIBindの方法と同じ感じか
• ui.xmlで記述するタグに付いてはちょっと勉強が必要だけど、
• ス タイルシートの変数も動的に変えられるというのは面白い
• 使いこなすにはちょっと勉強する必要があるかも。ただ、壁を乗り越えたら開発効 率があがる？

なんて、いろいろ思ったりしてます。まあ、Google様を信用して今後導入していこうかとは思ってます。