SHOEISHA iD

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

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

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

Dojo道場 ~ 第6回「Dijitウィジェットを利用したアプリケーション作成の基礎」

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

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

Dijitウィジェットの生成

 Dijitウィジェットはdijitパッケージ内に実装のクラスがあります。Dijitウィジェットを利用するには対象のウィジェットをページ内に配置する必要がありますが、主に2つの方法があります。 以下、ボタン・ウィジェット(dijit.form.Button)を例にとって説明します。

HTMLマークアップによる静的な生成

 1つ目は、今までのサンプルでお馴染みの方法です。 dojoType="ウィジェットのクラス名"というカスタム属性を付けたdiv要素をページ内に記述し、djConfigにparseOnLoad: trueを設定しておくと、 自動的にdojo.parse()メソッドが呼ばれ、div要素の位置にウィジェットが生成され表示されます。 ただし描画されるウィジェットは事前に読み込まれている必要があります。静的配置の場合はページ中にdojo.require()を書くのが一般的です。

 次のサンプル・コードではボタン(dijit.form.Button)をひとつ、マークアップで静的に配置しています。

リスト2. ウィジェットの静的配置
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットの静的配置</title>
<!-- Dojoの基本CSSと利用するテーマのメインCSSファイルを読み込んでおく  -->
<style>
@import url("../dojo-release-1.5.0/dojo/resources/dojo.css");
@import url("../dojo-release-1.5.0/dijit/themes/claro/claro.css");
</style>
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser"); // DojoがHTMLをパースするのに必要
dojo.require("dijit.form.Button"); // ウィジェットのクラスは事前にロードする必要がある
</script>
</head>
<body class="claro">
<!-- bodyにclaroテーマを指定。以下ウィジェットは指定したテーマで描画される -->
<div dojoType="dijit.form.Button">サンプル・ボタン</div>
</body>
</html>

 表示結果はこうなります。

図2 リスト2の表示結果
図2 リスト2の表示結果

 静的配置は利用したいウィジェットの個数や種類、HTMLページ内での位置(表示上の位置ではなくHTMLソース内でウィジェットのDIV要素が記述される位置)がはっきりと決まっている場合に使います。

JavaScriptプログラムによる動的な生成

 2つ目は、JavaScriptコードによる動的な生成方法です。利用したいクラスをnewしてウィジェットを生成します。データに応じて生成するウィジェットの数が変わる場合や、生成したいウィジェットに与えるパラメーターが異なる場合、生成されるウィジェットそのものが異なる場合などに使います。 newしたとき呼び出されるコンストラクタ関数は次の形式をしています。

表1. ウィジェットのコンストラクタ
メソッド 説明
constructor (/*Object?*/ params, /*DomNode|String*/ srcNodeRef) ウィジェットクラスをnewしたとき呼び出されます。必要とするパラメーターはparamsにオブジェクトとして渡します。 第2引数srcNodeRefを渡すと、生成されたウィジェットは渡したDOMノードの位置に描画されます(srcNodeRefのノードをウィジェットのdomNodeが置き換えます)。

 次の2つの関数ではボタン・ウィジェットを動的生成しています。2つの関数でsrcNodeRefを渡すかどうかを変えています。

リスト3. ウィジェットの動的生成(1): ボタン・ウィジェットをnewする
//HTML DOMツリーのどこかに <div id="buttonNode1"></div>と<div id="buttonContainer1"></div>がある

var someFunction1 = function() {
	// 動的生成の場合も対象のクラスは事前にロードされている必要がある
	dojo["require"]("dijit.form.Button"); // 動的生成の場合この形式で呼び出すとよい(注4)
	var button = new dijit.form.Button({"label": "動的に生成されたボタン1"}, "buttonNode1");
	// 第2引数(srcNodeRef)を指定すると、ウィジェットは渡されたDOMノードを置き換える形で生成される
};

var someFunction2 = function() {
	dojo["require"]("dijit.form.Button");
	var button = new dijit.form.Button({"label": "動的に生成されたボタン2"});
	// srcNodeRefを指定しない場合、生成されたウィジェットはどこにも配置されていない
	
	dojo.byId("buttonContainer1").appendChild(button.domNode); // ボタンのdomNodeをDOMツリーに挿入する
};
注1

 もしdojo.require()を関数内などに記述すると、第4回で扱ったビルド・システムがソースコード内にdojo.requireという記述を発見するとビルドする対象に含めようとする関係で、ビルド時にエラーを起こしてしまいます。 エラー回避のため配列形式で関数を参照して呼び出します。

 典型的な動的生成の活用場面として、データの中身に応じてウィジェット生成時に与えるパラメーターを変えたい時があります。 次のサンプル・コードではページのロード時にデータ(labels.json)の内容に応じて、生成するウィジェットに与えるパラメーターを変えています。

リスト4. ウィジェットの動的生成(2): データの内容に応じてウィジェットに与えるパラメーターを変えて動的に生成する
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットの動的生成: 動的にパラメーターを変える</title>
<style>
@import url("../dojo-release-1.5.0/dojo/resources/dojo.css");
@import url("../dojo-release-1.5.0/dijit/themes/claro/claro.css");
</style>
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");

dojo.addOnLoad(function() {
	var data = dojo.xhrGet({
		url: "data/labels.json",
		// 中身は {labels: ["ボタン1", "ボタン2", "ボタン3"]} というラベルの配列データ
		handleAs: "json",
		load: function(data) {
			dojo.forEach(data.labels, function(label) {
				var button = new dijit.form.Button({"label": label});
				dojo.place(button.domNode, "container");
			});
		}
	});
});
</script>
</head>
<body class="claro">
	<div id="container"></div> <!-- ここに3つのボタンが追加される -->
</body>
</html>

 下の図は実行結果です。このように設定ファイルなどに追い出せば、HTMLファイルを変更することなくさまざまなところで表示を変えることができますね。

図3 リスト4の表示結果
図3 リスト4の表示結果

次のページ
ウィジェットのイベント処理

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

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

もっと読む

この記事の著者

仁田 圭祐(ニッタ ケイスケ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所にて日々Webアプリケーションに関わる製品開発をしています。

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

三浦 圭司(ミウラ ケイジ)

日本アイ・ビー・エム株式会社ソフトウェア開発研究所に勤務。現在は、エンタープライズ向け製品のWebアプリケーションのユーザー・インターフェース開発に従事。

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング