Dijitとは

Dijitは、一言で言うとDojoが持つUIフレームワークだ。非常に多くのUIウィジェットが提供されているのみならず、拡張も容易なように設計されている。しかも、他の多くのAjaxフレームワークとは異なり、マークアップのみでUIウィジェットをページに貼り付けられるという点も大きな特徴だ。

Dijitの基本はマークアップ

では、Dijitの基本を学んでいこう。図2のサンプルは、ボタンを押すとアラートで「Hello World」を表示するだけのものだ。

図2 Hello Worldを表示するプログラム

単純なプログラムであるが、Dijitを理解するための要素がふんだんに盛り込まれているので、しっかり解説していきたい。とくに、マークアップを用いてウィジェットを配置するというDijitのプログラミング手法は、Dijitの大きな利点だ。リスト1にそのソースコードを示す。

リスト1 hello.html

    <html>
    <head>
    <title>Hello, Dojo!</title>
    <meta http-equive="Content-Type" content="text/html;charset=UTF-8"/>
    <!-- (1) dojo.jsの読み込み。djConfigに注目! -->
    <script src="../js/dojo/dojo.js" djConfig="parseOnLoad: true">
    </script>
    <!-- (2) CSSを読み込み -->
    <style type="text/css">
      @import "../js/dojo/resources/dojo.css";
      @import "../js/dijit/themes/tundra/tundra.css";
    </style>
    <script type="text/javascript">
      <!-- (3) dojo.parserモジュールの読み込み -->
      dojo.require("dojo.parser");
      <!-- (4) 使用するウィジェットを読み込み -->
      dojo.require("dijit.form.Button");
    </script>
    </head>
    <!-- (5) テーマの指定 -->
    <body class="tundra">
      <!-- (6) ボタンの貼り付け -->
      <div id="button" dojoType="dijit.form.Button"
        label="クリックして!"
        onClick="alert('こんにちは!');">
      </div>
    </body>
    </html>

まずは詳しい説明を抜きにして、「(6) ボタンの貼り付け」の部分を見ていただきたい。特殊な属性「dojoType」を付与したdivタグを配置しているが、この部分が画面上のボタンに対応する。これが、Dijitで行う「マークアップスタイルのUIプログラミング」の基本だ。このように、簡潔なマークアップでUIの構造を定義するためには、次ページで説明するようないくつかの手順を踏む必要がある。