dojo.dataの作成と操作:Zend_Dojo_Data
動的なウェブページを作成する際の醍醐味の一つに、動的なデータのやりとりが挙げられます。リストとして表示する内容をあらかじめ(静的)にページに埋め込んでおくのではなく、必要に応じてサーバから取得することで、ウェブページのデザインに柔軟性を持たせることができます。
Dojo Toolkitの一部であるDigitには、サーバとデータのやり取りを行う機能を持つものがあります。このデータのやり取りを行う際に利用するのがDojo Toolkitのdojo.data形式です。Zend_Dojo_Data
クラスはdojo.data形式の情報を作成/操作するためのクラスです。ここでは、Zend_Dojo_Data
クラスを利用して、サーバからDigitへデータを送る方法について紹介します(なお、ここで取り上げたDigit以外での利用については次回取り上げる予定です)。
では、まずデータを受け取る方のクライアント側の記述について見てみましょう。ここではDigitの一つであるコンボボックスを利用しています。コンボボックスは基本的にはリストなのですが、新規に値を入力することもできる点が通常のリストと異なります。
... //コンボボックス $url = $this->url(array('action'=>'datapost')); echo $this->combobox('cbox', 'b', //データの受け取りに関する設定(1) array('store' => 'cboxStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => $url, ), //データのどの列を表示するか(2) 'searchAttr' => 'name' ) ); ...
このうち「$this->combobox
」の部分は次のようなHTMLとして出力されます。
<div dojoType="dojo.data.ItemFileReadStore" jsId="cboxStore" url="/index/datapost"></div> (1) <input id="cbox" name="cbox" value="b" type="text" store="cboxStore" searchAttr="name" dojoType="dijit.form.ComboBox">(2)
リスト7の(1)がリスト8の(1)に対応しており、サーバからデータをどのように受け取るかを指定しています。データを取得する方法にはいくかあるのですが、ここではURLを指定してJSON形式でデータを取得することにします。リスト7でのstoreType「dojo.data.ItemFileReadStore」はデータをURLを指定し取得することを、storeParamsのurlはそのURLをそれぞれ設定しています。
リスト7の(2)では、取得したデータのどの部分を表示するかについてを指定しています。コンボボックスについての情報を指定しています。サーバから送られて来る情報はリストの各要素が入った配列のような形になっています。その各要素がさらに、複数の要素を持つ配列になっていると考えてください(例えばPHP風に書くとリスト9のようになります)。
array( array('name'=>'a', 'label'=>'alpha'), array('name'=>'b', 'label'=>'beta') )
このうち、どの要素を表示に利用するかを指定しているのがsearchAttrだと考えてください。ここではsearchAttrに「name」を指定していますので、コンボボックスの要素としては「a」と「b」があることになります。
リスト8の(1)と(2)とを関連づけているのがリスト7(1)のstoreオプションで、リスト8(1)のjsId、(2)のstoreの値を指定しています。描画の際の手順としては、リスト8の(2)のComboBoxがまず描画され、必要に応じてComboBoxのstoreの値からリスト8の(1)を利用して情報をサーバから取得するようになっています。
では、実際にやりとりされるデータはどのような形になっているのでしょうか? このコンボボックスで利用されるデータはリスト10のようなJSON形式でやりとりされることになっています。
{"identifier":"name", "items":[ {"name":"a","label":"alpha"}, {"name":"b","label":"beta"} ] }
さて、このデータを作成するのにZend_Dojo_Dataを利用します。サーバ側のデータを送る流れは(1)データの作成、(2)jsonに変換/クライアントへの送信、となります。
class IndexController extends Zend_Controller_Action { ... public function datapostAction() { //識別用IDを指定して、Zend_Dojo_Dataを作成 (1) $data = new Zend_Dojo_Data('name'); //データの追加 (2) $data->addItem(array('name'=>'a', 'label'=>'alpha')); $data->addItem(array('name'=>'b', 'label'=>'beta')); //ビュースクリプトへの受け渡し $this->view->assign('data', $data); } ...
まずリスト11の(1)のようにコンストラクタでZend_Dojo_Data
のインスタンスを作成し、必要に応じて(2)のように情報の追加を行います。このように作成したZend_Dojo_Data
を出力します(リスト12)。
<?php echo $this->data->toJson();
これを利用した結果は図2のようになります。
ここでZend_Dojo_Data
の主なメソッドを紹介します:
メソッド名 | 引数 | 説明 |
(コンストラクタ) | $identifier, $items, $label | コンストラクタには識別用ID、データ、ラベルを引数として与えられる。引数はすべて省略可能で、省略時はnull。 |
addItem | $item, $id | データを登録する。$idは省略可能で、省略時はnull。 |
addItems | $items | 複数のデータをまとめて登録する。 |
setIdentifier | $identifier | 識別用IDを設定する。 |
setLabel | $label | ラベルを設定する。 |
setMetadata | $spec, $value | メタデータ$specの値を$valueに設定する。 |
fromArray | $data | 配列から情報を登録する。 |
toArray | (なし) | 格納されている情報を配列として返す。 |
fromJson | $json | JSON形式になっている情報からZend_Dojo_Dataを作成する。 |
toJson | (なし) | 格納されている情報をJSON形式で返す。 |
このうち、setMetadataはメタデータを設定する必要のあるDigitで利用するもので、利用するDigitの説明と共に取り上げます。
おわりに
今回はDojo ToolkitとZend Frameworkの連携を行うZend_Dojoの基本的な使い方について説明しました。次回も引き続きZend_Dojoについて扱っていく予定です。Dojo Toolkitが提供する部品DigitをZend_Dojoから使う方法について説明していきます。