 |
|
| リッチクライアントを加速させるAjax開発環境「マスカット」の全貌 |
第４回：実践！マスカットアプリケーションの画面＆イベント作成
著者：NTTデータ 川田 洋平 2007/2/2
|
|
|
| 前のページ 1 2 3 4 次のページ
|
|
| イベントについて
|
続いてホテル検索アプリケーションのイベントを作成していきます。
ホテル検索アプリケーションのイベントは2つあります。検索ボタンを押した際のイベント（以下、検索実行イベント）と、ホテル一覧からホテルを選択した際のイベント（以下、一覧選択イベント）です。
まずは送受信内容がより簡単な一覧選択イベントから作成していきます。
|
| 一覧選択イベントの作成
|
一覧選択イベント発生時の動作は次の通りです。
- ホテル一覧の選択した行の1列目にある「ID」の値をサーバサイドに送信する。
- 対応するホテルの詳細情報がサーバサイドから返ってくる。
- その値をホテル詳細フレーム内のテキストボックスに代入する。
表2：一覧選択イベント発生時の動作
はじめに一覧選択イベントの発生元であるグリッドを選択します。続いて、Maskat Property Editor画面の左欄で属性が選択されていますが、「onclick」を選択してください（図9）。
図9：グリッドを選択して「onclick」を選択 （画像をクリックすると別ウィンドウに拡大図を表示します）
ここで表示される画面で、グリッドを「onclick」した際のイベント（つまり一覧選択イベント）を設定することができます。
設定後の画面を図10に示します。なお、以下の画面では、Maskat Property Editor画面を最大化表示しています。
図10：一覧選択イベントを設定した画面 （画像をクリックすると別ウィンドウに拡大図を表示します）
設定内容とその説明を表3に示します。なお、送信メッセージXML、受信メッセージXMLの詳細は次回改めて取り上げます。
| プロパティ |
値 |
説明 |
| remoteUrl |
../hotelSearch |
サーバサイドのプログラムのURLを指定。 |
| type |
remote |
通信タイプを指定。ここではリモート通信に設定。 |
| async |
true |
通信方式を指定。ここでは非同期通信に設定。 |
| [param] rootNode |
hotelID |
送信メッセージXMLのルート要素名を指定。 |
| [source] obj |
hotelDetailGrid |
送信するデータを持つGUIオブジェクトのname属性値を指定。ここではレイアウト定義XMLで示したgridのname属性値に設定。 |
| [source] fromkey |
0 |
上記objがグリッドの場合、値を取得する列を指定することが可能。ここでは1列目の「ID」列に設定（列指定は0-indexなので1列目は0となる）。 |
| [source] node |
id |
送信メッセージXML内に含める送信するデータのノード名を指定。 |
| [result] rootNode |
hotelDetail |
受信メッセージXMLのルート要素名を指定。 |
| [target] in |
detail |
受信メッセージXML内の、取得したいデータが含まれるノードのノード名を指定。 |
| [target] out |
hotelDetailText |
受信したデータを代入するGUIオブジェクトのname属性値を指定。ここではレイアウト定義XMLで示した（ホテル詳細フレーム内の）textのname属性値に設定。 |
表3：一覧選択イベント設定内容
|
| 検索実行イベント
|
検索実行イベント発生時の動作は次の通りです。
- 宿泊日、場所、部屋タイプ、宿泊料Maxの値をサーバサイドに送信する。
- 検索条件にマッチするホテルの一覧がサーバサイドから返ってくる。
- その情報をホテル一覧フレームのグリッドに代入する。
表4：検索実行イベント発生時の動作
一覧選択イベントと同様にイベントの設定を行います。まず検索ボタンを選択してからMaskat Property Editorのonclick画面で図11の通り設定します。
図11：検索実行イベントを設定した画面 （画像をクリックすると別ウィンドウに拡大図を表示します）
設定内容とその説明を表5に示します。
表5：検索実行イベント設定内容 （画像をクリックすると別ウィンドウに拡大図を表示します）
|
前のページ 1 2 3 4 次のページ
|
|
|
|
|
著者プロフィール
株式会社NTTデータ 川田 洋平
技術開発本部 ソフトウェア工学推進センタ エキスパート
同社の研究開発部門にてWebシステムの研究開発に従事。マスカットの開発には初期から携わり、オープンソース化後はマスカットプロジェクトのプロジェクト運営委員会(PMC)およびコミッタとして活動を続けている。
|
|
|
|
|
|
