マスカットでjQuery UIを使用したい(1)

jQuery Maskat

マスカット（http://maskat.sourceforge.jp/）は、他のJavascriptライブラリを取り込めるようなフレームワークになっていまして、配布状態でGoogleMAPやRialtoなどの部品を使用することができるようになっています。とある案件で「マスカットは使用するけど、jQuery UIで訴求力のある提案をしたい！」とのことだったので、マスカットにjQueryを組み込んで使用することができるのか開発元（NTTD）に問い合わせたところ、「できますよ〜」と回答がありました。しかし、組み込みの概要だけしか聞けなかったので、試してみることにしました。大まかな手順は以下の通り。

  1. jQueryUIの使用したい部品のラッパークラス（A）を作成
    • defaultGetterやdefaultSetterを定義
    • createWidgetを定義し、DOMを構築する
  2. maskat.layout.WidgetLibraryを継承したクラス（B）を作成
    • getBindingConfigurationの中で（A）を設定する
  3. maskat.core.Pluginを継承したクラス（C）を作成
    • loadメソッド内でjquery関連のライブラリを読み込む
    • startメソッド内で（B）のインスタンスを生成し、maskat.layout.LayoutXMLReaderに登録する

今回は、jQueryUIのDatePickerをマスカット画面に組み込めるかという検証にしたいと思います。
まずは、マスカットのソースコードをダウンロードしてきます。（http://maskat.sourceforge.jp/index.php?Download）解凍すると以下のようになります。

次に、jQuery関連のライブラリを落としてきます。最新(1.8.2)ではなく1.7.3にしました。（http://jqueryui.com/download/jquery-ui-1.7.3.custom.zip）

上の図がダウンロードして解凍したところです。この中で以下の3ファイルが必要になります。


組み込むプラグインは、マスカットのソースコードを解凍したフォルダ階層のpluginの中に作成してゆきます。pluginのフォルダ内に"jquery"という名前のフォルダを作成します。
さらにその下に（ここからは好みですが）src,lib,cssなどのフォルダを掘ってゆきます。

libの下にはjquery-1.3.2.min.jsとjquery-ui-1.7.3.custom.min.jsを配置し、cssの下にはsmoothness/jquery-ui-1.7.3.custom.cssを配置します。srcの下はクラス階層になるので、パッケージを意識してフォルダを掘ってゆきます。今回作成するjsファイルは以下の3つです。

  • DatePickerWrapper.js（上のおおまかな手順のラッパークラス（A））
  • JQueryWidgetLibrary.js（maskat.layout.WidgetLibraryを継承したクラス（B））
  • JQueryPlugin.js（maskat.core.Pluginを継承したクラスを作成（C））

明日はこれらを実装し、マスカット画面に組み込めるか検証したいと思います。
そういえば、マスカットソースをビルドするのにantが必要になります。