マークアップを用いたDijitプログラミングの準備

マークアップを用いてDijitのプログラミングを行うには、いくつかの準備作業が必要だ。一見手順が多いように思えるが、一度書いてしまえばコピー&ペーストで事足りるので大した作業ではない。以下、文中に「(2)」などの番号が出てきた部分は、リスト1に示したソースコード中のコメント番号と対応している。

dojo.jsの読み込み…(1)

Dojoでプログラミングを行う以上、dojo.jsの読み込みは必須だ。筆者の環境では、図3のようにサンプルプログラムを配置している。

図3 サンプルプログラム配置例

忘れてはならないのが、Dojoの設定用変数である「djConfig」に「parseOnLoad:true」を設定することだ (djConfigについては前回特集を参照)。

    <script src="../js/dojo/dojo.js" djConfig="parseOnLoad: true">

この設定を行っておくことで、後述する「dojoType」属性が付与された要素をDojoが収集し、UIウィジェットとして表示を行ってくれる。

Dijitが必要とするCSSの読み込み…(2)

Dijitを使用する場合、Dojoが提供しているCSSファイルを読み込む必要がある。dojo.cssは、ブラウザごとの見栄えを統一するための基本的なスタイル定義、tundra.cssはテーマ「Tundra」用のCSSだ。テーマとは、DojoのUIウィジェットのルック&フィールを統一する仕組みで、Tundra以外にもSoriaなどが存在する。

      /* 基本的なスタイルの読み込み */
      @import "../js/dojo/resources/dojo.css";
      /* Tundraテーマ用のCSSファイル */
      @import "../js/dijit/themes/tundra/tundra.css";

`dojo.parser`モジュールの読み込み…(3)

マークアップを用いたDijitプログラミングを行うためには、dojo.parserモジュールの読み込みも必須だ。dojo.parserは、前述した「djConfig={parseOnLoad:true}」の設定が行われていると、ドキュメントの読み込み完了後にdojoType属性が付与された要素の解析を行う。

      <!-- (3) dojo.parserモジュールの読み込み -->
      dojo.require("dojo.parser");

テーマの適用…(5)

最後に、使用するテーマを指定する。今回のようにbodyタグのclass属性にテーマの名前を指定すれば、ドキュメント内で使用するすべてのウィジェットが統一された見栄えで表示される。

    <!-- (5) テーマの指定 -->
    <body class="tundra">

ウィジェットの使用

ここまでの作業が終われば、マークアップを用いてUIウィジェットの貼り付けを行うことができる。

使用するウィジェットの読み込み…(4)

使用するウィジェットのモジュールをdojo.require()を用いて読み込む。

      <!-- (4) 使用するウィジェットを読み込み -->
      dojo.require("dijit.form.Button");

ウィジェットの貼り付け…(6)

ウィジェットの貼り付け方は非常に簡単だ。任意のタグ (divがよく用いられる) にdojoType="ウィジェットクラス名"を指定すれば良い (ここで使用しているウィジェットはdijit.form.Button)。ウィジェットが持つ様々な属性も、要素の属性として指定することができる (ここでは、ボタンのラベルをlabel属性で指定している)。

      <!-- (6) ボタンの貼り付け -->
      <div id="button" dojoType="dijit.form.Button"
        label="クリックして!"
        onClick="alert('こんにちは!');">
      </div>