画面上にウィジェットを配置するだけであればパレットからのドラッグ&ドロップで可能だが、実際にアプリケーションを構築するにはやはりロジック部分のコーディングを行わなければならない。ここはさすがにjMakiといえどもJavaScriptのコードを記述する必要がある。たとえば任意のウィジェットから値を取得するにはリスト2のようなJavaScriptを記述する。jmaki.getWidget()ではウィジェットのidを指定している点に注意してほしい。
リスト2 ウィジェットからの値の取得
<a:widget name="dojo.combobox" id="combobox"
value="[
{label : 'Alabama', value : 'AL'},
{label : 'California', value : 'CA'},
{label : 'New York', value : 'NY', selected : true},
{label : 'Texas', value : 'TX'}
]" />
// コンボボックスで選択されている値を取得
var widget = jmaki.getWidget("combobox");
var value = widget.getValue();
また、jMakiはPublish-Subscribeモデルに基づいたイベント管理のための仕組みを提供しており、ウィジェットで発生するイベントにリスナを登録しておくことでイベントの通知を受け取ることができる。リスト3はDojoのdatepicker(日付選択)ウィジェットで日付が選択された場合にその日付をダイアログで表示する例だ。
リスト3 イベント通知の例
<a:widget name="dojo.datepicker" publish="/date"/>
// datepickerのonSelectにリスナを登録
jmaki.subscribe("/date/onSelect", function(item) {
alert(item.value);
});
このようにjMakiを利用することで、さまざまなAjaxライブラリが提供するウィジェットをjMakiのAPIで扱うことができる。
そのほか、jMakiでは XMLHttpRequestを用いた非同期通信のためのAPIも提供している。POSTメソッドでデータを送信するだけであればリスト4のように jmaki.doAjax()を呼び出すだけでよい。
リスト4 XMLHttpRequestによるデータ送信の例
jmaki.doAjax({ url : "sample.jsp",
method : 'POST',
content : { 'data' : data }
});
レスポンスを使用して処理を行うには、リスト5のようにjmaki.doAjax()の引数にコールバック関数を指定する。
リスト5 コールバック関数を指定する例
jmaki.doAjax({url: 'sample.jsp',
callback: function(res){
alert(res.responseText);
}
});
本稿では触れないが、ウィジェットどうしを同期させるための仕組みや、jMakiのウィジェットをJSFコンポーネントとして使用するためのライブラリも用意されているほか、jMakiの開発者であるGreg Murray氏のブログによると、Google Gearへの対応も容易に行うことができるとされている。