logo

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

最近のトラックバック

無料ブログはココログ

« 2009年2月 | トップページ | 2009年4月 »

2009年3月

GXT (Ext Gwt)のMVCフレームワーク

以前このブログにアップした、GXTのサンプル・デモ環境「Explore」というアプリケーションはGXTが持っているMVCフレームワークのもとで動いているようです。GXTがこのようなフレームワークを持っていることはこのアプリケーションを見て初めて知りました。ネット上にもこれに関するドキュメントは見当たらないので、ソースを追って概要は見当が付いたのでここで解説します。ただし、この内容はあくまで私がソースを見て推測したものなので正しいかどうかは確証はありません。

何のためのフレームワークか?

一般論としてMVCフレームワークというのはイベントドリブンな処理をどのような役割分担で行うのが良いか、という観点で設計されたもので、ViewからあがったEventをControlerが受けてModelの準備を行い次のViewに制御を渡していくという仕組みを指します。GXTのMVCフレームワークもイベントに対する処理をMVCの役割分担にあわせて処理するためのと考えられます。
ただし、今回の対象の「Explore」というアプリケーションではModelに相当する部分は見つからない、というかはっきりしないので、私が勝手に想像して付け加えたのが下の図です。(青字の部分が勝手に加えたModelの部分)Modelが必要な場合は、ControlerのhandlEventでModelを用意してeventにセットしてViewがそれを表示するというのが良いのではないかと思います。

Gxtmvc_2

この図の例は右側のTabPanelの特定のTabを選択した際に、左側のNavigationパネルのTreeの選択が連動して選択される際の動きを示しています。青字の部分は実際にはありません。順番に追って説明すると以下のようになります。
①ContentViewがTabの選択イベントを拾ってentryに必要なデータを設定した上でTabChnageという識別付きでDispacherのforwardEventを呼ぶ
②DispacherはAppEventのインスタンスを作成し、あらかじめEventの識別ごとに登録されているControlerの中から該当の識別に対応するControlerのhandleEventメソッドを次々に呼んでいく。
③呼ばれたNavigationControlerは自分の保持しているViewとAppEventオブジェクトを引き数にスーパークラスのforwardToViewメソッドを呼ぶ。
④スパークラスControlerは必要であれば引数のViewを初期化してViewのhandleEventを呼ぶ
⑤Viewはeventに応じた表示を行う(この場合は該当のTreeの要素を選択状態にする)
なお、①のforwardEventメソッドは forwardEvent(AppEvent event)という具合にAppEventをあらかじめ作成して渡すことも出来ます。この場合、appEvent.historyEvent=true、appEvent.token=トークン名と設定しておくとGWTのHistoryTokenが記録されます。ブラウザーの戻るや進むボタンで該当のTokenが発生すると、AppEventが復元されて、Tokenに対応した表示を再現することができます。

このフレームワークを使用するメリットは?

まずViewがイベントに対応して表示を変えるようなケースで、イベントの発生元に直接表示側のViewを操作するコードを書いてしまうと、ViewとView(Eventの発生元および表示側)との依存関係が出来てしまいます。逆に言えばこのフレームワークを使用すればお互いのView同士の依存関係が無いままViewからのイベントに別のViewを関連付けることが出来るという事です。この例では、ContentViewとNavigationViewはお互いを知りません。後からViewを追加する場合でも既存のコードに影響しないで済むとも言えます。
また、eventオブジェクトに特定の指定をすることで、HistoryTokenが記録されるので、ブラウザーの戻るや進むボタンにeventを簡単に連動することができる点もメリットと言えます。
ただし、すべてのイベントに関してこのフレームワークを使用する必要は無いと思います。例えば、イベントの対応が発生元のViewの中で明らかに完結しているような場合は通常通り、該当イベントの内部で処理してOKでしょう。
つまり、このフレームワークが有効なのは、
①イベントの発生元とイベントにより表示を変化させるViewが異なる場合。特に、複数のViewがイベントに反応するようなケース。
②イベントをHistoryTokenとして記録したいケース
ということになります。

ExtGwtサンプルページのEclipse Project

-- 5分で始めるGXT --

ExtGwtのサンプルは以下のページにあります。
http://extjs.com/explorer/#overview
このページの環境をEclipseプロジェクトにまとめたものを作りました。以下の手順でEclipseにインポートすればすぐに動きます。
EclipseでJava開発をしている方ならGWTやExtJSの経験がなくともすぐに、ExtGwtを試せます。(GWT・GXT組込済み)
注:
*Windows環境用です。Linux等の場合は、その環境用のものにGWTを入れ替える必要があります。
*当方はEclipse3.4で確認しています。

Explorer1.2.1.zip

インポート手順

上記リンクからzipファイルをダウンロードして、解凍します。Eclipseのworkspaceの下に解凍するのが良いでしょう。

eclipseのメニューからファイル→インポートを選択

Ecimport_2

既存プロジェクトをワークスペースへを選択して次へをクリック

Ecimport2

ルートディレクトリーの選択に解凍したディレクトリーを指定すると、プロジェクト「Explorer」が現れますので、完了をクリック。

以上で、「Explorer」という名前でインポートされます。

実行するにはメニューより 実行→デバッグの構成 を選択します。

Ecdebug

Javaアプリケーションの下の「Explorer」を選択してデバッグをクリックします。

Ececphosted

GWTのHostedBrowserが立ち上がってブラウザー内にサンプルアプリケーションが起動します。この状態で、Eclipse上で通常のJavaのコードと同様にデバッグできます。

なお、このプロジェクトでは、com.extjs.gxt.samples.explorer.client.ExplorerのonModuleLoadメソッドが最初に呼び出されます。このメソッドを自分なりに編集していけばGXTの機能を勉強することができるとおもいます。

« 2009年2月 | トップページ | 2009年4月 »