 | レベル: 中級 野口 雅人, ソフトウェア開発研究所, IBM
2009年 02月 13日 高機能JavaScriptライブラリとして、操作性、応答性にすぐれたWebアプリケーションのUI構築に威力を発揮する「Dojoツールキット」。その多彩な機能の中でも、特にビジネス アプリケーションに不可欠なコンポーネント（ウィジェット）が、データコレクションの表示、編集機能を提供する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が表示されます。
データの書式
次にData Storeの他のフィールド、birthDate、group、photoも表示することにしましょう。ただし、JSONデータに記述されているように、birthDateやgroupは数値表現、photoはURLなので、そのまま表示しても、視覚化したとは言えません。そこで、DataGridのformatterの機能を使って、分かりやすい書式に変換してみます。
まず、birthDate用、group用、photo用に、それぞれ以下の関数をHTMLの<script>タグ内に記述します。
dojo.require("dojo.date.locale");
function myDateFormatter(date){
return dojo.date.locale.format(new Date(date),
{fullYear: true, selector: "date"});
};
function myGroupFormatter(group){
switch(group){
case 1: return "家族";
case 2: return "友人";
case 3: return "会社";
default: return "";
}
};
function myImageFormatter(url){
return "<img width='40' height='40' src='" + url + "'/>";
};
|
これらの関数により、birthDateとgroupはテキスト文字列に、photoは<img>タグに変換されます。それぞれのビューの定義に対応する関数を太字部分のように指定します。
var myDataGridStructure = [
{cells: [
{name: "画像", field: "photo", width: "40px",
formatter: myImageFormatter},
{name: "名前", field: "name", width: "auto"},
{name: "メールアドレス", field: "email", width: "auto"},
{name: "生年月日", field: "birthDate", width: "auto",
formatter: myDateFormatter},
{name: "グループ", field: "group", width: "40px",
formatter: myGroupFormatter}
]}
];
|
formatterを利用したDataGridの表示は次のようになります（※DataGridのwidth/heightを適宜調整し、画像も別途用意しています）。
セルのスタイル
DataGridのセルの色、フォントなどのスタイルは、DataGrid用のCSSで指定されていますが、特定のカラムや行のスタイルをカスタマイズすることもできます。
次の例は、ビュー定義でemailカラムのスタイルを定義しています。
var myDataGridStructure = [
{cells: [
{name: "画像", field: "photo", width: "40px",
formatter: myImageFormatter},
{name: "名前", field: "name", width: "auto"},
{name: "メールアドレス", field: "email", width: "auto",
styles: "color: red; background-color: yellow;"},
{name: "生年月日", field: "birthDate", width: "auto",
formatter: myDateFormatter},
{name: "グループ", field: "group", width: "40px",
formatter: myGroupFormatter}
]}
];
|
これにより、DataGridの表示は次のようになります。
ビュー定義のstylesプロパティの他にも、headerStyles、classes、cellClassesなどのプロパティにCSSスタイルやクラス名を記述して、カラムのヘッダやセルのスタイルをカスタマイズしたり、DataGridのonStyleRow()メソッドをオーバーライドして、行ごとのスタイルを変更することも可能です。
データの並べ替え
DataGridでは、標準で行の並べ替え（ソート）がサポートされています。各カラムのヘッダをクリックすると、そのカラムのデータで昇順、降順での並べ替えを指定できます。次の図は、メールアドレスのカラムでソートした結果です。
DataGridのカラムをエンド ユーザーの好みに応じて並べ替えられるようにするには、DataGridにcolumnReordering="true"属性を指定します。これによって、ドラッグ＆ドロップでカラムの並び順を変更できるようになります。例えば、下の図では、生年月日のカラムをドラッグ＆ドロップして、メールアドレスのカラムと順番を入れ替えています。
また、カラムの表示、非表示を切り替えるためのポップアップ メニューの作成もサポートされていますので、さまざまなエンド ユーザーによるカスタマイズ機能を実現することができます。
データの編集
ここまでDataGridの表示のカスタマイズに関する機能を紹介してきましたが、DataGridではデータの編集機能もサポートされています。ビュー定義のeditableプロパティにtrueを指定することで、カラム単位のテキストボックスによる編集が可能になります。また、defaultCellプロパティにeditableを指定して、すべてのカラムを編集可能にすることもできます。通常はセルをダブルクリックするなどして、特定のセルが編集状態になりますが、DataGridにsingleClickEdit="true"属性を指定すれば、シングル クリックで編集状態にする動作が実現できます。
特に指定しない場合は、編集状態になるとテキストボックスがセル上に表示されますが、typeプロパティで、チェック ボックス、コンボボックス、さらには、カレンダー入力（DateTextBox）などの編集用コンポーネントを指定できます。以下の例では、birthDate用にDateTextBox、group用にコンボボックスを指定しています。なお、DateTextBoxなどのウィジェットを利用した編集用コンポーネントを使用するには、"dojox.grid.cells.dijit"モジュールを読み込む必要があります（太字部分参照）。
dojo.require("dojox.grid.cells.dijit");
var myDataGridStructure = [
{defaultCell: {editable: true}, cells: [
{name: "画像", field: "photo", width: "40px",
formatter: myImageFormatter},
{name: "名前", field: "name", width: "auto"},
{name: "メールアドレス", field: "email", width: "auto"},
{name: "生年月日", field: "birthDate", width: "auto",
formatter: myDateFormatter,
type: dojox.grid.cells.DateTextBox},
{name: "グループ", field: "group", width: "50px",
formatter: myGroupFormatter,
type: dojox.grid.cells.Select,
options: ["", "家族", "友人", "会社"],
values: [0, 1, 2, 3], returnIndex: 1}
]}
];
|
生年月日のセルをクリックすると、カレンダー入力が、グループのセルをクリックすると、コンボボックスからの選択による編集ができるようになります。
編集用コンポーネントには、あらかじめ提供されているもの以外にも、formatter同様、アプリケーション独自の編集用コンポーネントを実装して、指定することができます。
データの追加と削除
既存のデータの編集だけではなく、データの追加や削除を行う場合には、Data APIが利用できます。Data Storeが提供するData APIを呼び出して、Data Storeの内容を変更すると、変更が DataGridに通知されて、自動的に表示を更新してくれます。
例えば、データを追加するボタンを作成して、onClickイベントで次のような関数を呼び出すようにすれば、DataGridに新しいデータの行が追加されます。
dojo.connect(dijit.byId("myAddButton"), "onClick", function(){
myDataStore.newItem({name: "", email: "", group: 0,
birthDate: 0, photo: ""});
});
|
DataGrid上で選択された行のデータを削除するには、DataGridに removeSelectedRows()というメソッドが用意されているので、このメソッドを呼び出すだけです。
dojo.connect(dijit.byId("myRemoveButton"), "onClick", function(){
dijit.byId("myDataGrid").removeSelectedRows();
});
|
removeSelectedRows()は内部的に、選択された行に対応するデータをData Storeから削除するAPI（deleteItem()）を呼び出してくれます。
まとめ
以上、紹介してきたように、DataGridは、リッチなデータ コレクションの表示、編集のためのUIを最小限のアプリケーション側のコードで実現できるばかりではなく、アプリケーションのニーズに応じて、表示や編集方法を柔軟にカスタマイズできるフレームワークを提供しています。DataGridを、Dojoツールキットが提供するフォーム入力やレイアウト用のウィジェット、チャート描画機能などと組み合わせることにより、ブラウザ上で動作するビジネス アプリケーションの操作性を大きく向上することができるでしょう。
著者について | | | 野口 雅人は、ソフトウェア開発研究所勤務のシニア・テクニカル・スタッフ・メンバーです。入社以来、ホームページ・ビルダー、Rational Application Developer などの製品開発に従事し、現在は、RIA (Rich Internet Applications) やマッシュアップなど、Web 2.0 関連ソフトウェアの開発に携わっています。
|
記事の評価
| |
