GWTのUiBinderを試してみる

DialogBoxのJavaDocを見ているとUiBinderのサンプルが載っていた。

http://google-web-toolkit.googlecode.com/svn/javadoc/2.2/com/google/gwt/user/client/ui/DialogBox.html

調べてみるとUiBinderとは、xmlファイルにUIの情報などが書かれている。
つまり、Javaソースにコンポーネントの位置情報などを書かなくてすむ
ということなんでしょう。

Delphiで言えばdfm的な役割をするものだと思う。

JavaDocを読んだだけでは使い方がよくわからなかったので、
使い方をメモっておく。

まず、新規作成方法

右クリックメニュよりNew→UiBinder

そこで自動生成されたui.xmlに下記のサンプルを貼り付けてみる。

<!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:DialogBox autoHide="true" modal="true">
   <g:caption><b>Caption text</b></g:caption>
   <g:HTMLPanel>
     Body text
     <g:Button ui:field='cancelButton'>Cancel</g:Button>
     <g:Button ui:field='okButton'>Okay</g:Button>
   </g:HTMLPanel>
 </g:DialogBox>

ソースは下記のような感じ。

ポイントは、uiBinder.createAndBindUi(this)という部分で
上記のxmlファイルからフォームオブジェクトを生成する部分。

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DialogBox;

public class MyBinderDialog extends Composite  {

 private DialogBox dlg;
 private static MyBinderDialogUiBinder uiBinder = GWT
   .create(MyBinderDialogUiBinder.class);

 interface MyBinderDialogUiBinder extends UiBinder<DialogBox, MyBinderDialog> {
 }

 public MyBinderDialog() {
  dlg=(uiBinder.createAndBindUi(this));
 }
 
 public DialogBox getDialogBox(){
  return dlg;
 }



}

呼び出し側はこんな感じ。

MyBinderDialog db = new MyBinderDialog();
    DialogBox dbox=db.getDialogBox();
    dbox.show();