利点
・ 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 件のコメント:
コメントを投稿