UIBinderとはUIBinderとはGWTで見た目のGUIとロジックを分離するための仕組みAndroidでいえば、XMLでUIを記述するようなもので、サーバーサイドでいえばJSP見たいな感じです。 昔Swingとかにあった、ゴミのようなコードを自動で生成するのではなく、HTMLに似たXMLで記述されたUI部分を読み込んで、Javaクラスを生成します。 メリットとしては見た目と実装を分けれるので、デザイナーとの共同作業時の作業がやりやすいのと、あとコードの再利用が楽になります。 はじめるには公式サイトのドキュメントにそうのが一番でしょう。http://code.google.com/intl/en/webtoolkit/doc/latest/DevGuideUiBinder.html 最初のHello WorldはHTMLを作成するサンプルです。 EclipseとかでUIBinderを作ると、最初の設定ではWidgetを生成しますので混乱しやすいので気をつけましょう。 飛ばして、Hello Widget World から始めるといいでしょう。 Simple binding of event handlers ところではイベントの取り方を説明しています。 ここで、button に対して、マウスイベントを取るわけですが、 @UiHandler("button") void handleClick(ClickEvent e) { Window.alert("Hello, AJAX"); } 私は最初、複数のボタンからイベント取るとき、どうするか迷いましが、なんのことはなく メソッド名は飾りです。 @UiHandler("button1") void button1(ClickEvent e) { Window.alert("Hello, AJAX"); } @UiHandler("button2") void button2(ClickEvent e) { Window.alert("Hello, AJAX"); } あと、Click以外のイベントの取り方ですが、このページ見るまで気づきませんでしたが、引数で受け取るイベントのクラスを変更すれば、そのイベントをとるようになります。 http://stackoverflow.com/questions/3440763/documentation-for-uihandler @UiHandler("listBox") void whateverName(ChangeEvent event) { // ... } 活用(UIはUIBinderで直書き、値のやり取りは、Editor使うのがGWTでの正統な方法のようです)正直、まだまだ使いこなせていません。コピペでコード増えるのが嫌なので、UIBinder内のクラスに直接記述せず、外からアクセスしてPOJOとして使っています。 これじゃ、UIBinder使うメリットが半減しますが、それでも自力でUIをPOJOまで持ち込むのも大変だったと思いますので、UIBinder使って生産性は上がったと感じます。 呼び出し部分 newData = new LabelAndBox2(); newData.getLabel1().setText("グループ名"); newData.getLabel1().setStylePrimaryName("titleLabel"); newData.getLabel2().setText("画像URL"); newData.getLabel2().setStylePrimaryName("titleLabel"); newData.getTextBox1().setStylePrimaryName("inputbox"); newData.getTextBox2().setStylePrimaryName("inputbox"); newData.getButton().setText("追加"); newData.getButton().addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { addData(); } }); Java部分 package com.akjava.gwt.simplewordbook.client.ui; import com.google.gwt.core.client.GWT; import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiField; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.Widget; public class LabelAndBox2 extends Composite { private static LabelAndBox2UiBinder uiBinder = GWT .create(LabelAndBox2UiBinder.class); interface LabelAndBox2UiBinder extends UiBinder<Widget, LabelAndBox2> { } public LabelAndBox2() { initWidget(uiBinder.createAndBindUi(this)); } @UiField Button button1; @UiField Label label1,label2; @UiField TextBox box1,box2; public Button getButton(){ return button1; } public Label getLabel1(){ return label1; } public Label getLabel2(){ return label2; } public TextBox getTextBox1(){ return box1; } public TextBox getTextBox2(){ return box2; } } 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> </ui:style> <g:HTMLPanel> <g:HorizontalPanel><g:Label ui:field='label1'></g:Label><g:TextBox ui:field='box1'></g:TextBox></g:HorizontalPanel> <g:HorizontalPanel><g:Label ui:field='label2'></g:Label><g:TextBox ui:field='box2'></g:TextBox></g:HorizontalPanel> <g:Button ui:field='button1'></g:Button> </g:HTMLPanel> </ui:UiBinder> |
GWT >