用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的内容。
分享到:
相关推荐
概述Spry是一个基于JavaScript的框架,可以快速开发基于Ajax的网页。 Spry的设计感觉就像是HTML和CSS的扩展,因此任何具有基本Web生产技能的人都可以通过在页面中添加Ajax的功能来创建下一代Web体验。 Spry可以与...
Spry 框架是一个JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。本课程内容是SPRY框架的第一部分,从浅入深,带您进入WEB前端开发的世界,帮助你完成表单验证的实现。
本文档资料适合WEB网站或电子商务平台软件开发人员参考和学习.
Adobe公司出品的spry框架 动态数据集很好用阿
spry最新的1.6AJAX框架,背后靠山是ADOBE功能大家都知道有多么强,在这里我就不多介绍了.这个包里还附送了一个Dreamweaver的EXCHANGE扩展插件(需要Dreamweaver CS3和AdobeExtensionManager1.8的支持),大家快来下啊!
Spry 框架是一个JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。本课程内容是SPRY框架的第一部分,从浅入深,带您进入WEB前端开发的世界,帮助你完成表单验证的实现。
Spry 框架是一个JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。本课程内容是SPRY框架的第一部分,从浅入深,带您进入WEB前端开发的世界,帮助你完成表单验证的实现。
Dreamweaver CS6使用Spry面板.pdf 学习资料 复习资料 教学资源
spry通过XML来实现分页
用spry验证两次密码正确,代码都写的号好的,懂的人一看就知道了
Spry 框架是什么? XML 数据集 缓存 获得数据 当前行 排序 排重 过滤 自动刷新数据 侦听器 关于动态区域 创建动态区域 数据引用 循环结构 条件结构 区域状态 区域侦听器 隐藏数据引用 主/从结构 ...
第2章 应用Spry框架 2.1 制作二级导航菜单 2.2 制作图片展示 2.3 制作常识问答 2.4 制作Spry表单 第3章 制作企业网站(锐动力) 3.1 设计首页 3.2 设计我们的服务 3.3 设计案例展示 3.4 设计会员登录和注册 第4章 JSP...
Spry控件公开课教案,适用于中职教学,主要内容为Spry下拉菜单,Spry折叠式控件
支持Dreamweaver cs3进行Spry框架开发及应用。新版本补丁。
包含spry的中文学习文档,spry的相关包,有这个足以了解spry.
Spry 是Adobe 的 Ajax framework. Spry的目的是成为实现Ajax的一种简单方式,对HTML、CSS和JavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。 Spry demonstrations: Pho
网页中选项卡样式 基于Adobe Spry 源码 ,样式更易懂 封装很好,使用很简便.
CSS教程12.3 借助于Spry实现Tab面板.CHM
Dreamweaver CS6认识Spry菜单栏Widget.pdf 学习资料 复习资料 教学资源
Dreamweaver CS6使用Spry验证文本区域.pdf 学习资料 复习资料 教学资源