これまではHTMLファイル内にデータを用意していましたが、実際の利用ではXMLデータを別ファイルとして持ち必要に応じて読み込んで利用することが多いでしょう。Spryでは「Spry.Data.XMLDataSet(XMLファイルのパス, XMLデータ内のパス)」としてXMLデータを読み込む事ができます。単純にXMLデータを読み込むだけでなくXMLデータ内の必要な部分だけを読み込んで利用することができます。XMLデータの、どの部分を読み込むかを指定するのが二番目のパラメータになります。URLのパスではなくXMLデータのパスなので間違えないように注意が必要です。「myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");」とするとfruits.xmlファイルを読み込み<list><fruits>内のデータを読み込みます。この場合<fruits>よりも下の階層ではなく<fruits>タグの階層が読み込まれます。
XMLデータの読み込みは上記の一行だけで終了です。あとはHTMLタグ内に表示するデータを指定します。表示するデータの指定はこれまでと同じ{〜}で囲みます。XMLデータの場合には{データベース名::タグ名}と指定します。データベース名は「myDatabase = new Spry.Data.XMLDataSet(〜)」としたmyDatabaseを指定します。タグ名はXMLデータ内の表示したいタグ名を指定します。以下のサンプルは一番最初のデータ（名前と色）を表示するものです。（サンプルを
実行する）
【XMLファイル：fruits.xml】
<?xml version="1.0" encoding="utf-8"?>
<list>
<fruits><name>リンゴ</name><color>赤色</color></fruits>
<fruits><name>ミカン</name><color>橙色</color></fruits>
<fruits><name>メロン</name><color>緑色</color></fruits>
<fruits><name>イチゴ</name><color>赤色</color></fruits>
<fruits><name>レモン</name><color>黄色</color></fruits>
<fruits><name>トマト</name><color>赤色</color></fruits>
</list>
【HTMLファイル】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>XMLファイルを読み込んでデータを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<span>
{myDatabase::name}は
{myDatabase::color}です。</span>
</div>
</body>
</html>
全てのデータを繰り返し表示するには、これまでと同様にspry:repeat属性で指定します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>XMLファイルを読み込んでデータを繰り返し表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div
spry:repeat="myDatabase">
<span>{myDatabase::name}は{myDatabase::color}です。</span>
</div>
</body>
</html>
特定の条件を満たした場合にのみデータを表示することもできます。これも、これまでと同様にspry:if属性を使って指定します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>XMLファイルを読み込んで条件付きで表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span
spry:if="'{myDatabase::color}' == '赤色'">{myDatabase::name}は{myDatabase::color}です。</span>
</div>
</body>
</html>
[
目次へ]
(2006.7.26)