パーフェクトDojo(2) はじめてのDijitプログラミング

前回のおさらいと今回のお題

Dojo Toolkitの連載記事にようこそ!

当連載は、Dojo Toolkitのあらゆる機能についてのスタートアップガイドと、簡易的なリファレンスを目指すものである。まとまった情報をお望みの方は、特集(第1回、第2回)も参考にどうぞ。

前回は、連載開始にあたってのイントロダクションということで、連載の目的や全体の構成についてお話しした。今回は実質的な連載1回目ということもあり、準備運動がわりの軽い話題から始めていきたいと思う。まずはDojo Toolkitのインストールと、Dijitを用いた簡単なUIプログラミングだ。

Dojo Toolkitのダウンロードとインストール

Dojoのインストール…と言っても難しいことは何もない。公式サイトからアーカイブをダウンロードして、任意の場所に展開するだけだ。展開すると、以下のようなディレクトリレイアウトになっている(現在のバージョンは1.0.2だ)。

Dojo Toolkitのレイアウト

このように、Dojoは大きく3つのパートに分かれている。

すべての基本になるのはdojoパッケージで、JavaScriptの機能を補完するような基本的なAPIが多数定義されている(特集第1回でかなり網羅した)。

dijitパッケージは、UIウィジェットを定義するためのフレームワークと、多数の組み込みウィジェットが格納されている。これらを一度使ってしまうと、あまりの多機能さに、HTMLが通常持っている入力フォームやレイアウト機能を使うのがバカらしくなってしまうほどだ。

dojoxパッケージには実験的なライブラリが多数納められている。dojoパッケージをさらに補完するような基本的なものから、グリッドやチャートなどの高度なUIウィジェット、果てはGoogle Gearsを用いたオフラインフレームワークやFlashに関係するものまで、とにかく雑多で、レベルが高い。

当連載でまず取り上げるのは、Dijitを用いたUIプログラミングだ。

Dijitを始めよう

テンプレートコードのコピー&ペースト

では早速、Dijitプログラミングを始めよう。Dijitアプリの作成を開始するのは一見面倒に思えるが、実は決まったコードをコピー&ペーストすればほとんど完了だ。

リスト1 Dijitアプリのテンプレート

    <html>
      <head>
      <meta http-equive="Content-Type" content="text/html;charset=UTF-8"/>
      <!-- dojo.jsの読み込み -->
      <script src="../js/dojo/dojo.js" djConfig="parseOnLoad: true">
      </script>
      <!-- テーマの読み込み -->
      <style type="text/css">
        @import "../js/dojo/resources/dojo.css";
        @import "../js/dijit/themes/tundra/tundra.css";
      </style>
      <script type="text/javascript">
        dojo.require("dojo.parser");

        // ※ ここで、使用するウィジェットの読み込みを行う

      </script>
      </head>
      <!-- テーマの読み込み -->
      <body class="tundra">

      </body>
    </html>

深く考えることなく、上のコードをコピー&ペーストして保存し、dojo関連のスクリプトやCSSを読み込んでいるところを自分の環境に合わせて修正すれば、準備完了だ(文字コードはUTF-8にしてある)。

では、このテンプレートにコードを追加して、初めてのDijitプログラミングを行ってみよう。今回行うのは、ボタンを一つ貼り付けるだけだ。Dijitでは、それをたった2ステップで実現できる。

ウィジェットの読み込み

まず最初のステップは、Dijitのウィジェットを使用する準備だ。ボタンウィジェットを使用するために、テンプレート内の「※」となっている部分に貼り付ける。

    // ボタンウィジェットの読み込み
    dojo.require("dijit.form.Button");

ウィジェットの貼り付け

これでウィジェットの読み込みはOK。後は実際に貼り付けるだけだ。bodyタグ内に、以下のコードを記述しよう。

    <div dojoType="dijit.form.Button">Dijitのボタン</div>

「dojoType」という属性に、先ほど読み込んだボタンウィジェットのクラス名を指定しているのがポイントだ。これで、このdivタグはボタンウィジェットに置き換えられる(※)。

実行結果は次の通り。一見、普通のボタンのようにも見えるが、これはれっきとしたDijitのウィジェットだ。

はじめてのDijitボタン

Dijitプログラミングは、基本的にこの2ステップの繰り返しになる(もちろん、ボタンが複数あってもdojo.require()の呼び出しは一度でよい)。どれほど複雑なウィジェットであろうと、だ。

※置き換えられる……dojoTypeを付与したタグは本当に「DOMが置き換えられる」ので、どんなタグをウィジェットのソースに用いても結果は変わらない。このサンプルではdivタグを用いたが、「ボタンである」とことをわかりやすくするために<button>や<input type="button">を用いてもよい。