2011年3月31日木曜日

GWT UiBinder を使う

GWT 2.0 から UiBinder を使うことで、 XML で Widget と DOM structure を作成できるようになりました。

利点
 ・ UI(XMLテンプレートでの宣言)とプログラムの動作(Javaクラス)を
  分離できる
 ・ 生産性とメンテナンスに優れている
   ・ スクラッチからUIを作成するのが簡単
   ・ テンプレートをまたいで簡単にコピペできる
 ・ Java のコードより XML,HTML,CSS に親しいデザイナーとのコラボレートが
  楽になる
 ・ HTMLのモックからインタラクティブなUIへの段階的な移行が可能
 ・ コンパイル時に Java ソースとXML間の相互参照をチェックできる
 ・ GWT's i18n facility と連携して国際化を直接サポートする
 ・ 重い widget や panel よりも軽い HTML element を使いやすく
  することで、ブラウザリソースをより効果的に使うことができる

注意点
 ・ レンダラーではない
 ・ ループや条件分岐はマークアップ内にはない

---------------------------------------------

■ New UiBinder Wizard

 eclipse で

 [File] - [New] - [UiBinder]

 で UiBinder 生成ダイアログが表示されます。




 ・ Souce folder: ソースフォルダ

 ・ Package: 生成される UiBinder のファイルを入れるパッケージ

 ・ Name: 生成される UiBinder のファイル名
    例) Hoge と入力すると Hoge.ui.xml と Hoge.java が作成される

 ・Create UI based on:
   ベースを widget にするか HTML にするか選択する

   ・widget: ベースが <g:HTMLPanel\> になる


<!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:HTMLPanel>
Hello,
<g:Button styleName="{style.important}" ui:field="button" />
</g:HTMLPanel>
</ui:UiBinder>


   ・HTML: ベースが <div> になる


<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<div>
Hello,
<span class="{style.important}" ui:field="nameSpan" />
</div>
</ui:UiBinder>


 ・Do you want to add sample content?:
   生成される UiBinder にサンプルコードを入れるかどうか

 ・Do you want to add comments?:
   生成される UiBinder にコメントを入れるかどうか


■ owner class of UiBinder templates

 レイアウトを定義した XML (Hoge.ui.xml) のエレメントをコードから扱うための owner class があります。
 New UiBinder Widzard を使って UiBinder を生成した場合は、この owner class も自動で生成されます。


 ・ HTMLベースの場合

public class Main2 extends UIObject {

private static Main2UiBinder uiBinder = GWT.create(Main2UiBinder.class);

interface Main2UiBinder extends UiBinder<Element, Main2> {
}

@UiField
SpanElement nameSpan;

public Main2() {
setElement(uiBinder.createAndBindUi(this));
}

public Main2(String firstName) {
setElement(uiBinder.createAndBindUi(this));
nameSpan.setInnerText(firstName);
}

public void setName(String name) { nameSpan.setInnerText(name); }
}

HTMLベースの場合は owner class は UIObject を継承します。


 ・ Widgetベースの場合

public class Main extends Composite {

private static MainUiBinder uiBinder = GWT.create(MainUiBinder.class);

interface MainUiBinder extends UiBinder<Widget, Main> {
}

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

@UiField
Button button;

public Main(String firstName) {
initWidget(uiBinder.createAndBindUi(this));
button.setText(firstName);
}

@UiHandler("button")
void onClick(ClickEvent e) {
Window.alert("Hello!");
}
}

Widget ベースの場合は owner class は Composite を継承します。

 また、xmlns:g='urn:import:com.google.gwt.user.client.ui' が宣言されていることで、com.google.gwt.user.client.ui パッケージのクラスを g プレフィックスと Java クラス名から <g:ListBox> のようにエレメントとして使うことができます。
 各ウィジェットのプロパティを設定するための Java-Bean スタイル規則に従ったメソッドは、次の方法でエレメントの属性として使うことができます。

 Widget#setHogeFuga() → <g:Widget hogeFuga="value">

 set をはずし最初を小文字にします。


Widgetの階層内で HTML markup を使いたい場合は、HTMLPanel か HTMLWidget のインスタンスが必要です。そのため、<g:HTMLPanel></g:HTMLPanel> や <g:HTMLWidget></g:HTMLWidget>の中に HTML markup を書きます。



■ インスタンスの生成

EntryPoint などから owner クラスのインスタンスを生成することでUIを作成します。


Main2 main2 = new Main2();
Document.get().getBody().appendChild(main.getElement());
main2.setName("World");




RootPanel.get().add(new Main());



・UiBinder<U, O> interface

UiBinder の owner class は生成するUIが定義された XML を指定するための UiBinder<U, O> interface を持ちます。

 ・ U : ui.xml ファイルで定義されているルートエレメントのタイプ
    例) HTMLベースの場合 : Element
    例) Widgetベースの場合 : Widget
 ・ O : @UiFeilds を埋めるオーナータイプ
    Hoge.ui.xml の Hoge 部分


 ui.xml ファイルでは、任意のオブジェクト(任意の DOM element を含む)を定義できる。
 定義した任意のオブジェクトは ui:field 属性で名前をつけることで、Java コードから扱えるようになる。ui:field を同じ名前の変数に @UiField アノテーションをつけて定義すると、uiBinder.createAndBindUi(this) の実行時に、SpanElement の変数に適切なインスタンスがセットされる。
@UiField をつけた変数は private にできない。



 

0 件のコメント:

コメントを投稿