Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/09/01 14:00

 本稿では、オープンソースのJavaScriptライブラリ「Dojo Toolkit」の既存ウィジェットを組み合わせて、アプリケーションが必要とする機能を提供するコンポジット・ウィジェットを作成する例を紹介します。

目次

はじめに

 前回の記事ではカスタム・ウィジェットの作成を通して、ウィジェットの基本的な仕組みやテンプレートの活用方法を紹介しました。

 ある程度以上の規模のアプリケーション開発においては、Dojo Toolkitのウィジェットのようなコンポーネント・ベースのプログラミングが重要な要素となります。コンポーネント化は単に再利用性を高めるだけではなく、プログラムの責任範囲を明確にしたり、関連したコードをまとめることで、プログラムの見通しがよくなり、機能追加、問題修正、保守などにおける生産性の向上につながります。

 特に、Webアプリケーションのユーザー・インターフェースは、HTML、CSS、JavaScriptを組み合わせて実装するため、これらのコードを適切に関連付け、管理できるウィジェットはキーのコンポーネント技術になります。また、ユーザー・インターフェースのコンポーネント化では、下位のコンポーネントを組み合わせて上位のユーザー・インターフェースを実現するコンポジット・コンポーネントを実装する手法が広く行われています。

 今回の記事では、既存のウィジェットを組み合わせて、アプリケーションが必要とする機能を提供するコンポジット・ウィジェットを作成する例をご紹介します。

テンプレートの利用

 ここで例にとるのは、アプリケーション画面の一部に表示するコメント送信フォームを実現するウィジェットです。このウィジェットは、コメントと名前を入力して、ボタンをクリックすることで、AJAXを利用して、サーバーにコメントを送信する機能を提供するものとします。まずは、前回同様、テンプレートの機能を利用して、ウィジェットの大まかなレイアウトをデザインします。以下のような HTMLとJavaScriptのコードにより、コメント送信ウィジェットのベースを作成します。

リスト1. レイアウトのみのテンプレートHTML (examples/widget/templates/CommentForm.html)
<div>
    <div>
        <textarea>コメント</textarea>
    </div>
    <div>
        <input value="名前"/>
        <button>コメント送信</button>
    </div>
</div>
リスト2. テンプレートを利用したウィジェット・コード (examples/widget/CommentForm.js)
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")
});

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 野口 雅人(ノグチ マサト)

    日本アイ・ビー・エム株式会社 ソフトウェア開発研究所 シニア・テクニカ ル・スタッフ・メンバー 1990年、日本IBM入社。ホームページ・ビルダー、Rational Application Developer などの製品開発に従事。現在はWeb 2.0/RIA関連のソフトウェア開発を担当。

  • 米持 幸寿(ヨネモチ ユキヒサ)

    日本アイ・ビー・エム公認 ソフトウェア・エバンジェリスト。alphaWorks、developerWorks、インキュベーション系製品、アセットなどのテクノロジーの推進をしつつ、テクノロジー戦略、エバンジェリストチームをリードしている。講演や執筆も多数。主な著書に「かんたんサーバーサイドJava」(...

バックナンバー

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

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5