Dojo道場 ～ 第8回「コンポジット・ウィジェットでコンポーネント・プログラミング」

「Dojo道場」～実用アプリ構築のためのベストプラクティス

動的なウィジェットの生成

　次にコメントと名前を入力するためのテキスト・ボックスとそれらの情報をサーバーに送信する処理を実行するボタンを追加しますが、ここで、Dojo Toolkitで提供されているTextarea、TextBox、Buttonウィジェットをそれぞれ利用することにします。

　テンプレートと既存のウィジェットを使ってコンポジット・ウィジェットを作成するには、大きく分けて二通りの方法があります。

　一つ目は、テンプレートには、dojoAttachPoint属性でウィジェットの配置場所だけを用意しておき、コンポジット・ウィジェットのJavaScriptコードのbuildRendering()などのメソッド内で、組み込むウィジェットを動的に生成する方法です。この方法は、組み込むウィジェットのパラメータを動的に決定する必要がある場合や、ウィジェットの生成そのものを特定の条件の場合のみに行う場合に有効です。

　たとえば、以前にご紹介したデータAPIを実装したデータ・ストアをパラメータとして与えるTreeウィジェットやカラムの情報を細かくカスタマイズするDataGridなどのウィジェットの場合は、そのようなJavaScriptによる動的生成の方が効果的でしょう。ここでは簡単な例として、Textareaの桁数（cols）、TextBoxの値が空の場合に表示されるメッセージ（placeHolder）、Buttonのラベル（label）にこのコンポジット・ウィジェットに指定されたパラメーターを渡すようにします。

　このように、配下のウィジェットのパラメータをコンポジット・ウィジェットのパラメータ経由で変更できるようにしておくことで、コンポジット・ウィジェットのカスタマイズ機能を提供することができます（例えば、この例では、コンポジット・ウィジェットを生成するときに、commentColumnパラメータを指定して、Textareaの桁数をカスタマイズできます）。

リスト3. ウィジェットを埋め込むためのテンプレートHTML (examples/widget/templates/CommentForm.html)

<div>
    <div>
        <textarea　dojoAttachPoint="_commentNode"></textarea>
    </div>
    <div>
        <input dojoAttachPoint="_nameNode"/>
        <button dojoAttachPoint="_submitNode"></button>
    </div>
</div>

リスト4. ウィジェット生成コード (examples/widget/CommentForm.js)

dojo.provide("examples.widget.CommentForm");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");

dojo.declare("examples.widget.CommentForm", [dijit._Widget, dijit._Templated], {
    // テンプレートHTMLの指定
    templateString: dojo.cache("examples.widget", "templates/CommentForm.html"),

    // 配下のウィジェット用のパラメーター
    commentColumn: "30",
    nameMessage: "お名前を入力してください",
    submitMessage: "コメント送信",

    buildRendering: function(){
        this.inherited(arguments);

        // dojoAttachPointで指定したノードの位置に動的にウィジェットを生成
        this._commentArea = new dijit.form.Textarea(
            {cols: this.commentColumn}, this._commentNode);
        this._nameBox = new dijit.form.TextBox(
            {placeHolder: this.nameMessage}, this._nameNode);
        this._submitButton = new dijit.form.Button(
            {label: this.submitMessage}, this._submitNode);
    }

});

図1. コンポジット・ウィジェット