利点
・ 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 にできない。
