2010年2月22日月曜日

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>のところの2つのパラメーターです。

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

0 件のコメント:

コメントを投稿