创建一个Spry的XML数据集
出自9RIA.com WIKI
(英文原文: Creating a Spry XML data set )
原作者：Raymond Camden 翻译者：：guagua
在创建一个HTML数据集(Creating an HTML data set)中，我证明了在Dreamweaver CS4中使用HTML数据集是多么的容易。HTML的数据集是表格和其它HTML的结构单元，Spry可以通过Ajax对其进行导入。一旦被导入，这些数据就可以进行多种方式的处理(比如排序、过滤等)，使得它能更容易的进行Ajax应用程序的开发，而用户不需要JavaScript或服务器端的知识。
在本文中我会介绍XML的数据集。我会证明在Dreamweaver CS4中使用XML数据集和使用HTML数据集一样的容易。我还会讨论如何在ColdFusion中使用Spry动态的创建XML
注意：开始前，确保你有一个在Dreamweaver中定义的网站，然后下载本文附带的样例文件。解压到一个新的文件。你可以使用任何你希望的名字做文件名；我使用dwarticlexml。你也需要安装ColdFusion 8，和Dreamweaver中使用的站点一起运行。确保你将样例程序的数据库设为ColdFusion，因为本教程的动态例子会使用它们。为了得到关于定义一个站点的更多信息，请查看Dreamweaver帮助文档中的Setting up a Dreamweaver site。如何不了解ColdFusion，请阅读Setting up a ColdFusion development environment。
目录 |
要求
为了使本文发挥最大的效用，你需要以下软件和文件：
Dreamweaver CS4
ColdFusion 8
样例文件:
xml_dataset_sample.zip (ZIP, 4K)
需要的知识
基本的HTML和XML知识，熟悉Dreamweaver的工作环境、了解如何进行站点管理和创建网站。
一个基本的例子
让我们首先看一些样例XML数据，你将在Spry数据集中使用它们。在Dreamweaver中，打开本文附带的样例文件中的jedilist.xml。这里是为了节约空间而删除了一些行以后的XML代码片断：
<?xml version="1.0" encoding="UTF-8"?> <jedis> <jedi> <name>Raymond Camden</name> <age>35</age> <alignment>dark</alignment> </jedi> <jedi> <name>Scott Stroz</name> <age>40</age> <alignment>light</alignment> </jedi> <jedi> <name>Todd Sharp</name> <age>32</age> <alignment>light</alignment> </jedi> <jedi> <name>Scott Pinkston</name> <age>36</age> <alignment>dark</alignment> </jedi> </jedis>
该XML文件包含了Jedis的列表。每个Jedi有名字，年龄和所属队列（dark或者light；其中dark表示比较有趣）。XML是一种结构化数据。注意到每个人都从一个<jedi>标记开始，以</jedi>标记结束。每个名字包含在<name>标记中等等。重要的是你使用的XML是被很好的格式化的。尽管HTML有一点宽松，XML中关于如何组织文件却是十分严格的。接下来，在Dreamweaver中创建一个新文件。
1.右键点击进入你希望创建新文件的目录。将新文件命名为test.html。双击该文件，在Dreamweaver中打开。
2.将光标放在<body>标记后面。好，现在进入有趣的部分。
3.在插入菜单上，选择数据>Spry数据集。将会打开图1所示的窗口。
图1. 插入Spry数据集的默认窗口
4.默认情况下Dreamweaver会创建一个HTML数据集。只需要简单的将数据类型转成XML。
5.点击浏览按钮，告诉Dreamweaver在哪里能够找到你的数据文件。从你的站点目录中选择jedilist.xml。Dreamweaver会读该文件，并以树形视图显示你的XML数据（见图2）。
图2. Dreamweaver能够解析并理解你的数据的基本结构
6.好，现在注意一下数据预览。虽然看上去是正确的，不过好像只显示了一行数据。这是因为前面选择的行元素是“jedis”，不是“jedi”。记住，你将整个XML文件包含在jedis标记中，而每个单独的jedi被包含在了jedi标记中。图3显示了当你选择jedi节点时发生的事情。
图3. 现在Dreamweaver知道如何从XML文件来显示你的数据
Dreamweaver已经认识到jedi标记包含了单个的数据行。预览已经证明了这一点。点击下一步。
7.如果你已经学习了Creating an HTML data set，那这一部分的向导会很熟悉。这里你将告诉Spry如何对待每一列。
这完全是可选的步骤，但当列不是基本的字符串类型时它可以帮助你进行排序。你的数据非常简单。只有年龄列是数字类型的。所以一直向前，然后选择age列，并从类型下拉菜单中选择Number。这会使得XML数据通过名字列。
图4. 对列和排序具体的设置
8.点击下一步到最后的步骤。在插入选项中，选择插入表格(Insert Table)然后点击完成按钮。
你的HTML页面看起来应该像这样:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script src="../SpryAssets/xpath.js" type="text/javascript"></script> <script src="../SpryAssets/SpryData.js" type="text/javascript"></script> <script type="text/javascript"> </script> </head> <body>
| Name | Age | Alignment |
|---|---|---|
| {name} | {age} | {alignment} |
</body> </html>
如果你浏览这个文件，你能看到XML数据已经动态的导入到HTML中。这些数据自动以名字排序，但是你也可以点击每列的头部，使得以该列进行排序。
一个动态的例子
在前面的例子中，我用Spry和XML文件一起，将数据硬编码进文件系统。对于没有像ColdFusion一样的应用程序服务器的用户，这种手工的方法是唯一的办法。但是如果你安装了ColdFusion，那为什么不用强大的CFML来帮助你创建动态的XML，并且在你的Spry程序中使用呢？让我们看看如何在ColdFusion中生成XML吧。
注意：需要知道如何设置ColdFusion程序服务器，请参考Setting up a ColdFusion development environment。
1.新建一个文件，命名为artdata.cfm。打开它，然后将Dreamweaver放入的默认的HTML删除。
2.在Dreamweaver中选择服务器行为标签(Server Behaviours)。你会看到一些本地安装ColdFusion必须告诉Dreamweaver的条目。这些设置非常简单而且只需要做一次。如果你的服务器行为面板和图5所示一样，表示你都设置好了。
图5. 一个配置好的服务器行为面板
3.如服务器行为面板条目6所说的，点击+按钮然后选择记录集(Recordset)。这会打开一个面板，在该面板中可以配置一个数据库查询。名字使用Art。对于数据库，选择cfartgallery。表应该被设置为APP.ART(如图6)。将列设为All，然后点击OK。
图6. 设置新的记录集
Dreamweaver会将下列查询插入到你的模板中
<cfquery name="Art" datasource="cfartgallery"> SELECT * FROM APP.ART </cfquery>
4.现在你需要从数据中产生XML。你没有足够的时间对下面的代码进行一个完全的解释。同时注意到在ColdFusion中有多种生成XML的方法。你的代码会简单的从查询中创建一个XML文档，然后为用户服务。复制粘贴下列代码到你的文件中。
<cfxml variable="xml">
<art>
<cfoutput query="art">
<piece>
<name>#artname#</name>
<description>#description#</description>
<price>#price#</price>
<image>#largeimage#</image>
</piece>
</cfoutput>
</art>
</cfxml>
<cfcontent type="text/xml" reset="true"><cfoutput>#xml#</cfoutput>
<cfxml>标记用来从内部创建一个XML文档。我将XML的外部包含在<art>标记中。接着我用<cfoutput>来循环的查询。我将记录包含在<piece>标记中，然后输出一些列。(注意到<cfsavecontent>标记替代了<cfxml>。ColdFusion提供了很多方法来解决常见的问题！)
5.保存该文件然后在浏览器中打开。你能看到从数据库中的art信息生成了XML。我从表中选择输出了name,price和largeimage列。我也可以选择其它列。从数据库中选择什么，以及输出什么到XML，完成取决于你的程序。
好，现在你有了ColdFusion产生的XML。即使你不是一个ColdFusion开发人员，我也期待你能发现动态的产生XML是多么的容易。
注意：为了知道如何简单的从ColdFusion查询中产生XML，参考我的项目,to XML。这是一个简单的ColdFusion组件，可以应对产生XML的工作。
接着，你需要将它放入一个基于Ajax的程序。
1.在Dreamweaver新建文件，命名为test2.html。
2.点击body标记的右边。
3.在插入菜单中，选择Spry数据集。将类型转换到XML，然后选择artdata.cfm。和前面的例子一样，Dreamweaver能够解析XML，但是你必须点击小菜单让Dreamweaver知道哪部分XML代表一列。你的屏幕应该和图7很类似。
图7.插入我们新的动态XML文件的第一步
4.点击下一步。再一次的，你必须告诉Dreamweaver如何处理数据。选择price列然后设置类型为number。在排序列，设置为Name。点击下一步。
5.在前面的例子中，你告诉Dreamweaver插入一个表。现在你将需要一点想象力，创建一个master/detail 布局--选择该选项(第2个)，然后点击安装。
这个选项会决定页面中在master列表中显示什么和detail列表中显示什么(见图8)。Dreamweaver使用第一列，name，在master列表上。这表示你的页面会创建name列表。你可以点击name得到其它列的详细信息：description, price, 和image。你可以选择修改这些，但是默认设置也是不错的，所以现在，只要点击OK。点击完成，Dreamweaver会将代码插入到页面中。
图8. 为Master/Detail布局设置选项
查看页面之前，你需要做一个快速的改变。你将art price的图片包含在页面中了，但是显示真实的图片比只要文件名称漂亮多了。找到文件中下列片断：
...将它改成:
这会创建一个基于从XML导入Spry的数据产生的动态的页面。
完成了，保存文件，然后在浏览器中查看它。 注意到现在你能点击和浏览art片断--不需要你写一行JavaScript! (当然需要一些相关的JavaScript，但是Dreamweaver帮你完成了!)
注意：除了HTML 和 XML，Spry也支持TSV 和 CSV数据集。它们虽然不是很常用，不过如果你有那样的格式，也可以用Spry来处理。Spry还支持JSON。JSON是创建基于Ajax的程序的最好的方式，因为它是最小的。Dreamweaver 不支持简单的创建基于JSON的数据集；但是一旦你适应了它你就应该更加深入。ColdFusion 8内置了产生JSON的功能
接下来做什么
在本文中，我展示了Dreamweaver和Spry配合使用是多么的简单。对于不熟悉JavaScript的人，Dreamweaver CS4做出了很大的贡献，使得开发Ajax程序只需要点点鼠标。想学到更多的，请参考Spry Technology Center和Spry site on Adobe Labs。