GWT: Field xxx has no corresponding field in template file

GWTのUiBinderで定義したUIコンポーネントに対してUiFieldを記述してjavaクラスから呼びだそうとしたら、赤いアンダーラインの警告が出て

Field xxx has no corresponding field in template file

みたいなエラーが。。。。記述方法は間違いないのにどういうことか？

結論は、原因はわかりませんが

• とりあえずコンパイル（F11）してみることで解決

ということに。たんなるバグのようですが、どういう状況でなるのかがちょっと不明。

GWT:EclipseでUiBinderファイルを作成した時にInvalid web.xml file.

EclipseでUiBinderを作成した時に、最初にUiBinderのxmlを開いて「Design」タブを開くと、上記のような画面が出ることがあります。

このような画面が出た時は、とりあえず、war/WEB-INF/web.xml を一度開いてください。そうすると、上記のエラーは無くなります（Reparseを押してください）。

GWT: UiBinderを利用したファイルアップロード

GWTでファイルアップロードフォームを記述する方法は、以前の記事で紹介しましたが、UiBinderを使うとよりシンプルになります。
ここでは、SubmitButtonクラスを利用しています。このボタンを使うと、送信処理の記述が不要になります。もちろん、ふつうのButtonを利用してsubmit()メソッドを呼び出す方法もアリです。 サーバー部分の記述は従来通りです。

GWT:UiBinderでRadioButtonのイベント処理

初歩的ですがUIBinder系のネタがネットにあまりあがってないようだったので、、、
UiBinderでRadioButtonを使う際、ふと疑問に思うところはどうやってその情報を取ってくるのだろうかということ。radioButtonの場合は、

• ClickEvent
• ValueChangeEvent

のいずれかを用いて各ボタンの状態が変わった段階を検知するとよいでしょう。その際、

• 各ボタンへのイベントの割り当ては、{}を利用することで一括して行う
• どのボタンが選択されたのかはgetSourceメソッドを利用して入手

という点がノウハウとなります。下記は、ClickEventを利用した際の例です。ここでは、ボタンが押された際にそのボタン（ソース）を記録しておいて、後からテキスト情報等を利用して区別するということになるでしょう。

@UiHandler({"radioButtonA","radioButtonB","radioButtonC"})
 void onClickRadio(ClickEvent e) {
         selectedRadioBtn = (RadioButton)e.getSource();
        //Window.alert("Hello!");
 }

Eclipse:GWTDesignerのUIBinder対応について

先日の記事でGWT Designerのことを少し書きましたが、いつの間にかUIBinderにも対応してますね。ui.xmlファイルを選択するとDesignパネルがあることに今更気づきました。いつから対応していたのか、、、

まあ、RADな環境としては正直デキは悪いです。ただ、XMLだけだと自分がつくっているUIを想像しなければいけませんので、ちょっとマシかなという印象。そうですね。AndroidアプリでもGUI部分はデザイナーで雛形を作りますが、それと同じ感覚で使えばいいのかもしれません。

UIBinderにて画像を表示する ～Imageタグ～

UiBinderを利用して、画像を配置するには、Imageタグを使います。

あるいは、Java側で処理することも可能です。

userIcon.setUrl("ochi.png");

画像ファイルは、webのディレクトリに配置してください。

---

なお、ImageResourceクラスを利用する方法があるらしいのですが、まだ未確認なのでこの方法で。確認次第、アップします。

UiBinderにてCSSの設定をする

ウェブアプリケーションでは、ページのデザインにCSSを利用するのは常識なわけで、UiBinderでも当然利用することができます。

        .important {
            font-weight: bold;
        }

  

基本的な記述方法は上記のようになります。呼び出し方に注意してください。また、設定するCSSはfield属性を設定することで、呼び出しのクラス名を変更することができます。以下は、MyStyleという名前を独自に付けています。

        .important {
            font-weight: bold;
        }

  

CSSの思想はデザインと画面設計を分離させることですから、UIBinderでも従来同様、CSSのスタイル情報を独立させて外部ファイルとして呼び出すことも可能です。src属性を利用します。もちろん、fieldの指定も可能です。

GWT：UIBinderにてDiv,Spanタグを使う

GWT：UiBinderでは、com.google.gwt.user.client.uiで定義されたタグを配置することができますが、純粋なHTMLのタグを埋め込むことも当然可能です。そして、それに対してもUIBinderに対応づけることができます。具体的には以下のような記述になります。

ui.XMLファイルの記述

Java側での記述

@UiField
DivElement div1;
@UiField
SpanElement span1;

このようにui:fieldで名前を定義することで、Java側でも呼び出すことができます。

UIBinderで各種Widgetを使ってみる～ラジオボタン、チェックボックス、リストボックス～

各種標準WidgetのUiBinderのXMLの記述方法について、現状把握していることを書いてみます。情報が少ないので、ちょっと間違っているかもしれません。とりあえずの参考にしてください。

リストボックス
項目をxmlで定義する方法はわかりませんでしたが、下記の記述でリストボックスの配置はできますので、あとはJava側で書けばよいかと、、、

ラジオボタン

• FormPanelの子要素として存在しないといけないようです。
• ラジオボタンのグループはnameで指定します。
• Javaからアクセスするためには、ui:fieldを指定します。
• Java側からは、ラジオボタンの選択部分はgetValue()で入手することになります。

 
 りんご
 オレンジ
 
 

チェックボックス
ラジオボタンのようにformPanelの子要素にしなくてもできました。下記のような項目を複数並べてgetValue()で選択されているかどうか取り出すことができます。

Labo

正しい使い方がわかり次第、随時、修正していきます。また、別のWidgetについても取り上げていきます。

GWTのUIBinderでコンポーネント化を試みる

GWTのUIBinderは、ただ単にUIの記述が楽になると言うだけでなく、UIの部品化（コンポーネント化）を容易に実現することができます。 具体的に言えば、UIBinderにて設計したインタフェース部分は、また別のUIBinderのところで呼び出すことができます。
例えば、あるページの本体構造を定義するMainFormのUI定義ファイルを以下のように定義されていたとします。

MainForm.ui.xml

    
        header
        
            left
            center
            right
        
    

こ の例では、「heder」の領域とその下に、「left」「center」「right」にエリアが並ぶことになります（便宜上、ラベルを配置しています が、、、）。

このヘッダ領域に表示する内容を別のUIBinderで下記のように設計したとします。
HeaderArea.ui.xml

    
    
    
        
試作システムのヘッダ
    

このようにUIBinderで定 義したUIを一部は、下記のようにすることでMainFormに記述することができます。

MainForm.ui.xml（変更後）

    
    
    
        
        
            left
            center
            right
        
    

こ のように、定義したUIBinderのクラスのパッケージをimportによりXMLのNamespaceに関連付け、利用するクラス名をタグ名として記 述することで、呼び出すことができます。こ れは、インタフェース部分の分業をはかる際に非常に強力になりますので、そういった意味でもUIBinderはおすすめだと思います。

GWT2.0 のUIBinderを試してみた（その２）

前回の記事以降いろいろ試行錯誤してわかってきたことがあるので、訂正も含めて改めて書きます（あの記事はなかった事にしてもらっても結構ですw）。Netbeansでは、最新のプラグインを入れていればUIBinderに対応しているので簡単に作成することができます（Eclipseでも同様です）。

UIBinder関連ファイルの作成
【新規ファイル】→【GWT UIBinder】を選択することで、xmlファイルとJavaファイルが作成されます。
XMLファイル
ここでは、ボタンを配置してみます。htmlPanelがベースになっていますので、そこに下記のようにボタンを追加します。

 

 
 
            ボタンー
 

Javaファイル
ここでは、ボタンにイベントを記述しています。

public class NewUiBinder extends Composite {
    private static NewUiBinderUiBinder uiBinder = GWT.create(NewUiBinderUiBinder.class);

    interface NewUiBinderUiBinder extends UiBinder＜widget, newuibinder=""> {
    }
    @UiField
    Button btn1;
    
    @UiHandler("btn1")
    void onClick(ClickEvent e) {
        Window.alert("ボタンが押されましたー");

    }


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

上記のJavaファイルのポイントは２点。

• @UiFieldアノテーションで、xmlで定義したwidget要素と関連付ける。
  注意1：同じ名前である必要があります
  注意2：各変数のそれぞれこのアノテーションを書かないといけません
• @UiHandlerアノテーションで、イベント貼付け

@UiFieldアノテーションによる記述については、特にプログラム中で呼び出しをしないのであれば、記述する必要がありません。つまり、わざわざ newでインスタンスを生成する必要がないということです。@UiHandlerアノテーションを利用したでのイベントの割り当てですが、 イベントの関数名はなんでもいいです。上記の場合は別にクリックイベントを拾いたいからといってメソッド名をonClickにしているのではありません。キャッチするイベントの種類を決定するのはメソッドの引数の型です。上記の場合は、ClickEventを引数の型にしているので、btn1に対するClickEventを拾っているのです。

最後、上記の方法で定義したWidgetの呼出し方法ですが、

final NewUiBinder uib = new NewUiBinder();
 RootPanel.get().add(uib);

というように、普通にWidgetを張り付ける方法でオッケイです。

以上のように、プラグインが自動生成するファイルを利用することで、効率良く開発することができます。UIBinderは必須の機能ですね。

GWT2.0のUIBinderを試してみた

2.0からの新機能であるUIBinderについて、試してみました。ネタ元は、本家のサイ トDeclarative Layout with UiBinderです。

本記事の改訂記事をアップしましたので、記述の方法についてはそれを見てください。

ファイル構成
○○○.ui.xml　
ここで ユーザインタフェースの定義をします。Java側で呼び出す際の変数名も指定します。スタイルシートの設定も可能です。

Hello, .

○○○.java

• UIObject を継承したクラスを宣言します。ui.xmlと同じ名前にしましょう。
• クラス内でUiBinderを継承したインタフェース （MyUiBinder）を宣言します。
• MyUiBinderを呼び出し、コンストラクタにてUIBindの初期化をします。
• @UiField アノテーションにより、上記xmlファイルで定義した要素と変数を関連付けます
  

public class HelloWorld extends UIObject { // Could extend Widget instead
  interface MyUiBinder extends UiBinder＜divelement, helloworld=""> {}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField SpanElement nameSpan;

  public HelloWorld() {
    // createAndBindUi initializes this.nameSpan
      
    setElement(uiBinder.createAndBindUi(this));
  }
  public void setName(String name) { nameSpan.setInnerText(name); }
}

わかりにくいのは、UIBinderを継承したインタフェース定義のところでしょうか？このインテフェース定義は、最終的にUiBind処理の初期化に利用 されます。ここで重要なのは、 extends UiBinder＜U,O＞のところの２つのパラメーターです。

• U はui.xmlファイルで記述しているエレメントのrootのタイプを記述します。
• O は@UiFields を所有するクラスを記述します。

ui.xmlとJavaのファイルの関連付け
次の 2つの方法があります。

• ファイル名を同じにする
• @UiTemplate("ファイル名.ui.xml")　と 指定する

後者については、interface定義をするところの直前に記述すればOKです。


MainEntryPoint クラスでの記述
普通にクラスのインスタンスを生成し、Elementとしてappendするという方法になります。

public void onModuleLoad() {
        HelloWorld helloWorld = new HelloWorld();
        Document.get().getBody().appendChild(helloWorld.getElement());
        helloWorld.setName("おちくん");
     
    }

---

ちょっと 触ってみて感想

今のところ、個人的には正直、このUIBinderの利便性についてはいまいち整理できてなく、

• 全部Javaでゴリゴリ 書きあげることができるGWTが好きだったので、タグを書くことになるのは個人的にはどうも、、、
• でも、複雑なレイアウトのUIを考え た場合、Javaで書いていくのはちょっと面倒な点はある。その点、UIBinderのやり方は直感的
• というか雰囲気的に StrutsとかJSFでやってるUIBindの方法と同じ感じか
• ui.xmlで記述するタグに付いてはちょっと勉強が必要だけど、
• ス タイルシートの変数も動的に変えられるというのは面白い
• 使いこなすにはちょっと勉強する必要があるかも。ただ、壁を乗り越えたら開発効 率があがる？

なんて、いろいろ思ったりしてます。まあ、Google様を信用して今後導入していこうかとは思ってます。