logo

サイト内検索
ココログ最強検索 by 暴想

最近のトラックバック

無料ブログはココログ

« 2008年11月 | トップページ | 2009年3月 »

2009年2月

Ext GWT解説

Ext GWTはGWT(Googole Web Toolkit)上で動くRIA開発用のフレームワークです。
Ext GWTの入門編として少々解説します。

そもそもGWTとは

System_2


Ext GWTはGWT(Google Web Toolkit)のJava環境の元で動くライブラリーですが、GWT自体がどのような特徴を持ったものかを簡単に解説します。

GWTコンパイラ
Ajaxアプリケーションを開発する場合、通常クライアント上の実装はJavaScriptを使用することになります。GWTではGWTコンパイラを使用してクライアント上の実装をJavaで作成し、JavaScriptにコンパイルすることが出来ます。開発環境ではGWTが提供するHostedBrowserを使用することで、クライアント上の実装をJavaVM上で稼動させることが出来ます。これによりEclipse等のIDEを使用した通常のJavaの開発同様のデバッグが可能になります。
ただし、GWT1.5ではJava5.0をサポートしますが、クライアント上のJava実装では、使用可能なクラスに制限がある点を考慮しなくてはいけません。

クロスブラウザー対応
GWTコンパイラーは、IE、FireFox、Mozilla、Safari、Operaのそれぞれに対応したJavaScriptを作成します。これにより開発者は原則としてブラウザーによる互換性の維持を意識する必要がありません。

リモート・プロシージャ・コール(RPC)
クライアントのJavaプログラムはサーバー側のプログラムとの間でGWTの提供するRPCを通じてシリアライザブルなJavaオブジェクトをそのままやり取りすることが出来ます。

Ext GWT vs GWT Ext

ExtGWT(略称GXT)はRIA開発用のJavaScriptフレームワークで有名なExt JSのGWT版と理解することが出来ますが、ややこしいことに、おなじ位置づけのライブラリーとしてGWTExtというものもあります。GWTExtと ExtGWTの違いについて簡単にまとめてみると以下のようになります。

ExtGWT(GXT):

  • pure Java(GWT)で書かれている。したがってext.js自体を使用していない。つまり、ext.jsをGWTでリライトしたようなもの。
  • コンフィグオプションの概念なし。
  • GPL v.3
  • Ext Jsの開発部隊が作っている。


GWTExt:

  • GWTのJSNI(JavaScript-Java間のインターフェース機能)を使用してext.jsのJavaScript自体を使用して動く。つまり、ext.jsをJavaでWrapしたもの。
  • コンフィグオプションでコンポーネントを定義することも可能
  • 経験上、使いこなすのにはJavaScriptの知識とJavaScript的根性?が必要。
    (JavaScriptに行ったまま落ちたりするので)
  • LGPL
  • Sanjiv Jivan氏 作


↓ココに両者を比較した記事があります。
 http://roberthanson.blogspot.com/2008/04/gwt-ext-vs-ext-gwt.html


Java Bean Support with Ext GWT

GXTのDataパッケージにはValueObjectをGridやListに表現するための仕組みが多くあります。
特にGXTの特徴として挙げられるのがGXT1.1よりサポートされたJava Beanのサポート機能です。

Javaの世界では一般に値を保持するオブジェクトとしてJava Beanが使用されます。これはプロパティの呼び出しにgetter(あるいはsetter)を使用する方法です。例えばnameというプロパティを読み出すにはgetName()メソッドを呼び出します。Java Beanを使用しない方法ではMap(連想配列)を用いる方法があります。この場合nameというプロパティを読み出すにはget("name")メソッドをを使用します。この方法は一般のJavaScriptでの方法と同様です。後者は呼び出すプロパティをプログラムから動的に変えることができるし、Mapの場合getKeySet()メソッドを使用することにより、そのオブジェクトの持っているプロパティの一覧が入手できるので、どの型のオブジェクトを扱うか事前に予想できないケースには後者の方法を用いることになります。一方、後者の場合、オブジェクトに存在しないプロパティを呼び出すようなエラーが実行時に初めて発覚することになります。型に厳格な言語であるJavaの特性を考えると、オブジェクトの型が事前に特定できるケースには前者の方法を使う方が正道であると言えます。

Before



従来のサーバー上でのJava開発の場合、一般のプログラムコードはJava Beanからgetter(あるいはsetter)経由でプロパティにアクセスし、一部の汎用性を持たせる箇所(フレームワークや部品)では、JavaのReflection APIを用いて汎用的にプロパティにアクセスするのが通常だと思います。
ところが従来のGWTのクライアント環境ではJavaのReflection APIが使用できないため、汎用的な部品(例えば任意のValue Objectを使用してGridに表示するようなもの)をクライアント作成するにはJava Beanは使用できないことになります。打開策としては、サーバー側でJava BeanをMap等にあらかじめ変換した上でGWTのRPC経由でクライアント側に送信し、クライアント側のプログラムは専らMapをValue Objectとして使用するというのが結論になります。Javaの一般の開発者からみると、この方法には違和感があり、GWTのクライアント環境の制約というのを意識することになります。

After4



簡単に言うとGXT1.1のJava Beanのサポートは、クライアント側でJavaBeanを必要に応じてModelDataというget(xxx)メソッドでプロパティにアクセスできる後者のタイプのオブジェクトに変換する事が出来る機能です。GXTのGridやListView等の部品はModelDataを与える事で汎用的にデータを目に見える形に出力させます。これらの機能によりGXT1.1ではサーバー側と同様のJava Beanをクライアント側でも制限無く使用することが出来る訳です。
この件に関しては、Java Bean Support with Ext GWTに具体的なコードの例があります。

LayoutとLayoutData

GXTの画面レイアウトを設定するために使用されるLyoutクラスとLayoutDataクラスに関して少々解説します。

LyoutクラスとLayoutDataクラスおよびそのサブクラス

Layout

GXTの画面は大雑把にいうとLayoutContainerの上にComponentを貼り付けることで構成されています。GXTのサンプルにあるように、アコーディオン、ボーダー、フォームといった様々なレイアウトが実現できる訳ですが、これらは個々にそれを実現するためのクラスがある訳ではなく、レイアウトの種類はLayoutContainerにセットされるLayoutクラス(そのサブクラス)の種類によって決まります。LayoutクラスのオブジェクトにはLayoutContainerがレイアウト全体を描画するための属性が設定されます。その際、複数のComponentがLayoutContainer上に存在する場合、個々のComponentごとにレイアウトの属性を与えるためにはComponent単位にも情報を持つ必要があります。この情報を保持するためのクラスとして各Layoutクラスの種類に対応するLayoutDataクラス(そのサブクラス)があります。LayoutオブジェクトとLayoutDataオブジェクトの組み合わせでレイアウトの特性が決まるわけです。

Layout3

例としてLayoutクラスのサブクラスFormLayoutのdifaultWidthプロパティを設定することでそのフォーム上のFieldすべての幅を合わせることが出来ます。一方、特定のフィールドの幅だけ異なる値にしたい場合はそのComponentのFormData(LayoutDataのForm用のサブクラス)のwidthプロパティを設定することによって可能になります。

D-RexGXTのデモ動画

D-RexGXTで画面設計をするデモの動画を作成しました。

FormLayoutのLayoutContainorを二つ作ってColumnLayoutのContentPanelに乗せて作ります。
クリックした後少々始まるまで時間がかかります。

ExtGWT用の画面開発ツールD-RexGxtを公開しました。

D-RexGxtをSourceForgeから公開しました。
http://sourceforge.jp/projects/drex/
ようやく、実用レベルのツールに仕上がったという感じです。
画面イメージ↓

Drexscreen_3


もしあなたがJavaプログラマーでリッチインターネットアプリケーションを開発したいと思ったら、ぜひExtGWTを試してください。そしてExtGWTで開発する気になったら、間違いなくD-RexGxtが役に立ちます。
GWT(Google Web Toolkit)およびExtGWTはAjaxをオールJavaでクラインからサーバーまで作れる点で画期的だと思うけど、HTMLでなく、プログラムで画面のデザインをするというのは予想以上につらいものです。(JavaScriptでも同じと思うが)
入れ子になったオブジェクトを複雑に組み合わせて、属性も設定して、という感じのソースを見ても画面イメージは浮かばないし、動かしては確認また修正と繰り返すのは忍耐を強いられます。
そこがD-Rexを作った理由で、これならブラウザーでの結果を見ながら貼り絵感覚でデザインできるのでAjax開発のハードルが随分下がるのではないかと思っております。
GWTを使い始めてからExtJS→GwtExt→ExtGWT(ややこしい)とあちこち彷徨って来ましたが、ExtGWT+D-RexGWTの組み合わせでようやく楽しく開発できそうな気になってきました(自我自賛)。
jarファイル等はSourceForgeの方にアップしてありますが、別にダウンロードしなくてもサーバーで公開しているので以下のURLでフル機能を試せます。
http://www.sweetie.atnifty.com/D-RexGxt2/
なお、http://drex.sourceforge.jp/に簡単な操作マニュアルがあります。

ExtGWTに関してはこちら。

http://extjs.co.jp/

ExtGWTの定番開発ツールとしてExtJsと共に発展していけたらと願っております。
D-RexGxtのサポートはこのブログで出来るだけやっていく予定ですのでご意見をお待ちしております。

« 2008年11月 | トップページ | 2009年3月 »