はじめに
前回の記事ではカスタム・ウィジェットの作成を通して、ウィジェットの基本的な仕組みやテンプレートの活用方法を紹介しました。
ある程度以上の規模のアプリケーション開発においては、Dojo Toolkitのウィジェットのようなコンポーネント・ベースのプログラミングが重要な要素となります。コンポーネント化は単に再利用性を高めるだけではなく、プログラムの責任範囲を明確にしたり、関連したコードをまとめることで、プログラムの見通しがよくなり、機能追加、問題修正、保守などにおける生産性の向上につながります。
特に、Webアプリケーションのユーザー・インターフェースは、HTML、CSS、JavaScriptを組み合わせて実装するため、これらのコードを適切に関連付け、管理できるウィジェットはキーのコンポーネント技術になります。また、ユーザー・インターフェースのコンポーネント化では、下位のコンポーネントを組み合わせて上位のユーザー・インターフェースを実現するコンポジット・コンポーネントを実装する手法が広く行われています。
今回の記事では、既存のウィジェットを組み合わせて、アプリケーションが必要とする機能を提供するコンポジット・ウィジェットを作成する例をご紹介します。
テンプレートの利用
ここで例にとるのは、アプリケーション画面の一部に表示するコメント送信フォームを実現するウィジェットです。このウィジェットは、コメントと名前を入力して、ボタンをクリックすることで、AJAXを利用して、サーバーにコメントを送信する機能を提供するものとします。まずは、前回同様、テンプレートの機能を利用して、ウィジェットの大まかなレイアウトをデザインします。以下のような HTMLとJavaScriptのコードにより、コメント送信ウィジェットのベースを作成します。
<div>
<div>
<textarea>コメント</textarea>
</div>
<div>
<input value="名前"/>
<button>コメント送信</button>
</div>
</div>
dojo.provide("examples.widget.CommentForm");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare("examples.widget.CommentForm", [dijit._Widget, dijit._Templated], {
// テンプレートHTMLの指定
templateString: dojo.cache("examples.widget", "templates/CommentForm.html")
});
