Spry框架入门.docx
- 文档编号:24948998
- 上传时间:2023-06-03
- 格式:DOCX
- 页数:13
- 大小:65.16KB
Spry框架入门.docx
《Spry框架入门.docx》由会员分享,可在线阅读,更多相关《Spry框架入门.docx(13页珍藏版)》请在冰豆网上搜索。
Spry框架入门
AdobeSpry框架入门
作者:
2007-06-2614:
38:
34
AdobeSpry是一个为Web设计人员开发的Ajax框架,它使得在一个HTML页面中创建丰富体验成为了可能。
Spry的目的是成为实现Ajax的一种简单方式,对HTML、CSS和JavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。
Spry与Ajax框架是不同的,因为它是面向设计人员而不是开发人员。
与其它一些Ajax框架相比,它的服务器端的技术不是很可靠。
它依赖于XML,XML可以很容易被Spry组件接受,几乎没有什么大问题。
Adobe简化Spry实现的动机已经引起一些Web标准拥护者的怒火,他们批评Spry利用了定制HTML属性。
最近,Adobe在它们的网站上发布了一个更新版本Spry1.5。
这是自从去年最初的测试版发行以来的第六次发布,增加了一些新特性用于同不同类型的数据交互。
包括:
∙嵌套数据集
∙JSON数据集
∙HTML数据集
∙会话处理
∙表单提交
∙分页数据视图
∙重写已经存在的效果
∙单选按钮验证框
∙自动建议框SpryAPI函数
Spry框架包含下列组件:
∙Spry数据和动态区
∙数据实用工具
∙服务器端实用工具
∙各种小应用程序
∙效果
Spry可以从Adobe免费下载,其中包括大量演示、示例、技术文章和文档。
文档还可以通过下载,这里还有一个Spry用户的开发中心,你可以从中获得大量技术文章。
数据处理XML数据
说的足够多了,让我们试用一下这个框架。
我们评估的第一点是Spry处理XML数据的能力。
我们以XML文件的形式创建一些样本数据,其中包含某个假想市政当局员工的信息。
样例如下:
可以看到有很多行数据,每行包含相同的属性,Spry与XML交互不需要DTD(数据类型定义),这是处理XML的一个典型问题,但并不是标准。
此处,我们的目的是使Spry为我们处理数据然后输出到一个HTML页中,你可以命名数据的属性并告知Spry在页面的那个位置显示它们。
使用一个文本编辑器,我们就可以处理HTML内容。
下面是来自标记间的一小片段。
我们引入了两个.js文件,第一个为了利用XPath使用了Google的开源代码,因此稍后我们能够过滤数据,第二个是Spry数据库,它依赖XPath库,这也是为什么使用时先声明的原因。
接下来声明了一个SpryXMLDataSet实例,此处我们将它命名为dsEmployees。
初始化要求两个参数:
XML文件的位置和一个用来识别XML节点或包含数据的节点的XPath表达式。
XML还可以从一个URL加载。
注意XPath表达式识别XML的根节点,然后是代表每行数据的子节点。
vardsEmployees=newSpry.Data.XMLDataSet("assets/employee_data.xml","employees/employee");
在页面的主体部分输出Spry数据集很简单。
Spry动态区用于在页面上显示XML数据,当数据集改变时它们会同时更新。
一个动态区使用spry:
region在一个div标记中声明,HTML标记作为动态区容器。
动态区是Spry数据集的一个“观测区”,打括号用来区别数据集中的每个列,spry:
repeat标记迭代显示数据集中的所有行。
region="dsEmployees">Name Department Email
repeat="dsEmployees">
">
Spry有处理来自一个或多个数据集的主要/详细动态区的规定。
下面的样例代码和上面一样使用相同的逻辑在head标记中声明了一个Spry数据集。
SpryXMLDataSet的setCurrentRow方法中对重复的数据表行添加了一个单击事件,传递当前行的id作为参数。
第二个数据表用一个div标记围起来,其中使用了spry:
detailregion来形成代码的详细部分。
利用列表对数据表排序十分简单。
region="dsEmployees">Name
repeat="dsEmployees"onclick="dsEmployees.setCurrentRow('')">
detailregion="dsEmployees">Name Department Email MobilePhone
">
JSON
Spry以同样的方式处理来自JSON的数据,很自然,不同之处是数据文件的格式和用于处理JSON的Spry数据库。
下面是一个数据文件样例,信息和上面的一样,现在是一个对象数组,这是JSON的优势所在,它有自己通用的数据描述方式而不需要使用像用于XML样例使用的DTD数据内容定制描述。
[
{
id:
"1",
fname:
"Frank",
lname:
"Bacon",
email:
"fbacon@municipality.gov",
mobilePhone:
"2201-09-0426",
department:
"BoardofEducation"
},
{
id:
"2",
fname:
"Bob",
lname:
"Boyle",
email:
"bboyle@municipality.gov",
mobilePhone:
"2501-301-291",
department:
"AnimalServices"
}
下面是同样来自页面
标记中的小片段,也引入了SpryJSONDataSet库的.js包。vardsEmployees=newSpry.Data.JSONDataSet("assets/employee_data.js");
使用了同处理XML数据一样的输出代码在页面上显示JSON数据,只需要对页面稍作修改以显示JSON数据代替XML数据,这个样例就很好的满足我们的要求。
但是这个例子在Safari浏览器上不能运行,在苹果机的Firefox上使用很好。
这是用于处理JSON数据的一个测试代码和第一个版本,所以在Safari和引入的JavaScript库之间可能存在不知道的冲突。
我们希望它应该能够工作。
Spry小应用程序
Spry的另一部分是小应用程序——可以同HTML、CSS和JavaScript像结合添加到页面中的可视元素。
这些都是Spry框架的一部分,同时为了提供更丰富的用户体验还在页面上添加了用户交互接口。
大部分小应用程序都是HTML窗体元素的增强版——同时还有一些额外的可视化元素提供了显示内容的菜单和其它替代方式。
每个Spry小应用程序包含了用于布局HTML代码和表达行为和CSS样式的JavaScript脚本。
在编写这些小应用程序代码时将可用性考虑在内,为了能够进行键盘访问和小应用的可用性,应该关闭浏览器中的JavaScript,或设定为不支持。
为了帮助开发人员能够利用Spry1.5API开发他们的小应用,可以从Adobe获得开发指南。
Spry小应用扩展的HTML窗体元素包括:
∙复选框小程序
∙单选按钮小程序
∙选择小程序
∙文本区小程序
∙文本域小程序
这些小程序通过添加验证和用户反馈信息包括入口提示和错误消息扩展了普通表单功能。
反馈信息通过使用CSS来改变窗体元素的背景色显示,或显示一个错误消息。
大多数小应用程序提供了大量事件,所以在用户交互期间的不同时刻都可以进行验证;例如,键入一个值,选择另外一个表单元素或提交表单。
下面是一个验证的简单小例子,Textfield小程序用于表单验证,该文本域要求键入作为一个整数值,对每个验证类型有不同的错误提示信息。
像前面我们从页面中摘录的样例一样。
要注意的是该应用在
标记内我们引入了JavaScript和CSS两个文件。当下载部分Spry时,这些文件不能在同样的文件夹中找到,相反它们可以在应用文件夹中找到。
--
varsprytextfield1=newSpry.Widget.ValidationTextField("sprytextfield1","integer",);
//-->
在上面代码的