GWT2.0のUIBinderを試してみた

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

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

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

Hello, .

○○○.java

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

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するという方法になります。

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様を信用して今後導入していこうかとは思ってます。