Dojo　基礎編

Dojo javascript

※まだまとめ中〜〜〜〜〜※

javascriptライブラリは専らprototype.jsを使っていたのだが、今のプロジェクトでDojoを使うことになったのでDojoのメモメモ〜

DL&インストール

Dojo本家サイトのDownloadリンクから最新版をDLします。（現時点での最新バージョンは1.1.1）

DLしたファイルを解凍すると以下のような構成になっているので、コイツをそのままWebアプリのフォルダにコピーすれば準備OK。
展開フォルダ以下の構成はこんなん

基本的な使い方

djConfigの設定
<script src="dojo/dojo/dojo.js">
  djConfig="parseOnLoad: true";
</script>

もしくは

<script type="text/javascript">
  var djConfig = {
    parseOnLoad: true
  };
</script>

上記の場合は、変数の宣言をdojo.jsを読み込むscriptタグよりも前に行うことが必要。
主な設定内容

  • isDebug --デバッグ出力を行うかどうか
  • parseOnLoad --onLoad時にDOMをパースするか (Dijitやdojo.queryでは必須)

Dojo API djConfig参照。

テーマの設定

dojoにはコンポーネント等に最初から含まれるデザインがあり、
以下のようにstyleへのimport、bodyタグへのクラス指定を行うことにより使用可能になる。

<html>
  <head>
    <title>Dojo: Hello World!</title>
    <style type="text/css">
        @import "dojoroot/dijit/themes/tundra/tundra.css";
        @import "dojoroot/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="dojoroot/dojo/dojo.js"
      djConfig="parseOnLoad: true"></script>
  </head>

  <body class="tundra">
  </body>
</html>

使えるテーマは３種類でインポート、クラス名を変更することで切り替えができる。

  • tundra ---シルバーな感じ
  • soria ---ライトブルーな感じ
  • nihilo ---白い感じ
マークアップ
<button dojoType="dijit.form.Button" id="helloButton">
    Hello World!
    <script type="dojo/method" event="onClick">
       alert('You pressed the button');
    </script>
</button>
非マークアップ

よく使うAPI -- core --

dojo.require()
dojo.addOnLoad()

dojo.addOnLoad(obj: Object)
ドキュメント読込み時にobjにて指定された内容を実行

dojo.byId()

dojo.byId(id: String|DOMNode, doc: Document);
指定したidと一致する要素を取得

dojo.connect()

dojo.connect(obj: Object, event: String, context: Object, method: String|Function, dontFix: Boolean)
event実行時のコールバック関数を指定する

dojo.isXXX()

オブジェクト情報をチェックしてくれて結果を返す。
dojo.isXXX()には主に以下がある

dojoisXXX

ブラウザ識別用の変数

配列操作

dojo.indexOf(array, value, fromIndex, findLast)
dojo.lastIndexOf(array, value, fromIndex)
dojo.forEach(array, callback, thisObject)
dojo.every(array, callback, thisObject)
dojo.some(array, callback, thisObject)
dojo.map(array, callback, thisObject)
dojo.filter(array, callback, thisObject)

Keyイベント

KeyEventの検知はdojo.connectで行い以下のような感じでdojo.keys.XXXと比較する

dojo.connect(dojo.byId("input"), "onkeypress", function(evt) {
  if (e.keyCode == dojo.keys.ENTER) {
  }
});

dojo.keysが持っている定数一覧はこちら

DOM/CSS操作

dojo.place

dojo.place(node: String|DomNode, refNode: String|DomNode, position:String|Number);
nodeがrefNodeからみた相対的な位置 (position) に挿入される

dojo.style

var foo=dojo.style(node: DomNode|String, style: Object, value: String)
nodeに指定されたスタイルを設定する

dojo.hasClass(node, classStr)

クラスが指定されているかどうか

dojo.addClass(node, classStr)

クラスの追加

dojo.removeClass(node, classStr)

クラスの削除

dojo.toggleClass(node, classStr, condition)

条件(condition)がtrueの場合はクラスを追加

dojo.query

dojo.query(query: String, root: String|DOMNode)
CSS3のセレクタで絞り込んで抽出したNodeListを取得

JSONユーティリティ

toJson

dojo.toJson(it: Object, prettyPrint: Boolean, _indentStr: String)
オブジェクトをJSON文字列に変換

fromJson

dojo.fromJson(json: String)
JSON文字列をJavaScriptオブジェクトに変換

dojo.formToJson

dojo.formToJson(formNode: DOMNode|String, prettyPrint: Boolean)
Formのinput内容をJSON文字列に変換

よく使うAPI -- dijit --

dijit.byId()

参考サイト

Dojo本家サイト
Dojo API Documentation

参考書籍

Dojo: The Definitive Guide
Dojo: The Definitive Guide
posted with amazlet at 08.08.07
Matthew A. Russell
Oreilly & Associates Inc
売り上げランキング: 26737
Amazon.co.jp で詳細を見る