SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

 ある程度以上の規模のアプリケーション開発においては、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")
});

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

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

日本アイ・ビー・エム公認 ソフトウェア・エバンジェリスト。alphaWorks、developerWorks、インキュベーション系製品、アセットなどのテクノロジーの推進をしつつ、テクノロジー戦略、エバンジェリストチームをリードしている。講演や執筆も多数。主な著書に「かんたんサーバーサイドJava」(翔泳社)、「Webサービス完全解説」(翔泳社)がある。developerWorks Japan ブログ 「米持幸寿のブログ

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6123 2011/09/01 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング