logo

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

最近のトラックバック

無料ブログはココログ

GXT (Ext Gwt)

第2回Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会を開催します

第1回から2ヶ月ぶりですが、第2回Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会を開催します。

* タイトル:Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会
* 日時:2009年09月09日(水) 19:00~21:00(18:30開場)
* 募集人数:20名
* 場所:東京都新宿区百人町2-4-8 ステアーズビル(株)ケーピーエス 4F セミナールーム
*  (http://www.kpscorp.co.jp/company/access.html)
* 参加費:無料(懇親会は有料(1000円))
* アジェンダ:
1.GWTアプリケーション開発の基本 その2 ((株)ケーピーエス 伊東)
前回に引き続き、GWT開発の基本を解説します。(内容調整中)
2.App Engine for Javaで稼動するフレームワーク Slim3を試してみた ((株)ケーピーエス 須田)
Seasar2でおなじみ ひがやすお さんのフレームワーク Slim3を試してみました。App Engine for Javaとの関連も注目です。
3.Ext GWTとJava Beanの関係 ((株)ケーピーエス 平)
Ext GWTはブラウザーで稼動するコードでJavaBeanが使用できます。この点はExt GWTの大きな特徴だと思いますのでその辺の話を…

例によってどなたでも参加できます。

参加をご希望の方はこちらから↓

http://extjs.com/forum/showthread.php?t=78259

よろしくお願い致します。

第一回Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会 2009年7月度 を開催しました

2009年7月8日 第一回Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会を開催しました。
今回、第一回ということでしたが、21名の方々に参加いただき、楽しい勉強会になりました。
当日、発表された資料を公開します。

はじめに...


GWTアプリケーション開発の基本


その1  ~ DBからデータを読んでGridに表示する ~

GWTを使用してDBからデータを読みGridに表示するまでを実際のソースを交えて説明します。

Gwt1
View more documents from katsu.taira.

Google App Engine for JavaでGXT2.0 - Explorerを動かしてみよう

Ext GwtのサンプルプログラムであるExplorerをGoogle App Engine for JavaにDeployする手順を説明します。ITエンジニア1年生の三浦君が悪戦苦闘して得たノウハウが満載されています。


App Engine for JavaのJDO使用上の考慮点

GWT-Seaser2-Hibernate(postgresql)で構成されたアプリケーション「

基本情報技術者試験 午前問題特訓システム」をGAEのBigtableに対応するJDOに書き換えた経験から得た

、JDO使用上の考慮点の数々を説明します。

来月も引き続き勉強会を企画したいと思っております。ご意見、ご希望、また発表希望等ありましたらコメントください。よろしく。

既存のシステムをGAEjに載せ換えてみた

こんにちは、社員Mです。
入社一年目、つまり去年研修で作成したアプリをGAEjに載せ換えてみました。

『基本情報技術者試験 午前問題特訓システム For GAEj』
また比較用の旧版も置いておきます。

また、日本語版のAppGallery にも紹介文を投稿しておきました。
>>紹介文はこちらです。

結構時間がかかりましたが、当時気付かなかった問題も含めて対処してみました。

以上。

Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会を開催します

社員Mです。
タイトル通り、GWTとGXT、および最近話題のGoogle App Engine for JAVAの勉強会を開催します。

【Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会を開催します】

* タイトル:Google Web Toolkit/App Engine for Java/Ext Gwt 勉強会
* 日時:2009年07月08日(水) 19:00~21:00(18:30開場)
* 募集人数:20名
* 場所:東京都新宿区百人町2-4-8 ステアーズビル(株)ケーピーエス 4F セミナールーム
* (http://www.kpscorp.co.jp/company/access.html)
* 参加費:無料(懇親会は有料(1000円))
* アジェンダ:
1. GWTアプリケーション開発の基本 その1((株)ケーピーエス 伊東)
   (DBからデータを読んでGridに表示する)
2. GXT ExplorerをApp EngineにDeployしてみる((株)ケーピーエス 三浦)
3. App Engine for JavaのJDO使用上の考慮点((株)ケーピーエス 平)

今後、Extに限らず、GWT/GAEj/Gwt Extに関する話題を取り上げていくつもりです。

なお、今回第一回ということで発表者がすべてケーピーエスからという事で少々手前味噌ではございますが、
今後は各方面の方々にお願いできればと思っています。

参加をご希望の方はExt JS勉強会同様このスレッドに参加表明をお願いします。
  (返信に「参加」とか「+1」とかだけで結構です)

  参加登録スレッド: http://extjs.com/forum/showthread.php?t=71329
  (参加登録を行っていただく前にExt JS Forumへの会員登録(無料)が必要となります。登録されたくない方、
 あるいはできない方は、メールにてtaira@tky.kpscorp.co.jpまで参加のご連絡をください)

 

よろしくお願い致します。

※上記に示されているフォーラムの該当する記事は「コチラ」です。

私こと社員Mも講師として参加することになりました。
先達の皆様へ、ちゃんと教えられるように勉強しておきます……。

以上、参加される方は当日にお会いしましょう。

GAEjを使ってみた。

【2009-06-05:修正 ・ エラー対応に「Enhancedエラーを解決する】を追加しました】

おはこんばんちは、社員Mです。

今回GWT1.6&Gxt2.0対応中のD-RexをGAEjで動かしてみました。
動かすまでに発生した難関等まとめましたので、今後の参考にでもどうぞ。

なお、アカウント取得やデプロイの流れ等は 『コチラ』 を読めばOK。






【サーバーにデプロイした実物】
『D-RexGXT2 GWT1.6&GXT2.0移行途中版』
※デプロイ制限の関係上、アイコン画像と一部矢印等が表示されません。
※移行途中なので大変申し訳なく、バグ対応も完全じゃありません・・・・・・。






【前提】
GAEjには現在、合計1000個のファイルしかアップできない
1ファイルあたりの重さは10M未満であること。
アップできるアプリケーション(制作したプロジェクト)は
 1個のアプリケーション に対し、 
 1~10個のバージョン を設定してアップする。
バージョンを変えれば別のプログラムとして動作する。
    ※BigTableはアプリケーションで共有するのか別なのか、そのあたりはまだ試してません・・・。
アプリケーションを増やす場合、その都度申請が必要。
ただし1個のアカウントに対し10個のアプリケーションまで取得可能です。
    ※また2009/05/08現在、ユーザー数は最大2万5千に限定されています。






【アカウント取得時の注意】
アカウント取得するには、まずG-Mailのアカウントを取得してください
※必ずG-Mailを使う必要はありません。
 通常のメールアドレスでもアカウント取得は可能です。
 ただし、G-Mail以外だと、そのメールアドレスをGoogleに登録する必要があります。
 心配だ・管理を分けたいという方は、G-Mailを。
 特に心配でもない方は、ご自分のメールアドレスを使用してください。

その後、アプリケーションを取得しますが、この承認に『一日』かかります。
 ※承認メールがたまに届かない場合があるようなので一日たったらデプロイを試してください。

上記承認には、初回のみ携帯電話(のメールアドレス)が必要です。
 ※ハードコピーとれなかったんですが、@docomo.co.jpなり@vodafonなり出てくる場面があります。


メールアドレス :user@domain.cco.uboaの場合、
ユーザー名   :user
ドメインがどうの:@domain.cco.uboa

となります。




【web.xmlの書き方について】
以下要項を満たせばOKです。

1.<web-app>タグを以下のものに書き換える。  ※web-app句は、変えなくても変わらないことが分かりました。

<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">

2.サーブレットマッピングのURL部を一行にまとめる。

Good    ><url-pattern>/drexgxt2/setAttribute</url-pattern>
Bad     ><url-pattern>
           /drexgxt2/setAttribute</url-pattern>

3.サーブレットマッピングのURL部は、必ず/か*で始める

Good    ><url-pattern>/drexgxt2/setAttribute</url-pattern>
Bad     ><url-pattern>drexgxt2/setAttribute</url-pattern>
                      ↑↑↑






【デプロイ時の注意】
デプロイ時にjava.lang.StackOverflowErrorになる場合があるため、以下のようにデプロイしてください。
コンパイルについては、GWT 1.6の環境設定も参考にしてください。

1.appenging-web.xmlを編集する(アプリケーション名とバージョンの設定
    1’.以降、デプロイ前にはアップするバージョンの確認をすること。(上書き対策)

Deploy1

2.HostedBrowserでプロジェクトを動かす。
3.HostedBrowserのコンパイルボタンからコンパイル。
    ※コンパイル時、VM引数に -Xss1024k を設定してください。
4.開いたウィンドウを全部閉じておく。
5.プロジェクトをリフレッシュ。
6.プロジェクトを右クリック>プロパティー>Google>Web Toolkit>チェックを外す。
    >6’.念のためリフレッシュ
7.プロジェクトを選択状態にして、デプロイボタン(ロケットのようなアイコン)からデプロイ。
    ※要求されるパス等は、Gmailと一緒です。
    ※アプリケーション名とバージョン設定は、7で開くウィンドウからも設定可能です。

Deploy15_2

Deploy2

Deploy3_2






【エラー対応】

  • ・ java.io.IOExceptionで、400 Bad Request、かつ Unable to assign value '\' to attribute 'url':等と出る場合

Web.xmlの書き方を見直してください。

  • ・ Max number of files and blobs is 1000.

デプロイする合計ファイル数が1000件超えています。
制限は1000件以内なので、頑張ってファイル数を減らしてください。
なお、GWTの場合はWarディレクトリ内のファイルです。
  ※つまりデプロイ時に使うファイルを消せっちゅうことですね。

[Tips : 削除のご注意]
    対象のファイルには画像等も含まれます。
    1000件に選ばれている基準はイマイチわかってません。
    ファイルを削除する場合、StaticとApplicationでかぶっているファイルがあるようです。
     つまり一件削除すると双方の総量が減るパターンがあるのでご注意。

  • ・ GWT1.6 Eclipseプラグインで、コンパイルボタン押しても反応しない。

バージョン1.0.1ではウンともスンとも言いません。
バグかと思われます。

  • ・ デプロイを強制キャンセルしたとき、ロールバックしてくださいと出る。

デプロイ中にEclipse落とす等、(私のように)ヤッチマッタ人に発生します。
もちろんロールバックが必要ですが、どこでやるか不明ですね?
下記【エラー対応EX1 : ロールバックの方法】をどうぞ。

  • ・ DataStore.Class does not seem to have been enhanced.といわれる。

プロジェクトのファイル数が多すぎるため、DataStoreクラスを認識できていないようです。
この場合、ORMからDataStoreがあるパッケージを指定する必要があります。
下記【エラー対応EX2 : Enhancedエラーを解決する】をどうぞ。


【エラー対応EX1 : ロールバックの方法】
通常のプラグインからでは出来そうにないので、コマンドプロンプトを使用します。
使用するコマンドファイルは『appcfg.cmd』です。

1.    プロジェクトの『appengine-web.xml』に、ロールバック要求しているアプリケーションとバージョンを指定します。
2.    コマンドプロンプトを起動します。
3.    cdコマンドで、最新のGAEjSDKの …/appengine-java-sdk/bin へ移動してください。
   例:cd C:\appengine-java-sdk\bin
   ※:Eclipseフォルダを『appengine-java-sdk』で検索すればHitします。

4.    appcfg.cmdを起動します。以下のように記述してください。

appcfg.cmd rollback [1.のファイルがあるwarフォルダのパス]

5.    記述後エンターを押せば、自動的に完了します。

※WarディレクトリがProgram Files下だとエラーになる場合があります。ご注意!


【エラー対応EX2 : Enhancedエラーを解決する】
このエラーはORMからDataStoreがあるパッケージを指定する必要があります。
プロジェクトを右クリック > プロパティー > Google > App Engine > ORM
から、該当の設定ページへ移動してください。

Orm

ORM項目にある、『追加』 または 『修正』から、DataStoreが保存されているパッケージを指定してください。

その後DataStoreを認識させるため、任意のファイルを更新し、上書き保存してください。
 ※この更新は改行→BSで改行消す→上書き保存で構いません。
保存したとき、コンソールに『 Enhancer completed 』の文字が出ればOKです。



Ex.ヘルプの見かた
appcfg.cmdのみで実行するとエラーを吐いて、一覧を出してくれます。
また 『 appcfg.cmd help [ヘルプを見たいアクション名] 』 でも見ることができます。
ちなみにこのコマンドからデプロイ(UPLOAD)することも可能です。

以上。参考程度にどうぞ。

GXT(Ext Gwt)2.0移行上の考慮点

GXT 2.0がとりあえず出ましたが、ためしに移行した結果の考慮点をとりあえず列挙します。

移行方法

  • gxt.jarをGXT 2.0のものに入れ替え
  • gwt.xmlファイルまたはHTMLに記述してあるext-all.cssをgxt-all.cssへ変更
  • 上記cssファイルおよびその他イメージ等のリソースがjarファイル内にあったものが無くなっている模様。よって、GXT2.0のダウンロードファイル内のresourcesのディレクトリー以下の内容をそのまますべてGWTプロジェクトのpublicディレクトリーの下にコピーする必要がある。(resourcesディレクトリーそのものは含まない)
  • 新機能chart関連を使用する場合は、gwxt.xmlに以下の項目を追加

        <script src='flash/swfobject.js'></script>
なお、GXT 2.0のダウンロードファイル内にあった2.0_migration_guide.htmlを下に添付しておきます。この外にも気づいた点があれば追記します。

Breaking API Changes

  • MyMessages renamed to XMessages.
  • Added LoadConfig interface, ListLoadConfig now extends LoadConfig. With this change, and properties of the load config object will be passed as request parameters when using a HttpProxy or ScriptTagProxy.
  • Removed AppEvent type parameters, added unkeyed getData and setData.
  • Removed LoadEvent type parameters, add getData and setData methods.
  • Removed parent generic from TreeModel.
  • All public event fields replaced with getters / setters.
  • BaseEvent doit field replaced with setCancelled and isCancelled methods.
  • Replaced int based event types with EventType class.
  • Removed setDecimalSeparator / getDecimalSeparator from NumberField.
  • XDOM moved from com.extjs.gxt.ui.client to com.extjs.gxt.ui.client.core.
  • Events and KeyboardEvents moved from from com.extjs.gxt.ui.client to from com.extjs.gxt.ui.client.event.
  • All public fields is Resizable converted to getters and setters.
  • ext-all.css renamed to gxt-all.css. Both images and css folder moved into new gxt folder.
  • Ext GWT CSS and images are no longer on the classpath. See the resources folder in the GXT distribution.
  • Themes not require the full url for the theme file.
  • Removed TextToolItem, buttons can be added directly to toolbars.
  • PagingToolBar moved to toolbar package.
  • PagingToolBar is now a ToolBar, rather than wrapping one.
  • ContentPanel (Windows, Dialog) now uses a ToolBar for its buttons. New ToolBar looks and behaves like a button bar.
  • Controller forwardToView methods changed from static to instance methods.
  • keepSelected boolean added to selection methods in selection models.
  • XmlReader changed to return any data type.
  • Added XmlLoadResultReader which returns ListLoadResult instances.
  • JsonReader changed to return any data type.
  • Added JsonLoadResultReader which returns ListLoadResult instances.
  • Removed JsonTreeReader.
  • Removed public field XDOM.isVisibleBox - use GXT.isBorderBox instead

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の機能を勉強することができるとおもいます。

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に乗せて作ります。
クリックした後少々始まるまで時間がかかります。