では、dojo.dataによってデータを取得し、UIウィジェットで表示してみよう。以下のサンプルは、ItemFileReadStoreを用いて取得したデータを用いてコンボボックスの選択候補とするものだ。

図7 dojo.dataを使ったコンボボックスの例

まず、取得対象となるJSONデータであるが、「fruits.json」と言うファイルに保存している。まずはその内容を見てみよう。

リスト3 fruits.json

    { identifier: 'name', // データを識別するIDの属性名
      // データ
      items: [
        { name: 'apple', label: 'りんご'},
        { name: 'orange', label: 'オレンジ'},
        { name: 'banana', label: 'バナナ'},
        { name: 'grape', label: 'ぶどう'},
        { name: 'pineapple', label: 'パイナップル'}
      ]}

ItemFileReadStoreを用いて読み込めるJSONデータは、ある程度形式が決まっている。items属性に、データとなるJavaScriptオブジェクトを配列で指定する。identifier属性には、そのデータを一意に特定するためのキーとなる属性の名前を記述する。

このファイルを読み込んで、コンボボックスを表示するプログラムは次のようになる。

    <html>
    ...(略)...
    <script type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dijit.form.ComboBox");
      // (1) データストアの生成。URLに"fruits.json"を指定する
      var fruitsStore = new dojo.data.ItemFileReadStore({url:"fruits.json"});
    </script>
    </head>
    <body class="tundra">
      <!-- (2) コンボボックス -->
      <select dojoType="dijit.form.ComboBox"
             store="fruitsStore" searchAttr="label">
      </select>
    </body>
    </html>

(1) ItemFileReadStoreの生成を行い、"fruitsStore"という変数に格納している。コンストラクタに渡すオブジェクトで、「どのURLから読み込むか」を指定する。

(2) dijit.form.ComboBoxを使用してコンボボックスを作成している。属性「store」にデータストアの変数名、「searchAttr」に選択候補として表示するデータ内の属性を指定する。

`dojo.data`をサポートするUIウィジェットが持つ属性

dojo.dataをサポートするUIウィジェットは、すべてが「store」という属性を持ち、データストアを指定できるようになっている。

また、「query」という属性で取得するデータを絞り込むことも可能だ。queryに指定した文字列はそのままデータストアに渡され、データの検索クエリとして用いられる。検索クエリの形式はdojo.dataの仕様では規定されておらず、データストアごとに異なる形式を用いる。

ItemFileReadStoreでは、属性値を対象とした検索を行うことができ、ワイルドカードも用いることができる。例えば先のサンプルで、name属性が'e'という文字で終わるデータを取得するには以下のようにする。

      <select dojoType="dijit.form.ComboBox"
             store="fruitsStore" searchAttr="label"
             query="{name:'*e'}">
      </select>

ほかにも、ウィジェットごとにさまざまな属性を利用可能だ。たとえばコンボボックスであれば、以下のような属性を持つ。

  • pageSize … コンボボックスに表示するデータのサイズ
  • searchAttr … コンボボックスに表示する値を持つ属性の名称

マークアップによってデータストアを生成する

また、マークアップによってデータストアを生成することもできる。このテクニックを使用すれば、いっさいコーディングを行うことなく、データストアから取得したデータをウィジェットで表示することが可能になる。

上のサンプルを、マークアップによって書きなおすと以下のようになる。

    <div dojoType="dojo.data.ItemFileReadStore"
      url="fruits.json" jsId="fruitsStore"></div>
    <select dojoType="dijit.form.ComboBox"
      store="fruitsStore" searchAttr="label">
    </select>

jsId属性を用いて、ItemFileReadStoreの属性をJavaScript変数として宣言していることに注目だ。