Tweet

連載インデックスへ

JavaScript記述を削減するAjax「マスカット」とは

　前回の『業務システムでAjaxを使う際の「JavaScript問題」とは』では、「TERASOLUNA Client Framework for Ajax」（以下、TERASOLUNA Ajax）の概要について説明しました。

　今回は、TERASOLUNA Ajaxのオープンソース版である「マスカット」と、その開発環境「マスカットIDE」を利用し、簡単なAjaxアプリケーションを作成する手順を紹介します。

FrontPage - マスカット via kwout

Eclipseプラグイン「マスカットIDE」の機能と構成

　マスカットIDEはEclipseベースの統合開発環境です。マスカットIDEを利用すると、Ajaxアプリケーションの動作に必要な「レイアウト定義XML」「イベント定義XML」を直感的に編集できます。

　マスカットIDEはマスカットエディタ、［プロパティー］ビュー、［アウトライン］ビューの3つから構成されています（図1）。

図1　マスカットIDEの構成

■ 【1】マスカットエディタ

　［レイアウト］エディタ、［ソース］エディタ、［プレビュー］からなるレイアウト（画面）編集用のエディタです。［レイアウト］エディタでレイアウトをグラフィカルに編集し、編集した内容を［ソース］エディタや［プレビュー］で確認します。編集した内容はレイアウト定義XMLに保存されます。

■ 【2】［プロパティー］ビュー

　GUI部品のプロパティ、イベントハンドラを設定するためのビューです。編集した内容はそれぞれレイアウト定義XML、イベント定義XMLに保存されます。

■ 【3】［アウトライン］ビュー

　レイアウト構造の確認やGUI部品の選択に利用するビューです。

開発環境の整備

　本稿では、表1に示す開発環境を利用します。

　マスカットIDEは、Eclipseのプラグインとして動作します。マスカットのポータルサイトから「maskatide-2.1.1.v20090731.zip」をダウンロードし、解凍して得られた「features」「plugins」フォルダをEclipseのインストールフォルダにコピーしてください。

　マスカットIDEで作成したアプリケーションを動作させるためには、「レイアウト定義XML」などの静的ファイルをWebサーバ上の公開ディレクトリに配置する必要があります。本稿では、アプリケーションの動作確認をより簡単にするため、Eclipseの[ワークスペース]をTomcatの「webapps」配下（webapps\workspace）に作成します（図2）。

図2　ワークスペースはTomcatのwebapps配下に作成

作成するAjaxアプリケーションの概要

　本稿では、下記のフローで動作する簡単なログイン処理を実装します（図3）。

1. 「ログイン」ボタンをクリックすることで、ユーザーID・パスワードの情報をサーバに送信
2. サーバから名前情報（マスカット）を受信（※サーバサイドの実装については割愛し、代わりに静的XMLファイルをレスポンスとして利用）
3. 受信した名前情報をJavaScript変数に格納
4. ログインイベントの正常終了後、遷移先レイアウトに遷移
5. JavaScript変数から取得した値を遷移先レイアウトに反映

図3　作成するAjaxアプリケーションの概要

　本アプリケーションは以下の手順で作成していきます（下記リストは、インデックスになっています）。

1. マスカットプロジェクトの新規作成
2. マスカットアプリケーションの新規作成
3. マスカットエディタによるレイアウトの作成
4. 直感的にログインイベントを設定
5. 画面遷移処理の設定
6. レイアウト間のデータの受け渡しの設定
7. マスカットアプリの動作確認

1-2-3-4

Index

第2回　EclipseでJavaScript削減Ajax開発−マスカットとは Page1 JavaScript記述を削減するAjax「マスカット」とは Eclipseプラグイン「マスカットIDE」の機能と構成 開発環境の整備 作成するAjaxアプリケーションの概要   Page2 マスカットプロジェクトの新規作成 マスカットアプリケーションの新規作成   Page3 マスカットエディタによるレイアウトの作成   Page4 直感的にログインイベントを設定 画面遷移処理の設定 レイアウト間のデータの受け渡しの設定 マスカットアプリの動作確認 マスカットが提供する、そのほかの機能

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード