 |
|
| リッチクライアントを加速させるAjax開発環境「マスカット」の全貌 |
第３回：実践！マスカットアプリケーションの画面作成
著者：NTTデータ 川田 洋平 2007/1/23
|
|
|
| 前のページ 1 2 3 4 次のページ
|
|
| 検索条件フレームをプレビューする
|
ブラウザ版IDEでは現在作成中の画面をプレビューする機能がありますので、ここで試してみましょう。ツールフレームのタイトルバー上の一番左のボタン（図6）をクリックしてください。
図6：プレビューボタン
別ウィンドウが起動し、作成中の画面を確認することができます。確認できたら、このプレビュー画面は閉じてかまいません。
図7：作成中の検索フレームのプレビュー （画像をクリックすると別ウィンドウに拡大図を表示します）
|
| ホテル一覧フレームとホテル詳細フレームを作成する |
続いてホテル一覧フレームを作成します。検索条件フレームと同様にまず外枠となるフレームを配置します。次にそのフレーム上に表（grid）を配置します。すると「Grid properties」というタイトルのポップアップウィンドウが表示されます。
ポップアップウィンドウ内にある「Rows number」には、これから作成する表の列数を入力します。今回の場合は5列（「ID」「ホテル名」「場所」「部屋タイプ」「宿泊料」）なので、半角数字で「5」と入力し、Enterキーを押します。すると図8のように各列の設定を行うことができるようになります。
図8：表の列数を指定すると、各列の設定ができるようになる （画像をクリックすると別ウィンドウに拡大図を表示します）
ここでは、特に変更せずポップアップウィンドウの「Add」ボタンをクリックします。すると5列の表が作成されます。
図9：5列の表が作成される （画像をクリックすると別ウィンドウに拡大図を表示します）
なお、表が大きすぎてフレームに収まりきれていませんが、ここではこのままでかまいません。なお変更は図8のポップアップウィンドウまたは後述する「属性の設定」で変更することができます。
ホテル詳細フレームは、2つのフレームを作成した手順と同様の手順で、外枠のフレームを作成し、その上にテキストボックス（text）を配置すれば完成です。
図10：フレームにテキストボックスを配置すればホテル詳細フレームは完成 （画像をクリックすると別ウィンドウに拡大図を表示します）
いかがでしたでしょうか。慣れてくればこの程度の画面は2分もかからず作成することができます。
|
| レイアウト定義XMLを出力する |
最後にこれまで作成した画面のレイアウト定義XMLを出力します。ツールフレームのタイトルバー上の右から3つ目のボタン（図11）をクリックしてください。
図11：ツールフレームのタイトルバーにあるレイアウト定義XML出力ボタン
ポップアップウィンドウが表示されるので、レイアウト定義XMLを保存するファイルパスを指定し、「save」ボタンをクリックします。指定したファイルパスに以下のレイアウト定義XMLが生成されます。
（画像をクリックすると別ウィンドウに拡大図を表示します）
以上のようにブラウザ版IDEを利用すれば、マウス操作のみで簡単にマスカットアプリケーションの画面（レイアウト定義XML）を作成することができます。
|
前のページ 1 2 3 4 次のページ
|
|
|
|
|
著者プロフィール
株式会社NTTデータ 川田 洋平
技術開発本部 ソフトウェア工学推進センタ エキスパート
同社の研究開発部門にてWebシステムの研究開発に従事。マスカットの開発には初期から携わり、オープンソース化後はマスカットプロジェクトのプロジェクト運営委員会(PMC)およびコミッタとして活動を続けている。
|
|
|
|
|
|
