用Spry框架来简化AJAX



Spry AJAX框架是一个面向Web设计者的JavaScript库。它提供了很多供设计者建立页面的扩展功能,AJAX风格。


目前其最新版本为2007.5.17日发布的1.5版本。


下载地址为:http://www.adobe.com/cfusion/entitlement/index.cfm?event=custom&sku=RC00210&e=labs_spry


Spry框架的目标:


1)保持开放


Spry工作在所有的HTML编辑器上,包括Dreamweaver。任何人都可以从Adobe Labs下载它,开始建立高性能的交互式Web页面和应用程序。无需授权或服务端代码支持。


2)易于使用


Spry使用了同建立Web页面相同的技术,如HTML,CSS和JavaScript,包括几个JavaScript库。使用同样的技术来创建和设计动态区域和交互式的工具,可以象其它HTML元素一样在页面上使用。


3)能够创新(innovation)


Spry提供了轻量级的强有力的模型,如增加数据、交互性,丰富的UI工具,促使你完全控制设计。


Spry同时为Web设计者和开发者而创建。它的指导原则:


1)工作在Web产品上,集中精力于Web UI和x(HTML)产品


2)x(HTML)和CSS专家


3)熟悉JavaScript和DOM


4)关心代码的质量


5)想创建下一代的Web页面。


要求:


1)保持框架熟悉、轻量级和透明性


2)保持框架最小(以页为中心Page-Centric)


3)看起来象HTML的自然扩展


4)和其它技术的整合


提供更好的设计开发工作流


1)促使设计时的数据和内容的分离


2)支持"design-time XML"


3)框架易于均衡design-time工具


下一代的Web用户界面


看例子:


http://labs.adobe.com/technologies/spry/demos/index.html Spry是客户端框架,以JavaScript库的方式增加到Web页面中。Spry的JavaScript库主要有三个模块:


1)Spry Data


使用Spry Data Sets and Regions来访问和显示数据。Spry的Data Set是一个JavaScript对象,负责载入和管理数据。Data Set基础类适合多种不同的数据源访问数据。


2)Spry Regions


一个Spry dynamic Region是Web页面上绑定数据集的一个区域。当数据集被修改时(如,从服务器载入数据,过滤、排序等),Spry Region被更新并反射新数据。Spry Region能用任何HTML块元素如<div>、<p>标签创建。


例:


<div spry:region="dsProducts" id="content">

    <table id="products">

    ...

    </table>

</div>

3)Loading Data


Spry Data Set负责载入和处理数据,而XML是经常用到的在服务器端到客户端传递数据。Spry XML Data Set能被用于通过浏览器的XMLHTTPRequest对象来检索数据。XML可以包含在一个文件中,也可以是服务器端的函数调用。Spry使用XPath,W3C标准来描述XML节点集,识别节点描述为数据记录。


4)Data Set Declaration


Spry Data Set增加到页面分为两步。


首先,包含适当的JavaScript库:


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


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


其次,创建Data Set的实例,通过知道XML数据,定义重复的节点。


var dsProducts=new SpryDataXMLDataSet("products.xml","products.product")


------------


dsProducts: 变量引用。数据集的名字。


SpryDataXMLDataSet:对象实例。


products.xml:XML数据。


products.product:XPath。在XML文件中指向节点的指针。


5)显示数据


使用Spry Regions显示数据到Web页面。创建从数据集到Spry Regions的绑定是很容易实现的,通过附加Spry属性到HTML标准标签上。如下的例子:


<div spry:region="dsProducts" id="content">

    <table id="products">

        <tr>

            <th spry:sort="name">Product</th>

            <th spry:sort="category">Category</th>

        </tr>

        <tbody spry:repeat="dsProducts">

            <tr>

                <td>{name}</td>

                <td>{category}</td>

            </tr>

        </tbody>

    </table>

</div>

------------------


Spry Region Declaration:Spry区域声明


Data Set Binding:数据集绑定


Spry Attributes:Spry属性


Spry Data Bindings:Spry数据绑定


Repeat Region Declaration:重复区域声明


6)Master/Detail Data Sets


Spry框架支持Master/Detail Data Sets概念。这意味着在Master Data Sets中选择记录来驱动Detail Data Set的内容。