TOP
＞
システム開発
＞ さらに使いこなすためのポイント
リッチクライアントを加速させるAjax開発環境「マスカット」の全貌
第３回：実践！マスカットアプリケーションの画面作成
著者：
NTTデータ 川田 洋平
2007/1/23
前のページ
1
2
3
4
次のページ
さらに使いこなすためのポイント
ここまで説明した手順は、基本的な画面作成の手順です。以降、ブラウザ版IDEを利用して画面の作り込みを行う方法と作成したファイルをサーバに格納して動作確認を行う方法について説明します。
属性の設定
ここでは、ブラウザ版IDEによる属性の設定方法を解説します。属性の設定方法は、GUIオブジェクトを配置する前に設定する方法と配置した後に設定する方法の2通りがあります。
まずGUIオブジェクトを配置する前に属性を設定する方法を紹介します。ツールフレーム上にある配置するGUIオブジェクトのアイコン（今回の例ではlabel）をクリックします。
するとツールフレームの下半分に属性の名前（name）と値（Value）の一覧が表示されます。設定する属性の値の欄をダブルクリックすると編集可能となりますので、値を入力しEnterキーを押して確定します。ここでは属性textの値として「マスカット」を入力します。
図12：属性を指定
（画像をクリックすると別ウィンドウに拡大図を表示します）
続いて設定したGUIオブジェクトのアイコンを通常通りドラッグ＆ドロップすることで、属性が設定されたGUIオブジェクトを配置することができます。
図13：マスカットという属性のラベルが配置できる
（画像をクリックすると別ウィンドウに拡大図を表示します）
次にGUIオブジェクトを配置した後で属性を設定する方法を紹介します。ツールフレームから「Tree」タブを開いてください。
現在配置済みのGUIオブジェクトがツリー形式で表示されます。この中から属性を設定したいGUIオブジェクトを選択し、先ほどと同様にツールフレームに表示される属性の名前と値の一覧画面で属性を設定します。
図14はラベルの属性を「マスカット」から「Maskat」に変更した際の画面です。
図14：ラベルの属性を変更する
（画像をクリックすると別ウィンドウに拡大図を表示します）
以上の属性の設定方法を利用して、先ほど作成したホテル検索アプリケーションの属性を設定します。
このレイアウト定義XMLは以下のようになります。
（画像をクリックすると別ウィンドウに拡大図を表示します）
これで図1の画面例をさらに忠実に表現できました。なお、Eclipse版IDEにも属性を設定するツールがあり、そちらの方が使い勝手がよいので、属性を設定する際はEclipse版IDEを利用することをお薦めします。なお、各GUIオブジェクトの属性の詳細情報はマスカットプロジェクトのWebサイトにあるリファレンスに記載されています。
前のページ
1
2
3
4
次のページ
著者プロフィール
株式会社NTTデータ 川田 洋平
技術開発本部 ソフトウェア工学推進センタ エキスパート
同社の研究開発部門にてWebシステムの研究開発に従事。マスカットの開発には初期から携わり、オープンソース化後はマスカットプロジェクトのプロジェクト運営委員会(PMC)およびコミッタとして活動を続けている。
INDEX
第3回：実践！マスカットアプリケーションの画面作成
ブラウザ版IDEでの画面の作成
さらに使いこなすためのポイント
検索条件フレームをプレビューする
動作確認
