2009年12月11日金曜日

Eclipse PluginではじめてのGWT UiBinder

Eclipse のGoogle Plugin の 1.2.0.v200912062003 ではGWT2.0の開発がサポートされています。
 GWT2.0の新機能であるUiBinderを利用した開発支援機能も用意されており、お手軽に試すことが可能です。Eclipse3.5.1(Java6)で実際に動かしている様子を紹介してみたいと思います。
 ※Eclipse3.5でのインストール方法についてはURLのパスを3.5に変更するだけでOKです。また英語のサイトでは情報が更新されています。
 まず、Eclipse上で新規のプロジェクト作成を行います。メニューから「ファイル」→「新規」→「Webアプリケーションプロジェクト」を選択し、「Google Webツールキットを使用します」にチェックを入れて作成します。
 (パッケージ名).clientと(パッケージ名).server以下にGWTのサンプルコードが生成されます。但し、こちらはUiBinderを利用してません。ですので、新たにウイザードを起動します。プロジェクト・エクスプローラー上の(パッケージ名).client上で「ファイル」→「新規」→「UiBinder」を選択します。
 「generate sample contents」にチェックが入った状態のまま、名前を登録して「完了」をクリックすると、下記の画像のように(ファイル名).ui.xmlとファイル(ファイル名).javaの二種類のファイルが生成されます。
 ASP.NetのWeb Formのコードビハインドとなんだか似ていますね。*.aspx と *.aspx.cs(C#の場合) が*.ui.xml と *.javaに対応するようなイメージでしょうか。
 *.ui.xml側でUIの定義を行います。タグ内でCSSライクなスタイルの指定が出来ます。作成される雛形ではボタンが一つだけ定義されています。g:Buttonのタグ内で ui:field="button" と記述されており、これが*.java側の @UiFieldアノテーションのButton button; に対応しています。
 尚、Javaのエディタ上で*.ui.xmlにUIの定義が無いコンポーネントを記述すると下記の画面の様に警告をしてくれる補完機能が備わっているので、単純なスペルミスは回避出来るのではないでしょうか。
 残念ながら、.ui.xmlに定義を追加してもJavaには反映されないようです。*.ui.xml と *.java の2WayなWYSIWYGエディタが欲しいですね。
 また、ui.xmlとJavaのファイルの紐付けは同じパッケージ内の同じファイル名であれば、必要ないようです。もしファイル名が異なる場合は、Javaのソースに定義されているinterface上にアノテーションで @UiTemplate("ファイル名.ui.xml") と定義すれば紐付けされます。
 次に、この雛形をまず実行してみたいので、エントリーポイントとなるJavaのファイル、エントリーポイントを指定するモジュールの*.gwt.xmlファイル、HTMLファイルを作成します。
 こちらもウィザードが用意されています。メニューの「ファイル」→「新規」から「エントリーポイント」、「モジュール」、「HTMLページ」が各々、作成出来ます。
 エントリーポイントの*.javaファイルにはonModuleLoad() の空のメソッドが作成されていますので、UiBinderで作成した*.javaファイルのインスタンスをRootPanelに追加します。この作業は従来のGWTと同じですね。
 次に作成したエントリーポイントの*.javaファイルに対するモジュールを作成します。この際に、Inherited modulesを追加する必要があります。下記の画面の様に com.google.gwt.uibinder.UiBinder を指定して追加します。
 生成された*.gwt.xmlファイルにエントリーポイントの*.javaファイルを記述します。
 次いで、プロジェクト・エクスプローラー上の*.gwt.xmlファイルを選択した状態で対応するHTMLページを追加します。そしてWebアプリケーションの実行を行い、ブラウザ上で確認します。
 Google Pluginの機能が今後、充実してくれば、先行のFlex BuilderやVisual Studioの様にUIとコードが分離した状態での開発が一層、楽になるのではないでしょうか。
 P.S GWT2.0のリリースが asahi.com で紹介されていました。 GoogleのGWT2.0に対する力の入れ具合?が伺えます。

0 件のコメント:

コメントを投稿