Spry Framework入门(二)——XML数据集及主从表显示
简介:
Spry Framework是Adobe出品的轻量级的支持Ajax的JavaScript库,以HTML为中心,使用最基本的HTML、CSS和JavaScript来实现丰富Web页面体验。
试验环境:
操作系统:windows2003 Server
浏览器:IE7.0 RC1 FireFox 1.5.0.7
WEB服务器:IIS 6.0
Spry库:Spry_P1_3_08-11
安装:
从http://labs.adobe.com/technologies/spry/ 下载安装包,目前版本为Spry_P1_3_08-11.zip,解开后把includes目录复制到自己的IIS虚拟目录上即可。
页面代码:
test.html
data.xml
summersalad.xml
thainoodles.xml
salmon.xml
Spry Framework是Adobe出品的轻量级的支持Ajax的JavaScript库,以HTML为中心,使用最基本的HTML、CSS和JavaScript来实现丰富Web页面体验。
试验环境:
操作系统:windows2003 Server
浏览器:IE7.0 RC1 FireFox 1.5.0.7
WEB服务器:IIS 6.0
Spry库:Spry_P1_3_08-11
安装:
从http://labs.adobe.com/technologies/spry/ 下载安装包,目前版本为Spry_P1_3_08-11.zip,解开后把includes目录复制到自己的IIS虚拟目录上即可。
页面代码:
test.html
1<head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
3 <title>Spry Example</title>
4
5 <!--Link the Spry libraries-->
6 <script type="text/javascript" src="includes/xpath.js"></script>
7 <script type="text/javascript" src="includes/SpryData.js"></script>
8
9 <!--Create a data set object-->
10 <script type="text/javascript">
11 var dsSpecials = new Spry.Data.XMLDataSet("data.xml", "specials/menu_item");
12 var dsIngredients = new Spry.Data.XMLDataSet('{dsSpecials::url}', "item/ingredients/ingredient");
13 </script>
14</head>
15
16<body>
17
18 <!--Create the Spry dynamic region-->
19 <div id="Specials_DIV" spry:region="dsSpecials">
20 <!--Display the data in a table-->
21 <table id="Specials_Table">
22 <tr>
23 <th>名称</th>
24 <th>Description</th>
25 <th>价格</th>
26 </tr>
27 <!--<tr spry:repeat="dsSpecials">-->
28 <tr spry:repeat="dsSpecials" onclick="dsSpecials.setCurrentRow('{ds_RowID}')">
29 <td>{item}</td>
30 <td>{description}</td>
31 <td>{price}</td>
32 </tr>
33 </table>
34 </div>
35<hr>
36 <!--Create the detail dynamic region-->
37 <div id="Specials_Detail_DIV" spry:region="dsIngredients">
38 <table id="Specials_Detail_Table">
39 <tr>
40 <th>Ingredients</th>
41 </tr>
42 <tr spry:repeat="dsIngredients">
43 <td>{name}</td>
44 </tr>
45 </table>
46 </div>
47</body>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
3 <title>Spry Example</title>
4
5 <!--Link the Spry libraries-->
6 <script type="text/javascript" src="includes/xpath.js"></script>
7 <script type="text/javascript" src="includes/SpryData.js"></script>
8
9 <!--Create a data set object-->
10 <script type="text/javascript">
11 var dsSpecials = new Spry.Data.XMLDataSet("data.xml", "specials/menu_item");
12 var dsIngredients = new Spry.Data.XMLDataSet('{dsSpecials::url}', "item/ingredients/ingredient");
13 </script>
14</head>
15
16<body>
17
18 <!--Create the Spry dynamic region-->
19 <div id="Specials_DIV" spry:region="dsSpecials">
20 <!--Display the data in a table-->
21 <table id="Specials_Table">
22 <tr>
23 <th>名称</th>
24 <th>Description</th>
25 <th>价格</th>
26 </tr>
27 <!--<tr spry:repeat="dsSpecials">-->
28 <tr spry:repeat="dsSpecials" onclick="dsSpecials.setCurrentRow('{ds_RowID}')">
29 <td>{item}</td>
30 <td>{description}</td>
31 <td>{price}</td>
32 </tr>
33 </table>
34 </div>
35<hr>
36 <!--Create the detail dynamic region-->
37 <div id="Specials_Detail_DIV" spry:region="dsIngredients">
38 <table id="Specials_Detail_Table">
39 <tr>
40 <th>Ingredients</th>
41 </tr>
42 <tr spry:repeat="dsIngredients">
43 <td>{name}</td>
44 </tr>
45 </table>
46 </div>
47</body>
data.xml
<?xml version="1.0" encoding="UTF-8"?>
<specials>
<menu_item id="1">
<item>夏日沙拉</item>
<description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description>
<price>7</price>
<url>summersalad.xml?id=1</url>
</menu_item>
<menu_item id="2">
<item>Thai Noodle Salad</item>
<description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description>
<price>8</price>
<url>thainoodles.xml</url>
</menu_item>
<menu_item id="3">
<item>Grilled Pacific Salmon</item>
<description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description>
<price>16</price>
<url>salmon.xml</url>
</menu_item>
</specials>
<specials>
<menu_item id="1">
<item>夏日沙拉</item>
<description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description>
<price>7</price>
<url>summersalad.xml?id=1</url>
</menu_item>
<menu_item id="2">
<item>Thai Noodle Salad</item>
<description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description>
<price>8</price>
<url>thainoodles.xml</url>
</menu_item>
<menu_item id="3">
<item>Grilled Pacific Salmon</item>
<description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description>
<price>16</price>
<url>salmon.xml</url>
</menu_item>
</specials>
summersalad.xml
<?xml version="1.0" encoding="UTF-8"?>
<item>
<item_name>Summer salad</item_name>
<ingredients>
<ingredient>
<name>butter lettuce</name>
</ingredient>
<ingredient>
<name>Macintosh 苹果</name>
</ingredient>
<ingredient>
<name>Blood oranges</name>
</ingredient>
<ingredient>
<name>Gorgonzola cheese</name>
</ingredient>
</ingredients>
</item>
<item>
<item_name>Summer salad</item_name>
<ingredients>
<ingredient>
<name>butter lettuce</name>
</ingredient>
<ingredient>
<name>Macintosh 苹果</name>
</ingredient>
<ingredient>
<name>Blood oranges</name>
</ingredient>
<ingredient>
<name>Gorgonzola cheese</name>
</ingredient>
</ingredients>
</item>
thainoodles.xml
<?xml version="1.0" encoding="UTF-8"?>
<item>
<item_name>Thain Noodles</item_name>
<ingredients>
<ingredient>
<name>Thain Noodle</name>
</ingredient>
<ingredient>
<name>Macintosh apples</name>
</ingredient>
</ingredients>
</item>
<item>
<item_name>Thain Noodles</item_name>
<ingredients>
<ingredient>
<name>Thain Noodle</name>
</ingredient>
<ingredient>
<name>Macintosh apples</name>
</ingredient>
</ingredients>
</item>
salmon.xml
<?xml version="1.0" encoding="UTF-8"?>
<item>
<item_name>Salmon</item_name>
<ingredients>
<ingredient>
<name>Salmon</name>
</ingredient>
<ingredient>
<name>parsley</name>
</ingredient>
<ingredient>
<name>basil</name>
</ingredient>
</ingredients>
</item>
<item>
<item_name>Salmon</item_name>
<ingredients>
<ingredient>
<name>Salmon</name>
</ingredient>
<ingredient>
<name>parsley</name>
</ingredient>
<ingredient>
<name>basil</name>
</ingredient>
</ingredients>
</item>