UIウィジェットの自作方法

前提となる、Dojoのオブジェクト指向サポートに関する知識を学んだところで、今度はUIウィジェットの自作に挑戦してみよう。まずは、以下のようにマークアップで貼り付けると画面に「Hello, Shumpei」と表示されるようなウィジェット「mycom.Hello」を作ってみる。

<!-- 結果は「Hello, Shumpei」と表示されるウィジェット -->
<div dojoType="mycom.Hello">Shumpei</div>

自作する方法は2通りある。1つは、「dijit.Declaration」を用いて行う簡易的なもの。もう1つは、ウィジェットのクラスを継承した、新しいクラスを作成する方法だ。前者は手軽にウィジェットを作れる反面、複数のページでウィジェットを共有するのが難しい。後者は、ウィジェットの動作方法をある程度把握しないと作成が難しいが、複数ページ間で共有することも容易だし、柔軟なプログラミングが可能だ。Dojoが提供する標準ウィジェットはほとんど後者の方法で提供されている。

では、ウィジェットの作成方法を見ていこう。

dijit.Declarationを用いたウィジェットの作成

dijit.Declarationを用いてウィジェットを作成するのは非常に簡単で、以下の手順を踏むだけだ。

  1. 「dojoType="dijit.Declaration" widgetClass="ウィジェットのクラス名"」を指定したタグを記述する
  2. 1で記述したタグの中に、ウィジェットのテンプレートを記述する

これらの手順を踏まえてウィジェット「mycom.Hello」を作成し、使用するサンプルは以下のようになる。

    <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" djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dijit.Declaration");
    </script>
    </head>
    <body class="tundra">
      <!-- ウィジェット「mycom.Hello」の作成 -->
      <div dojoType="dijit.Declaration" widgetClass="mycom.Hello">
        <!-- HTMLテンプレート -->
        Hello, <span dojoAttachPoint="containerNode"></span>
      </div>

      <!-- 作成したウィジェットを使用 -->
      <div dojoType="mycom.Hello">Shumpei</div>
    </body>
    </html>

HTMLテンプレート内で使用している**dojoAttachPoint**属性は、この属性が付与された要素のDOMを、ウィジェットクラス内の変数として保持するためのものだ。

とりあえずここでは「dojoAttachPoint="containerNode"を付与した要素は、マークアップの内部要素に置換される」と言うことだけ覚えておけばよい。つまりここでは、文字列「Shumpei」に置換されるということだ。