« Dojo 0.4.2のまとめ | トップページ | イベント割り当て »

2007年3月13日 (火)

Dojoインストール

Dojoは http://dojotoolkit.org/ からダウンロードできます。dojo-xxx-ajax.zip をダウンロードして解凍したら、dojo.js, iframe_history.html, srcディレクトリを、Dojoを利用する場所にまとめて置きます。

Dojoのコードは以下の順番で記述します。dojo.jsのロードのみが必須で、その他は必要に応じてこの順番で記述します。HTMLのロードが終わってからでなければ、dojo.widget.byId("helloButton")などのHTMLオブジェクトを参照できないので、この順番を守ることが重要となります。

  1. djCofigの設定
  2. dojo.jsのロード
  3. dojo.requireの実行
  4. 初期化関数の定義
  5. addOnLoadによる初期化関数の呼び出し

以下に簡単な例を示します。

<html>
<head>
   <script type='text/javascript'>
    var djConfig = { isDebug: true };
   </script>

   <script src='dojo.js' type='text/javascript'>

   <script type="text/javascript">
            dojo.require("dojo.widget.Button");

            function helloPressed(){
              dojo.debug('Hello World!');
            }

            function init(){
              var helloButton = dojo.widget.byId('helloButton');
              dojo.event.connect(helloButton, 'onClick', 'helloPressed');
            }

            dojo.addOnLoad(init);
        </script>
</head>
<body>
  <button dojotype="Button" widgetid="helloButton">Press Me</button>
</body>
</html>

1. djCofigの設定

最初にdjConfigによりDojoの設定をします。djConfigで設定できる値を以下に示します。「:」の後は、デフォルト値です。

  • isDebug: false
  • allowQueryConfig: false
  • baseScriptUri: ""
  • baseRelativePath: ""
  • libraryScriptUri: ""
  • iePreventClobber: false
  • ieClobberMinimal: true
  • locale: undefined
  • extraLocale: undefined
  • preventBackButtonFix: true
  • searchIds: []
  • parseWidgets: true 

 

2. dojo.jsのロード

Dojoを利用するHTMLでは、下記のようにsrcriptタグでdojo.jsを読み込みます。

<script type="text/javascript" src="dojo.js" />

Dojo 0.4.2から、クロスドメインに対応した。これにより、Dojoのライブラリを自分で配置せずに、AOLのCDNで配信しているDojoのライブラリを直接参照して利用できる。AOLのCDNを直接参照するときは、以下のように記述する。 Editor Widgetなど一部の機能では、HTMLファイルをローカルサーバに置く必要がある。

<script type="text/javascript" src="http://o.aolcdn.com/dojo/0.4.3/dojo.js"></script>

3. dojo.requireの実行

srcディレクトリに含まれるその他のDojoのファイルは細分化されており、必要なリソースのみをロードするようになっています。

dojo.require()を用いて利用するwidgetなどのDojoのリソースを呼び出します。例えば回のように記述します。

dojo.require("dojo.lfx.html");
dojo.require("dojo.lfx.extras");

下記のようにワイルドカード(*)を用いてリソースを指定することもできます。

dojo.require("dojo.lfx.*");

Dojoのrequireで指定する名前空間の名前は、各リソースファイル(.js)のディレクトリ構成にそのまま対応します。

例えば、dojo.requre("dojo.i18n.number");によりロードされる、リソースファイルは、dojo\src\i18n\number.jsです。

dojo.requireIf(condition, "package")を使うと、conditionがtrueのときだけpackageをロードします。

4. 初期化関数の定義

次のaddOnLoadで呼ばれる初期化関数を定義します。先の例では、init()が初期化関数になります。

5. addOnLoadによる初期化関数の呼び出し

dojo.addOnLoad()で、HTMLページが読み込まれた後に呼び出される関数を指定します。関数を直接指定する方法と、下記のように、オブジェクトとそのメソッド名を指定する方法があります。dojo.addOnLoadはHTML bodyタグのonLoad属性に関数を書く場合や、window.onLoadと同じ動作をする。しかし、Dojoでは、windows.onLoadを上書きしているので、dojo.addOnLoadで呼び出す必要がある。

dojo.addOnLoad(object, "functionName")

HTMLのロードが終わらないとWidgetオブジェクトがインスタンス化されないため、DojoのWidgetオブジェクトを取得するときは、HTMLのロードが終わってから実行する必要がある。dojo.addOnLoadで呼び出した関数内であれば、確実にHTMLのロードが終わってから呼ばれる。

dojo.addOnLoadと同じ引数を取るdojo.addOnUnloadはページがアンロードされたとき、リロードされたときやページが移ったときなどに呼ばれる関数を指定する。

« Dojo 0.4.2のまとめ | トップページ | イベント割り当て »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/5672622

この記事へのトラックバック一覧です: Dojoインストール:

« Dojo 0.4.2のまとめ | トップページ | イベント割り当て »