Dijitはプログラマティックな利用も可能

Dijitは、マークアップを用いずに、すべてをJavaScriptコードで記述することも可能だ。こちらの方法は、マークアップの方法に比べて可読性が劣るが、好きなタイミングでウィジェットを初期化できるという利点がある。

先のサンプルを、JavaScriptコード中心に書きなおしたのがリスト2のサンプルだ。

リスト2 hello_programmatic.html

    <html>
    <head>
    <title>Hello, Dojo!</title>
    <meta http-equive="Content-Type" content="text/html;charset=UTF-8"/>
    <style type="text/css">
      @import "../js/dojo/resources/dojo.css";
      @import "../js/dijit/themes/tundra/tundra.css";
    </style>
    <script src="../js/dojo/dojo.js">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.form.Button");

      dojo.addOnLoad(init);

      function init() {
        // (1) ボタンウィジェットを生成
        var button = new dijit.form.Button({label: "クリックして!"},
                                           dojo.byId("button"));
        // (2) onClickイベントを捕捉
        dojo.connect(button, "onClick", function(ev) {
          alert("こんにちは! ボタンのID:" + ev.target.id);
        });
      }
    </script>
    </head>
    <body class="tundra">
      <div id="button"></div>
    </body>
    </html>
  • ウィジェットのインスタンスは、普通にnewするだけで生成できる。コンストラクタの第1引数には、ウィジェットの属性値を格納したオブジェクト、第2引数にはウィジェットの配置先となるDOMオブジェクトを指定する。
  • イベントの捕捉は、普通にdojo.connect()を使用すればよい。

マークアップされたウィジェットを操作するには

Dijitの基礎知識として最後に紹介したいのは、マークアップで生成されたウィジェットをJavaScriptコードから利用する方法だ。

どういうことかと言うと、以下のようにして貼り付けられたウィジェットを、コードで操作したい場合がある、ということだ。

    <!-- ID「button」で貼り付けられたボタン -->
    <div id="button" dojoType="dijit.form.Button" label="クリックして!">
    </div>

たとえば、このボタンのラベルを変更したいとする。そのためにはボタンウィジェットのsetLabel()メソッドを用いればよいのだが、そもそもボタンウィジェットのインスタンスを取得しなければならない。

1つの方法としては、dijit.byId()を使用するというものがある。取得する対象がDOMではなくウィジェットのインスタンスなので、dojo.byId()ではないので注意。

    // dijit.byId()を用いてウィジェットのインスタンスを取得
    var button = dijit.byId("button");
    button.setLabel("クリックされました!");

もう1つの方法が、マークアップの要素にjsId属性を付与する方法だ。jsIdを指定すると、ウィジェットのインスタンスにその変数名でアクセスできるようになる。

    <!-- jsIdに「aButton」を指定 -->
    <div id="button" dojoType="dijit.form.Button" label="クリックして!"
      jsId="aButton">
    </div>

    aButton.setLabel("クリックされました!");

どちらもよく用いられる方法なので、しっかり押さえておこう。