TOPシステム開発> 動作確認
マスカット
リッチクライアントを加速させるAjax開発環境「マスカット」の全貌

第3回:実践!マスカットアプリケーションの画面作成
著者:NTTデータ  川田 洋平   2007/1/23
前のページ  1  2  3  4
動作確認

   ここではこれまで作成したレイアウト定義XMLをサーバに配備してWebブラウザによる動作確認を行う方法を紹介します。サーバへの配備方法は次回以降でも紹介しますが、今回一足早く配備してみたい方のために簡単に紹介します。

   アプリケーションサーバとしてTomcatを利用します。Tomcatのセットアップ方法や利用法については割愛します。まずTomcatのwebapps配下にマスカット一式(注1)を配置します。

※注1: マスカットは以下のWebサイトからダウンロードしてください。
SourceForge.jp:マスカットプロジェクト
http://sourceforge.jp/projects/maskat/

   以下のようなディレクトリ構成になります。

Tomcatディレクトリ構成
<Tomcatディレクトリ>
┣ bin
┣ ...
┣ webapps
... ┣ maskat
   ... ┣contents
       ┣maskatFW
       ┣maskatIDE
       ┣changelog.txt
       ...

   続いて「<Tomcatディレクトリ>\webapps\maskat\contents」配下に先ほど作成したレイアウト定義XMLファイル(hotelSearch.xml)と、以下に示すHTMLファイル(hotelSearch.html)を格納してください。このとき、それぞれファイル中で指定している文字コード形式(今回の場合は両者共にUTF-8)でファイル保存することに注意してください。

フレーム領域にその他の画面要素を配置
(画像をクリックすると別ウィンドウに拡大図を表示します)

   なおこのHTMLファイルはEclipse版IDEによって自動生成することができます(次回で解説します)。

   続いてTomcatを起動し(ローカルホストのポート8080番で起動したと仮定)、Webブラウザで以下のURLにアクセスしてください。

アクセス先
http://localhost:8080/maskat/contents/hotelSearch.html

   以下の画面が表示されれば成功です。

ラベルの属性を変更する
図15:アプリケーションの動作確認
(画像をクリックすると別ウィンドウに拡大図を表示します)

   なお今回行った「配備 → Webブラウザによるアクセス → 画面表示」の流れは、「第2回:実践!マスカットIDEをセットアップする」の1ページ目の「マスカットの動作概要」の図2から図4までに対応しています。


次回について

   次回はEclipse版IDEを利用してホテル検索アプリケーションの作成をさらに進めていきます。是非ともご期待ください。

前のページ  1  2  3  4


株式会社NTTデータ 川田 洋平 技術開発本部 ソフトウェア工学推進センタ エキスパート
著者プロフィール
株式会社NTTデータ 川田 洋平
技術開発本部 ソフトウェア工学推進センタ エキスパート

同社の研究開発部門にてWebシステムの研究開発に従事。マスカットの開発には初期から携わり、オープンソース化後はマスカットプロジェクトのプロジェクト運営委員会(PMC)およびコミッタとして活動を続けている。


INDEX
第3回:実践!マスカットアプリケーションの画面作成
  ブラウザ版IDEでの画面の作成
  さらに使いこなすためのポイント
  検索条件フレームをプレビューする
動作確認