ウィジェットレイアウトの再利用
先ほどの例でdijit.form.Buttonクラスを継承していたように、Dojoツールキットが提供するウィジェットを継承して新しい挙動をするクラスを作ることは可能です。しかし、より大きな部品に複数のウィジェットが組み込まれているような「複合部品」を作るには便利な方法ではありません。
複数の部品が組み込まれている部品を作るには「テンプレート・ウィジェット」という機能を使うと便利です。ここでのテンプレートとは、ウィジェットをHTML構造＝DOMから生成していく方法、と考えてください。
テンプレートの指定
テンプレート・ウィジェットを作るにはdijit._Widget（Dijitのベースクラス）とdijit._Templated、2つのクラスを多重継承します。dojo.declareの継承元クラスを2つ以上指定するには、配列にします。
また、テンプレートとなるHTMLは、次の2つの方法で定義することができます（DOMで設定する方法もありますが、ここでは割愛します）。
内包
クラスを定義するときにtemplateStringというクラス変数を定義します。
外部提供
templatePathに指定したURLからファイルを読み込みます。
文字を直接書く場合、リスト8のようになります（※templateStringの後ろは、実際には改行せずに一行で書くか、＋でつなぎます）。
dojo.provide("yone.HelloWorld");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare(
"yone.HelloWorld",
[dijit._Widget,dijit._Templated],
{
templateString:
"<table border='1'><tr><td>Hello</td><td>World</td></tr></table>"
}
);
外部にファイルを置く場合、リスト9のようになります。
dojo.provide("yone.HelloWorld2");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare(
"yone.HelloWorld2",
[dijit._Widget,dijit._Templated],
{
templatePath: dojo.moduleUrl("yone", "templates/HelloWorld.html")
}
);
変数の埋め込み
テンプレートに、クラスの変数を埋め込むには${変数名}を使います。
例えば、クラスにtextという変数があるとき、そのtextの初期値をテンプレートに埋め込むには、次のような記述をします。
text : "",
templateString "${text}さん、こんにちは。"
<div dojoType="yone.MyDijit" text="米持"></div>
子要素を内包する
子要素に指定された内容を包含するにはdojoAttachPointを使います。自分が定義しているテンプレートの中で、子要素をはめ込みたい場所のノードにdojoAttachPoint='containerNode'を指定します。
<table border='1'> <tr><td> <span dojoAttachPoint='containerNode' ></span>さんこんにちは </td></tr> </table>
<div dojoType="yone.MyDijit">米持</div>
まとめ
もう少し詳しく説明すれば、細かいところでJavaやC++と挙動が違うところはありますが、以上の知識があれば、とりあえずはオブジェクト設計をしてクラスと継承関係を作ってJavaScriptでプログラミングができるようになります。また、Dojoツールキットが提供する既存コンポーネントなどを継承し、改造して部品を作って行ったり、再利用したりすることができるので、開発効率がグンとアップするはずです。
この記事は、IBM developerWorks主催の渋谷テクニカルナイトで2008年10月10日に実施したセミナーの内容を記事に起こしたものです。講演資料およびMP3音声ファイルがサイトからダウンロードできます。
参考文献
- 『The Book of Dojo』
- 『Dojo, The Definitive Guide』 Matthew A. Russell著、O'RILLY、2008年6月
