マスカットでjQuery UIを使用したい(2)
昨日の続きですが、さっそくソースコードです。
DatePickerWrapper.js
maskat.lang.Class.declare("maskat.widget.jquery.DatePickerWrapper") .extend("maskat.layout.Widget", { defaultGetter: "getValue", defaultSetter: "setValue", createWidget: function(parent){ var div = document.createElement("div"); //(A) parent.appendChildElement(div); div.style.left = this.left + "px"; div.style.top = this.top + "px"; div.style.width = this.width + "px"; div.style.height = this.height + "px"; this.element = div; $('#' + this.target).datepicker();//(B) this.widget = div; return div; }, getValue: function() { }, setValue: function(value) { } });
(A)でcreateElementでdivタグを生成し、親部品にぶら下げます。プロパティを設定した後(B)でjQueryUIのdatepickerを使用しています。ラッパーはこんな感じです。
JQueryWidgetLibrary.js
maskat.lang.Class.declare("maskat.widget.jquery.JQueryWidgetLibrary") .extend("maskat.layout.WidgetLibrary", { getBindingConfiguration: function() { var config = { datepicker: { type: maskat.widget.jquery.DatePickerWrapper,//(C) attributes: { name: { type: "string", required: true }, target: { type: "string", required: true }, top: { type: "number", required: true }, left: { type: "number", required: true }, width: { type: "number", defaultValue: 0 }, height: { type: "number", defaultValue: 0 } } } }; return config; } });
(C)で先ほど作成したラッパーを指定し、属性を定義します。
JQueryPlugin.js
maskat.lang.Class.declare("maskat.widget.jquery.JQueryPlugin")
.extend("maskat.core.Plugin", {
_static: {
initialize: function() {
maskat.core.Plugin.register(this);//(D)
}
},
getPluginId: function() {
return "jquery";//(E)
},
getVersion: function() {
return "2.2.0.@build@";
},
isLoaded: function() {
return this.loaded;//(F)
},
load: function(app) {
var pathJQ = maskat.location + "jquery/";
maskat.app.loadStyleSheet(pathJQ + "css/smoothness/jquery-ui-1.7.3.custom.css");
maskat.app.loadJavaScript(pathJQ + "lib/jquery-1.3.2.min.js", false);
maskat.app.loadJavaScript(pathJQ + "lib/jquery-ui-1.7.3.custom.min.js", false);
this.loaded = true;//(G)
},
start: function() {
var reader = maskat.layout.LayoutXMLReader.getInstance();
var library = new maskat.widget.jquery.JQueryWidgetLibrary();
reader.addWidgetLibrary(library);
}
});(D)でマスカットに対して、このPluginを登録しています。プラグインは一意の名前を返却する必要があるため、(E)で返却しています。マスカットでは"core"という名前以外は使用できるようです。あとはプラグインで競合さえなければですが。プラグインがロードされているかどうかを(F)で返却し、そのフラグを(G)で設定しています。loadという関数の中で必要なjQueryのライブラリをロードしています。
上記の３つのファイルができれば、あとはantコマンドを発行するだけです。build.propertiesのあるトップディレクトに移動してantコマンドを実行するとbuildとdocというフォルダが出来上がります。buildフォルダの中にはmaskatというフォルダがあり、これが成果物です。sampleフォルダには、あらかじめ用意されているマスカットのサンプルが格納されています。この中のcalculationは四則演算を行う簡単なサンプルですので、これを少し変更して追加したプラグインを使用するように変更してみます。
layout.xml
<?xml version="1.0" encoding="UTF-8"?> <layoutDef> <layout name="calculation"> <frame name="calculationFrame" left="12" top="24" width="577" height="157" title="四則演算アプリケーション"> <text name="leftOperandText" left="23" top="23" width="85" tabIndex="1" datatype="N"/> <combo name="operatorCombo" left="119" top="23" width="50" tabIndex="2"> <comboItem text="+" value="+"/> <comboItem text="-" value="-"/> <comboItem text="*" value="*"/> <comboItem text="/" value="/"/> </combo> <text name="rightOperandText" left="179" top="23" width="85" tabIndex="3" datatype="N"/> <label name="equalLabel" left="275" top="23" text="="/> <text name="resultText" left="299" top="23" width="85" tabIndex="4" datatype="N" disable="true"/> <label name="calculationMethodLabel" left="23" top="59" text="計算方法:"/> <label name="localDescriptionLabel" left="131" top="83" text="ブラウザ内部で JavaScript 関数を実行し、計算結果を表示します。"/> <button name="localCalculateButton" left="23" top="83" title="ローカル"/> <label name="remoteDescriptionLabel" left="131" top="107" text="サーバに HTTP 要求を送信し、サーバ側で実行した計算結果を表示します。"/> <button name="remoteCalculateButton" left="23" top="107" title="リモート"/> </frame> <!-- ここから足した部分 --> <frame name="test" left="12" top="190" width="0" height="0" title="JQuery"> <datepicker name="datepi" target="test" left="0" top="0" /> </frame> </layout> </layoutDef>
親部品としてフレームを用意し、datepickerのtargetに親部品のname属性を指定しています。実行したところ、以下のように無事表示できました。
