Spryを使ったHTML上でXMLの読み込み Spry

Spryを使ったHTMLでXMLを読み込む方法をご紹介します。
なお、サンプルは表形式で表示していますが、div等の要素でも表示が可能です。

Spry公式サイト

サンプル

サンプルでは以下のXMLファイルのデータをtable形式で表示しています。
xml_spry.xml

No 名前 ローマ字
{@id} {text} {kana}

ダウンロードと設置

こちらからダウンロードして解凍します。
ただし、ダウンロードは無料のAdobe会員になっている必要がありますのでご注意ください。
解凍後、includesディレクトリを任意の場所に設置します。

JavaScriptの読み込みと設定

以下のタグを<head>内に記載します。

次に読み込むXMLと出力する部分の設定をします。
なお、コメントアウトにも記載していますが、DataSetID名(sample)は任意でかまいません。

適用方法

サンプルのような表で出力する場合は、div等でtableを囲み、
spry:region="DataSetID名"をdivに設定します。
また、表示したい部分に{要素名}という形で記載します。
※ 以下のソースにある@idは、要素名に付加されているidを取得するためのものです。

上記の場合1つしか表示されないので、繰り返し処理をする場合は、
spry:repeat="DataSetID名"をtrに設定します。

ソート(並び替え)

ソートしたい見出しタグにspry:sort="要素名"を設定します。