Adobe Spry框架入门

接下来声明了一个Spry XMLDataSet实例，此处我们将它命名为dsEmployees。初始化要求两个参数：XML文件的位置和一个用来识别XML节点或包含数据的节点的XPath表达式。XML还可以从一个URL加载。注意XPath表达式识别XML的根节点，然后是代表每行数据的子节点。

<title>Spry Simple Data Example</title>

<script type="text/javascript" src="includes/xpath.js"></script>

<script type="text/javascript" src="includes/SpryData.js"></script>

<script type="text/javascript">

var dsEmployees = newSpry.Data.XMLDataSet("assets/employee_data.xml", "employees/employee");

</script>

</head>

在页面的主体部分输出Spry数据集很简单。Spry动态区用于在页面上显示XML数据，当数据集改变时它们会同时更新。一个动态区使用spry:region在一个div标记中声明，HTML标记作为动态区容器。动态区是Spry数据集的一个“观测区”，打括号用来区别数据集中的每个列，spry:repeat标记迭代显示数据集中的所有行。

<div id="Employees_DIV" spry:region="dsEmployees">

<table id="Employees Table">

<tr>

<th>Name</th>

<th>Department</th>

<th>Email</th>

</tr>

<tr spry:repeat="dsEmployees">

<td>{fname} {lname}</td>

<td>{department}</td>

<td><a href="mailto:{email}">{email}</a></td>

</tr>

</table>

</div>

Spry有处理来自一个或多个数据集的主要/详细动态区的规定。下面的样例代码和上面一样使用相同的逻辑在head标记中声明了一个Spry数据集。

Spry XMLDataSet的setCurrentRow方法中对重复的数据表行添加了一个单击事件，传递当前行的id作为参数。第二个数据表用一个div标记围起来，其中使用了spry:detailregion来形成代码的详细部分。利用列表对数据表排序十分简单。

<div id="Employees_DIV" spry:region="dsEmployees">

<table id="Employees Table">

<tr>

<th>Name</th>

</tr>

<tr spry:repeat="dsEmployees" onclick="dsEmployees.setCurrentRow('{ds_RowID}')">

<td>{fname} {lname}</td>

</tr>

</table>

</div>

<div id="Employee_Detail_DIV" spry:detailregion="dsEmployees">

<table id="Employee Detail Table" border="1">

<tr>

<th>Name</th>

<th>Department</th>

<th>Email</th>

<th>Mobile Phone</th>

</tr>

<tr>

<td>{fname} {lname}</td>

<td>{department}</td>

<td><a href="mailto:{email}">{email}</a></td>

<td>{mobilePhone}</td>

</tr>

</table>

</div>