Dojoのサンプルなどを見ていると、今回紹介したスクリプトタイプ「dojo/connect」ではなく、「dojo/method」を利用している場面も多く見かける。dojo/connectとdojo/methodの違いはそれほど重要ではないが、知っておいたほうが良い。

  • dojo/connect……dojo.connect()を使用してイベントハンドラを接続する
  • dojo/method……メソッドを直接「オーバーライド」する

この2つの違いは、複数のイベントハンドラをウィジェット内に定義してみるとよくわかる。以下のように、dojo/connectを用いたイベントハンドラを複数定義すると、各ハンドラがdojo.connect()を用いてイベントに接続されるので、どちらの処理も実行される。

      <div id="button" dojoType="dijit.form.Button" label="クリックして!">
        <script type="dojo/connect" event="onClick" args="ev">
          alert("イベント1");
        </script>

        <script type="dojo/connect" event="onClick" args="ev">
          alert("イベント2");
        </script>
      </div>

dojo/method (実は、"method"の部分は"connect"以外なら何でもよい) の場合は、個々のイベントハンドラが以前のハンドラを「上書き」するので、以下のコードは、ボタンクリック時に2番目のイベントハンドラしか実行されない。

      <div id="button" dojoType="dijit.form.Button" label="クリックして!">
        <script type="dojo/method" event="onClick" args="ev">
          alert("イベント1");
        </script>

        <script type="dojo/method" event="onClick" args="ev">
          alert("イベント2");
        </script>
      </div>

まとめ

以上で、マークアップを用いたDijitプログラミングの基礎はひと通り完了だ。この内容をしっかり押さえておけば、後はリファレンスを片手にどんどんウィジェットを利用していけるはずだ。非常に重要な内容だったので、いったんまとめておこう。

  • マークアップを用いるための準備は、テーマの指定とパーサ (dojo.parser) の初期化が主になる。
  • マークアップは、任意の要素に「dojoType="ウィジェットクラス名"」を指定する。ウィジェットの属性も、同じタグ内で指定できる
  • イベントハンドラの定義もマークアップで指定することができる。