f60k@Lab

Step2 : construct DataSet objects

<script type="text/javascript">
var dsShops = 
new Spry.Data.XMLDataSet("shops.xml", "/shops/shop");
var dsDetail = 
new Spry.Data.XMLDataSet("{dsShops::detail_url}", "/detail");
</script>

Step3 : define master region

<div id="contents" spry:region="dsShops" >
  <table id="shop_list">
    <tr id="{ds_RowID}" spry:repeat="dsShops"><td>
    <p><b>
       <a href="javascript:;"
        onclick="dsShops.setCurrentRow('{ds_RowID}')">
       {shop_name}</a>
   </b><br>
    {description}</p>
    </td></tr>
  </table>
</div>

Step4 : define detail region

<div id="detail" spry:detailregion="dsDetail">
      <h2>DETAIL</h2>
      <ul>
        <li spry:repeat="dsDetail">
          Map: <a href="{map_url}" target="_blank">
            {shop_name}
          </a>
          <p>Location: {loc}</p>

        </li>
      </ul>
   </div>
</div>

Spryの属性spry:region
htmlタグはdynamic regionとして動作する。
一部のタグでは使えない。
bodyタグの外側のタグでは使えない。
spry:regionはその中で使うデータセットを特定する。
この領域はデータセットのリスナーになりデータセットの変更で領域も更新される。
{}でデータセットの列を指定する。
属性spry:repeatはXMLの連続しているノードの表示に使う。

masterとdetail領域
detail領域はmaster領域に依存している。
masterのデータ変更でdetailのデータも変更される。
Spryがもつds_RowIDはデータセット内の行のIDで自動生成される。
setCurrentRowメソッドで現在のIDを特定する。
spry:detailregionはデータセットからDataChanged通知＋CurrentRowChange通知を受ける。
spry:regionはCurrentRowChangeは受け取らない。

複数のデータセット
ユーザが必要としたデータのみが手に入るために一個のデータを複数に分割して必要に応じロード更新する。
データセットをmasterとdetail用２つ作成する。
詳細用データ参照urlをmaster側のXMLにdetail側XMLのURLを持たせる。
detail用データセットのコンストラクタのURL参照は{詳細データセット名:tag名}
一個以上のデータセットをregionに指定する場合はスペース区切りで、spry:region="setA setB setC"
特定のデータセットのデータを参照する場合{datasetName:columeName}

ソート
datasetName.sort('columnName')で並び替えできる。
通常アルファベット順。
数値ソートしたい場合は、数値に変換してからソートする。
datasetName.setColumnType("columnName", "number")で数値になる。

demo

shops.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shops>
<shop>
<shop_name>インドラ</shop_name>
<description>ネパールカレー</description>
<detail_url>i.xml</detail_url>
</shop>
<shop>
<shop_name>ジャイヒンド</shop_name>
<description>ラジさんのカレー</description>
<detail_url>j.xml</detail_url>
</shop>
<shop>
<shop_name>クマールフォート</shop_name>
<description>合併前クマールパパ。インドのカレー</description>
<detail_url>k.xml</detail_url>
</shop>
</shops>

i.xml

<?xml version="1.0" encoding="UTF-8" ?>
<detail>
<shop_name>インドラ</shop_name>
<loc>北千住</loc>
<map_url>http://map.livedoor.com/map/scroll?MAP=E139.48.25.8N35.44.40.7&ZM=12</map_url>
</detail>

j.xml

<?xml version="1.0" encoding="UTF-8" ?>
<detail>
<shop_name>ジャイヒンド</shop_name>
<loc>秋葉原</loc>
<map_url>http://map.livedoor.com/map/scroll?MAP=E139.46.40.6N35.41.49.0&ZM=12</map_url>
</detail>

k.xml

<?xml version="1.0" encoding="UTF-8" ?>
<detail>
<shop_name>クマールフォート</shop_name>
<loc>日本橋</loc>
<map_url>http://map.livedoor.com/map/scroll?MAP=E139.47.13.2N35.40.54.7&ZM=12</map_url>
</detail>