[以下のサンプルはSpry pr 1.2ではSafari 2で正常に表示されません]
タグ内に表示するデータを指定するだけではなく通常のHTMLタグの属性値としてXMLデータを埋め込む事もできます。以下のサンプルは画像へのリンクを行うためのXMLデータと表示サンプルです。表示されるのは一番最初のXMLデータで指定された画像へのリンクだけです。（サンプルを
実行する）
【XMLファイル：photo.xml】
<?xml version="1.0" encoding="utf-8"?>
<list>
<image><name color="白">二輪草</name><url>0005.jpg</url></image>
<image><name color="白">水芭蕉</name><url>0046.jpg</url></image>
<image><name color="黄">蒲公英</name><url>0058.jpg</url></image>
<image><name color="黄">山吹草</name><url>0065.jpg</url></image>
<image><name color="桃">枝垂桜</name><url>0076.jpg</url></image>
</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("photo.xml", "/list/image");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<a
href="images/{myDatabase::url}">{myDatabase::name}</a><br>
</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("photo.xml", "/list/image");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div
spry:repeat="myDatabase">
<a href="images/{myDatabase::url}">{myDatabase::name}</a><br>
</div>
</div>
</body>
</html>
XMLデータのタグには必要に応じて属性が指定されていることがあります。今回のXMLデータでもnameタグでcolor属性を指定しています。属性値を表示する（読み出す）には/で区切って@マークを付けます。nameタグ内のcolor属性なので{myDatabase::name/@color}と指定すればよいことになります。以下のサンプルはリンク文字の横に花の色を表示します。（サンプルを
実行する）
<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("photo.xml", "/list/image");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<a href="images/{myDatabase::url}">{myDatabase::name}</a>
[
{myDatabase::name/@color}]<br>
</div>
</div>
</body>
</html>
次にサムネール画像がクリックされたら実際の画像を表示させてみます。これまでのプログラムと同じですので見れば分かるかと思います。画像のtitle属性に花の名前を指定しています。alt属性にも指定してみると良いでしょう。（サンプルを
実行する）
<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("photo.xml", "/list/image");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<a href="images/{myDatabase::url}">
<img src="thumbnail/{myDatabase::url}" title="{myDatabase::name}">
</a>
</div>
</div>
</body>
</html>
[
目次へ]
(2006.7.27)