演習 6: Dojo データ・グリッドの作成

この演習では引き続き、Web クライアント・インターフェースの作成方法について学習します。Dojo データ・グリッド・ウィジェットをページに追加し、グリッドに内容を取り込みます。

ムービー・オブジェクトを表示するグリッドを作成します。

「ソース」ビューで、以下のステップに従います。

ステップ	コード
境界コンテナーの中央領域内に、データ・グリッド用の以下のコードを追加します。
モジュール ID のセット (DataGrid および ItemFileReadStore) を require 関数のモジュール依存配列に追加します。
Grid.css および claroGrid.css のカスケード・スタイル・シート (CSS) リンクを Web ページのソース・コードに追加します。ヒント: Grid.css および claroGrid.css はデータ・グリッド表示に固有のスタイル・シートです。

次に、サービス URL または JSON ファイルからデータを取得するための Ajax 関数を作成します。Dojo xhrget 関数を使用してデータを取得します。 require コールバック関数内で dojo.ready 匿名関数を見つけ出します。dojo.ready 関数内で dojo.xhr と入力します。
コンテンツ・アシストを開いてから、dojo.xhrget テンプレートを選択します。
コンテンツ・アシストにより、xhrGet 関数用の Dojo テンプレートが提供されます。テンプレートを選択すると、ツールチップ内のコードがソース・コードに追加され、次のようになります。
```
dojo.xhrGet( {
	url : "url",
	handleAs : "text",
	load : function(response, ioArgs) {
		
	},
	error : function(response, ioArgs) {
	}
});
```

URL 属性を、サービス URL またはデータが入った JSON ファイルの場所に変更します。

オプション	説明
JSON ファイルをダウンロードした場合	JSON ファイルの相対パス `MovieList.json` を入力します。
RPC アダプター・サービスを使用する場合	テキスト `/MyMovieProject/RPCAdapter/httprpc/MovieService/getMovieList` をコピーし、URL プロパティーに貼り付けます。

handleAs 属性を json に設定します。RPC アダプター・サービスが、データの入った JSON ファイルを返すためです。
データが正常にロードされると、load プロパティーで宣言された関数が実行されます。load プロパティーに以下のコードを追加します。このコードは、データ・グリッドにデータを取り込みます。
```
var newData = {
					identifier: "title",
					items: response.result
			};
			
var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
			var grid = dijit.byId("gridId");
			  grid.setStore(dataStore);
```
このコードでは、以下のアクションが実行されます。
- 応答でロードされたデータを、dojo.data.ItemFileReadStore に必要な形式に変更します。
- 形式変更されたデータを使用して ItemFileReadStore データ・ストアを作成します。
- 形式変更されたデータをデータ・グリッドに追加します。
変数名の前に var キーワードを追加すると、変数の有効範囲は load 関数に対してローカルになります。
error 属性で宣言される関数には、次のコードを追加します。 alert("An error occurred while invoking the service.");
ページを保存します。
Web ページをテストするには、「エンタープライズ・エクスプローラー」ビューで「ShowMovies.html」を右クリックし、「実行」 > 「サーバーで実行」を選択します。

以下のように、サーバーのリストでサーバーを選択します。

オプション	説明
JSON ファイルからデータに直接アクセスする	「Web プレビュー・サーバー」を選択します。
RPC アダプター・サービスをデータ・ソースとして使用する	「WebSphere Application Server 8.0」を選択する。

「終了」をクリックします。ブラウザーで ShowMovies.html ページが表示されます。

ShowMovies.html のソース・コードは、以下のサンプル・コードのようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
	href="dojo/dijit/themes/claro/claro.css">
<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"
	data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
	src="dojo/dojo/dojo.js"></script>
<script type="text/javascript">
	require(
	// Set of module identifiers
	[ "dojo", "dojo/parser", "dijit/layout/BorderContainer",
			"dijit/layout/ContentPane", "dojox/grid/DataGrid",
			"dojo/data/ItemFileReadStore" ],
	// Callback function, invoked on dependencies evaluation results
	function(dojo) {
		dojo.ready(function() {
			dojo.xhrGet({
				url : "MovieList.json",
				handleAs : "json",
				load : function(response, ioArgs) {
					var newData = {
						identifier : "title",
						items : response.result
					};
					var dataStore = new dojo.data.ItemFileReadStore({
						data : newData,
						id : "dataStoreId"
					});
					var grid = dijit.byId("gridId");
					grid.setStore(dataStore);
				},
				error : function(response, ioArgs) {
				}
			});
		});
	});
</script>
<link rel="stylesheet" type="text/css" title="Style"
	href="dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style"
	href="dojo/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
	<div id="BorderContainer" style="height: 100%; width: 100%"
		data-dojo-type="dijit.layout.BorderContainer"
		data-dojo-props="design:'headline'">
		<div data-dojo-type="dijit.layout.ContentPane"
			data-dojo-props="region:'top'" style="text-align: center">My Movie Web Application!</div>
		<div data-dojo-type="dijit.layout.ContentPane"
			data-dojo-props="region:'center'">
			<table id="gridId" autowidth="true"
				data-dojo-type="dojox.grid.DataGrid"
				data-dojo-props="rowSelector:'20px'">
				<thead>
					<tr>
						<th field="title">Title</th>
						<th field="director">Director</th>
						<th field="actor">Actor</th>
						<th field="description">Description</th>
					</tr>
				</thead>
			</table>
		</div>
		<div data-dojo-type="dijit.layout.ContentPane"
			data-dojo-props="region:'right'"></div>
	</div>


</body>
</html>

演習 6: Dojo データ・グリッドの作成

演習のチェックポイント