エスキュービズム ラボ Blog

Dojo Toolkitはjavascriptのフレームワークです。

趣味でzend frameworkの勉強をしているときに、Dojoに出会いました。

zend frameworkをFull Packageでインストールすると一緒に入っています。

最近はjavascriptのフレームワークといえば、jQueryが多く使われていますが、あえてDojoを使ってみたいと思います。。。

Dojo Toolkitの中身

Dojo Toolkitのフルパッケージには大きく分けて以下の3が入っています。

SDKの場合、大きく分けて以下の3つが入っています。

1. Dojo (Dojo Core)    Dojoの基本部分。イベント処理やajaxなどのライブラリ。   xmlやjsonを扱うライブラリ。
2. Dijit    ウィジェットをまとめたライブラリ。    （ウィジェットとはボタンなどのユーザーフォームを拡張したもの)
3. Dojox    グラフやグリッドなどの拡張ライブラリ。

以下からDojoの使い方について説明していきたいと思います。

1.Dojo を宣言する
Dojoを使用するにあたり、最初にdojo.jsを読み込む必要があります。

<script type=”text/javascript” src=”./dojo/dojo.js” djConfig=”isDebug: false,   parseOnLoad: true”></script>

djConfig はDojoの設定となります。
isDebugはデバッグ出力を行うかどうか。
parseOnLoadはDOMの解釈を行うかどうか。(ウィジェットを使う場合は必須)
他にもありますが、基本はこの2つを指定しておけば、動きます。

2. よく使うメソッド

dojo.byId(id)
document.getElementById() と大体同じ。

dojo.style(node, style, value)
スタイルの指定を行う。

hasClass() 、dojo.addClass() 、removeClass()
要素が存在するか、要素の追加、要素の削除

dojo.query()
html内の要素を取得することが出来きます。

①input要素を全て取得する
var nodes = dojo.query(”input”);

②クラス「dojoquery」が指定されたdiv要素を全て処理
dojo.query(”div.dojoquery”).forEach(function(elem) { … });

③ボタン要素全てに、クリック時のイベントハンドラを設定
dojo.query(”input[type='button']“).connect(”onclick”, function() { … });

3. dojo.data

データクラスを扱うクラスです。

①dojo.data.ItemFileReadStore()が読み込み用のクラス
②dojo.data.ItemFileWriteStore()が書き込み可能なクラス
dojoでjsonデータを扱うには、 identifierでそのデータ構造でユニークとなるキーを指定する必要があります。

var myPage = {”identifier”:”name”,”items”:[
{"name":"pager","data":[1,2,3,4,5,6,7,8,9,10],”nowPage”:1,”lastPage”:11},
{”name”:”stock”,”data”:[
{”name”:”data0″,”"date”:”2010-03-12″,
“start_price”:203,”max_price”:204,
“min_price”:202,”end_price”:203,”volume”:”325000″}
“label”:”name”};

jsonデータをパースして、オブジェクトにします。

myData = dojo.data.ItemFileReadStore(data: myPage);

url指定もできます。

myData = dojo.data.ItemFileReadStore(url: /data/mypage.json);

データ操作はfetch（） 関数を使います。
引数に8つの引数 onBegin, onItem, onComplete, onError, start, count, sort および scope を渡すことが出来ます。
また、queryを使い条件を指定し、マッチした場合にonItemで処理を行うということができます。

myPageStore.fetch({
query: {name: “data*”},
onError: function(item){ alert(‘エラーが発生しました。’); },
onComplete : function(item){ alert(‘終了しました。’); },
onItem: function(item){ myData.newItem(item);}
});

4.dojoxのchartライブラリ
簡単にグラフを書くことが出来るライブラリです。

以下の例では折れ線グラフが描画されますが、他にもバブルチャートや棒グラフも描画できます。

//モジュールの読み込み
dojo.require(”dojox.charting.Chart2D”);
//インスタンスを生成
myChart = new dojox.charting.Chart2D(id);
//グラフのパターンを指定
myChart.addPlot(”default”, {type: “Lines”, tensiion: 2, shadows: {dx: 1, dy: 1, dw: 1}});ｙ軸の設定
myChart.addAxis(”y”, {vertical: true, fixUpper: “micro”});
//x軸の設定
myChart.addAxis(”x”, {from: 1, to: 20 , minorTicks: false, labels: labels});
//描画
myChart.render();

以上で簡単にDojoの使い方について説明しました。

一度試してみてはいかがでしょうか？