パーフェクトDojo(3) ウィジェットの基本的な構成要素

深くて広いDojo Toolkitの世界を紹介する、当連載は今回3回目だ。

まずは個人的な事情により、前回の記事からずいぶん間が空いてしまったことをお詫びしておきたい。連載をお休みしていた間にもDojoは進化を続けており、バージョン1.1がリリースされている。1.1でも魅力的な新機能が満載で、連載で紹介しなくてはならない事柄が大幅に増えてしまっている。随分長い連載になってしまいそうだが、気長におつきあいいただきたい。

今回も、前回に引き続きDijitに関するお話である。Dijitウィジェットを構成する基本的な概念についてお話しする。以前の特集では駆け足でしか紹介できなかったが、丁寧にわかりやすく説明することを心がけたい。

Dijitの基本用語を学ぶ

では、Dijitで使用される基本的な用語をまずは説明しておこう。これらの用語はこの先も頻繁に利用するので、まずはしっかり身につけておきたい。

DijitによるUIプログラミングは、「ウィジェット」と呼ばれるUI部品をマークアップ、もしくはJavaScriptコードによって配置することによって行われる。ウィジェットにはボタンやテキストフィールド、チェックボックスと言った基本的なものから、ツールバーやグリッドと言った高度なものも含まれる。

ウィジェットの本質は、DOMを隠蔽したJavaScriptクラスだ。たとえばボタンウィジェットはdijit.form.Buttonクラス、テキストフィールドはdijit.form.TextFieldクラスによって表される。

こうしたウィジェットクラスを構成するのは、以下のような要素だ。

属性

属性は、ウィジェットの状態を表す。ウィジェットの生成時に指定することができ、それ以降は読み取り専用(というか、直接書き換えてはならない)となる。例としては、ボタンのラベル(label属性)や、入力フォームの利用可否(disabled属性)といったものだ。

メソッド

ウィジェットが持つ操作であり、JavaScriptコードによって呼び出すことが可能。例えば、ウィジェット生成後に属性値を操作するためには、「setLabel()」などのメソッドを使用することになる。

拡張ポイント

拡張ポイントとは、「開発者によって上書き(オーバーライド)されることが期待されているメソッド」のことである。例えば、ボタンクリック時のイベント処理などは、onClickと言う拡張ポイントをオーバーライドすることで実現することになる。

サンプルコードで基本用語を確認

では、これらの用語をサンプルコードでしっかり確認しておきたい。以下のサンプルでは、ボタンをクリックすると、ボタンのラベルが「クリック!」から「こんにちは!」に変化する。


クリック前	クリック後

サンプルのソースコードは以下の通りだ。以下のサンプルは、Dojoのインストールディレクトリに合わせて多少修正するだけで、皆さんの環境でも簡単に動かせると思う。ぜひ試してみていただきたい。

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <!-- 環境に合わせてDojoへのパスを書き換えてください -->
  <script src="../dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true">
  </script>
  <style type="text/css">
    /* 環境に合わせてDojoへのパスを書き換えてください */
    @import "../dojo-release-1.1.0/dojo/resources/dojo.css";
    @import "../dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
  </style>
  <script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.form.Button");
  </script>
  </head>
  <body class="tundra">
    <!-- (1) ボタンの張り付け。labelが属性 -->
    <button id="button" dojoType="dijit.form.Button" label="クリック!">
      <!-- (2) 拡張ポイントonClickのオーバーライド -->
      <script type="dojo/method" event="onClick">
        // (3) dijit.byId()により、ウィジェットのインスタンスを取得
        var button = dijit.byId("button");
        // (4) メソッドsetLabel()の呼び出し
        button.setLabel("こんにちは!");
      </script>
    </button>
  </body>
</html>

以下に、このサンプルの解説を行う。

(1) ウィジェットをマークアップで貼り付けるには、任意のタグに「dojoType」を指定すれば良い、ということは前回お話しした。ここで、ボタンのラベルを指定するために「label」と言う属性を指定していることに注目してほしい。マークアップによるDijitプログラミングでは、ウィジェットの属性を指定するのに、通常のHTML属性を用いることができる。

(2) ボタンクリック時のイベントハンドラを記述しているのがこの部分だ。見慣れない書き方だと思うので、解説が必要だろう。

Dijitでは、拡張ポイントのオーバーライドを行うために、入れ子になったscriptタグを用いることができる。注目していただきたいのは、「dojo/method」を指定されたtype属性と、「onClick」が指定されたevent属性だ。これにより、「拡張ポイントonClickを、scriptタグ内のコードでオーバーライドする」という指定を行っている。ウィジェットをマークアップした場所と非常に近い箇所にイベントハンドラのコードを置くことができるため、コードの見通しが良い。

(3) 「ウィジェットの構成要素を説明する」という今回の趣旨からは外れるが、重要なことなので解説しておきたい。ウィジェットのインスタンスを取得するには、「dijit.byId("ID文字列")」を使用する。ID文字列に指定するのは、dojoTypeを指定した要素のID属性だ。ここではID「button」を指定することで、ボタンウィジェット(dijit.form.Buttonクラス)のインスタンスを取得している。決して「dojo.byId()」(document.getElementById()とほぼ同じ)と混同することのないように!

(4) label属性を書き換えるため、setLabel()メソッドを使用している。前述した通り、ウィジェットの生成後にウィジェットの属性を書き換えるには、こうしたメソッドを用いる必要がある。