.png)
はじめに
高機能JavaScriptライブラリとして、操作性、応答性にすぐれたWebアプリケーションのUI構築に威力を発揮する「Dojo Toolkit」。その多彩な機能の中でも、特にビジネス アプリケーションに不可欠なコンポーネント（ウィジェット）が、データコレクションの表示、編集機能を提供するDataGridです。本稿では、この多機能で柔軟なカスタマイズが可能なDataGridを利用した、典型的なデータ入出力のUI作成方法を紹介します。
Data APIの利用
Dojo 1.1までは、Gridという名前で提供されていたデータ コレクション用のウィジェットは、Dojo 1.2で、Dojoの標準Data APIに基づいたDataGridとして進化しています。1.1までのGridも互換性のために残されていますが、今後はDataGridとData APIを組み合わせて利用することが推奨されます。
Data APIは、データソースやバックエンドのサービスの詳細を隠蔽、抽象化することで、クライアント側でのデータへのアクセスをデータソースやサービスに依存しない方法で記述できるようにしたフレームワークです。JSON（JavaScript Object Notation）、CSV、汎用XMLなどの標準的なデータ形式用には、Data APIに基づいたData Storeと呼ばれるコンポーネントがあらかじめ用意されていますし、アプリケーション特有のデータソースやサービスに応じて独自のData Storeを実装して、DataGridなどのウィジェットと結合することができます。
本稿では、JSON用のItemFileWriteStoreを使ってDataGridで表示するデータ コレクションを定義します。ItemFileWriteStoreをはじめとして、多くのDataStoreはURLなどによりサーバー上のリソースやサービスを指定し、Ajaxの手法でデータを取得するのが一般的ですが、ここでは簡便化のため、JSON用のデータを直接指定して、DataStoreを定義します。以下のJavaScriptコードにより、名前（name）、メールアドレス（email）、グループ番号（group）、生年月日の数値表現（birthDate）、画像のURL（photo）からなるデータコレクションが定義されます。
var myDataStore = new dojo.data.ItemFileWriteStore({data: {items: [
{name: "鈴木一郎", email: "suzuki@ibm.com", group: 3,
birthDate: 0, photo: "images/photo1.gif"},
{name: "佐藤花子", email: "satoh@ibm.com", group: 2,
birthDate: 450457200000, photo: "images/photo2.gif"},
{name: "田中正夫", email: "tanaka@ibm.com", group: 2,
birthDate: 646758000000, photo: "images/photo3.gif"},
{name: "山田民子", email: "yamada@ibm.com", group: 1,
birthDate: 586882800000, photo: "images/photo4.gif"},
{name: "加藤三郎", email: "katoh@ibm.com", group: 3,
birthDate: -575024400000, photo: "images/photo5.gif"}
]}});
DataGridの作成
他のウィジェット同様、DataGridもHTMLマークアップを利用して作成する方法とJavaScriptのコードで動的に作成する方法がサポートされています。まず、上記の Data Storeに格納されている、名前とメールアドレスを表示する簡単なDataGridを作成するHTMLマークアップを以下に示します。
<table dojoType="dojox.grid.DataGrid" id="myDataGrid"
store="myDataStore">
<thead>
<tr>
<th field="name" width="auto">名前</th>
<th field="email" width="auto">メールアドレス</th>
</tr>
</thead>
</table>
store属性にData Storeの変数名を指定するだけで、DataGridが自動的にData Storeに対してData API経由でアクセスし、データを取り出して表示してくれます。ここでは、<th>タグを使って、表示するフィールド（カラム）を指定しています。<th>タグのfield属性がJSONのプロパティ名（Data APIの属性名）を指し、<th>の内容のテキストはカラムのヘッダとして表示されます。
同等のDataGridをJavaScriptでは次のように作成することができます。
var myDataGridStructure = [
{cells: [
{name: "名前", field: "name", width: "auto"},
{name: "メールアドレス", field: "email", width: "auto"}
]}
];
var myDataGrid = new dojox.grid.DataGrid({id: "myDataGrid",
store: myDataStore, structure: myDataGridStructure});
<th>タグの代わりに、structureプロパティにDataGridのビューを定義するためのオブジェクトを指定しています。HTMLマークアップでDataGridを生成する場合でもDataGridのstructure属性としてビュー定義オブジェクトの変数名を指定することができます。この後説明するさまざまなカスタマイズを行うような場合には、structure属性を使うほうが実装しやすいので、本稿ではこの方法を採用します。コード全体は次のようになります。
<html>
<head>
<title>DataGrid サンプル</title>
<style type="text/css">
@import "../dijit/themes/soria/soria.css";
@import "../dojo/resources/dojo.css";
@import "../dojox/grid/resources/Grid.css";
@import "../dojox/grid/resources/soriaGrid.css";
body {
margin: 10px;
}
#myDataGrid {
width: 300px;
height: 100px;
}
</style>
<script type="text/javascript" src="../dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.DataGrid");
var myDataStore = new dojo.data.ItemFileWriteStore({data: {items: [
{name: "鈴木一郎", email: "suzuki@ibm.com", group: 3,
birthDate: 0, photo: "images/photo1.gif"},
{name: "佐藤花子", email: "satoh@ibm.com", group: 2,
birthDate: 450457200000, photo: "images/photo2.gif"},
{name: "田中正夫", email: "tanaka@ibm.com", group: 2,
birthDate: 646758000000, photo: "images/photo3.gif"},
{name: "山田民子", email: "yamada@ibm.com", group: 1,
birthDate: 586882800000, photo: "images/photo4.gif"},
{name: "加藤三郎", email: "katoh@ibm.com", group: 3,
birthDate: -575024400000, photo: "images/photo5.gif"}
]}});
var myDataGridStructure = [
{cells: [
{name: "名前", field: "name", width: "auto"},
{name: "メールアドレス", field: "email", width: "auto"}
]}
];
</script>
</head>
<body class="soria">
<table dojoType="dojox.grid.DataGrid" id="myDataGrid"
store="myDataStore" structure="myDataGridStructure"></table>
</body>
</html>
"dojo", "dijit", "dojox" などのパスはこのHTMLファイルを保存する場所からの相対として記述してあります。このHTMLファイルをブラウザに読み込むと、次のようなDataGridが表示されます。
