マスカットというのは、ＮＴＴデータによって作られたオープンソースのAjax開発環境です。
開発環境としては、ブラウザ版とEclipse版が用意されていますが、今回は導入が簡単で、ドラッグ&ドロップでGUI（レイアウト定義）を構築できるブラウザ版を使います。
インストール
マスカット本体とブラウザ版IDEをダウンロードして、それぞれ解凍。
maskatFWフォルダとmaskatIDEフォルダが同じフォルダ内にあればいいです。
使い方
Webサーバ経由でなくて、ローカルからmaskatIDE/index.htmlをダブルクリックして起動します。Webサーバ経由で起動すると保存できません。
ブラウザはIEかFirefoxで。
GUIオブジェクトをドラッグ&ドロップして、各GUIパーツを配置するわけですが、画面を見てもいまいちどんなものかわからないので、以下にまとめてみました。
| 名称 | 概要 | 他のGUI配置 |
|---|---|---|
| alert | アラート | できない |
| button | ボタン | できない |
| checkbox | チェックボックス | できない |
| codeLabel | ヘルプアイコン付き入力フィールド | できない |
| combo | プルダウンメニュー | できない |
| frame | フレーム。HTMLでのdivのような感じで使う | できる |
| grid | テーブル。列数を指定する。 | できない |
| image | 画像 | できない |
| label | ラベル。テキストの記述はすべてlabelを使う。 | できない |
| popup | ポップアップウィンドウ | できる |
| radio | ラジオボタン | できない |
| simpleWindow | ウィンドウ | できる |
| spliter | 分割画面 | できる |
| tabfolder | タブフォルダ。タブアイテムを配置するための大枠。 | tabitemのみ |
| tabitem | タブアイテム | できない |
| text | 入力ボックス。HTMLでの１行テキストボックスと、複数行テキストボックス兼用 | できない |
| treenode | ツリーノード | できない |
| treeview | ツリーの大枠 | treenodeのみ |
リッチクライアントを加速させる Ａｊａｘ開発環境 マスカットの全貌p.202-p.203を参考。
流れとしては、配置したいGUIパーツを選択して、キャンバスにドラッグです。その後、Tree画面で、属性の変更を行います。
他のGUI配置が可能なflameなどを使ったうえで、ラベルや入力ボックス、ボタンを配置するという形です。
ファイルの保存
IEを使っている場合は、ファイル名にレイアウト定義ファイル名を入力します。ただし、txtファイルとして保存されます。
Firefoxを使っている場合は、フルパスでレイアウト定義ファイル名を入力します。
