Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Dojo ToolkitのDataGridを使いこなす

渋谷テクニカルナイト講師陣が語る新技術動向 第2回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/04 14:00

 高機能JavaScriptライブラリとして、操作性、応答性にすぐれたWebアプリケーションのUI構築に威力を発揮する「Dojo Toolkit」。その多彩な機能の中でも、特にビジネスアプリケーションに不可欠なコンポーネント(ウィジェット)が、データコレクションの表示、編集機能を提供するDataGridです。本稿では、この多機能で柔軟なカスタマイズが可能なDataGridを利用した、典型的なデータ入出力のUI作成方法を紹介します。

目次

はじめに

 高機能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が表示されます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

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

バックナンバー

連載:渋谷テクニカルナイト講師陣が語る新技術動向

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5