书签 分享 收藏 举报 版权申诉 / 13

类型Spry框架入门.docx

  • 文档编号:24948998
  • 上传时间:2023-06-03
  • 格式:DOCX
  • 页数:13
  • 大小:65.16KB

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时,这些文件不能在同样的文件夹中找到,相反它们可以在应用文件夹中找到。

SpryTextFieldWidgetExample

Thevalueisrequired.

Invalidformat.

--

varsprytextfield1=newSpry.Widget.ValidationTextField("sprytextfield1","integer",);

//-->

在上面代码的

标记中,你会发现我们使用了一个标记来识别要验证的文本域。

对每个验证信息我们在标记中又嵌入了标记。

下面的窗体是一个JavaScript代码段在浏览器中插入的逻辑用来触发验证。

Spry.Widget.ValidationTextField方法对每个要验证的文本域需要一个参数,还有另外两个可选参数用于识别数据类型验证和触发验证的专用事件——在本例中当textfield失去焦点时触发。

自动建议程序是Spry1.5新增加的一个功能,它是一个设计用于搜索接口的textfield表单元素,搜索接口通过显示一系列同用户标准输入可能的匹配作为对用户类型的一种反映。

自动建议程序和其它的小应用程序不同,因为它依赖于要显示的建议的一个数据集。

Spry中包含的样例文件是结合了文本和图形。

还有大量的其它应用程序并非专用于表单元素:

∙Accordion

∙移动面板

∙菜单条

∙滑动面板

∙标签面板

我们可以将菜单条放在一端,因为它直接就是一个多结点导航对象;其它的应用提供了各种各样的方式在屏幕上显示额外数据而不用重新加载页面。

还有同样操作方式的其它典型Ajax框架。

他们的行为更像桌面应用用户控制而不像HTML提供的标准接口控制。

在Adobe试验网站上下载的Spry中包含了这些应用如何工作的示例。

Spry效果

虽然Spry效果已经成为框架的一部分,但在1.5版本中有时还是重写了效果库,显著的改变是为了与其它语言更一致改变了很多方法的名称。

Spry效果的目的是对HTML页中的可视元素添加可视效果。

这些效果包括动态过渡和内容的高亮显示。

我是合理使用能够动画的坚定支持者,我们要尽量少的使用它。

但是有时可以使用它指示应用状态。

为了给用户较好的反馈,从一个状态到另一个状态的过渡可以巧妙地使用动态效果。

Spry效果包括:

∙去光效果

∙褪色效果

∙发光效果

∙高亮效果

∙摇动效果

∙滑动效果

∙压扁效果

可以使用Observers合并多个效果,因此,例如一个面板的宽度减小另一个面板的宽度以相同的大小增加,我们就可以对两个面板的转换使用一个滑动效果。

聚类允许效果一个接一个的运行,因此一个面板可以先增加宽度然后再增加高度,而不是像observer那样同时改变。

下面是一个使用了消光效果的HTML页面摘要。

这本例中,效果通过单击超链接触发;消光效果将会使得包含文本的div标记逐渐减小高度知道消失为止,从超链接两个方向都会有效。

Spry效果库是包含在Spry下载包中标准的一部分。

SpryEffectExample

.animationContainer{

height:

220px;

}

.demoDiv{

height:

200px;

width:

400px;

overflow:

hidden;

background-color:

#CCCCCC;

}

BlindExample


SpryBlindEffectExample

Loremipsumdolorsitamet,consetetursadipscingelitr,seddiam

nonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyam

erat,seddiamvoluptua.Atveroeosetaccusametjustoduo

doloresetearebum.Stetclitakasdgubergren,noseatakimata

sanctusestLoremipsumdolorsitamet.

--

varblind_toggle=newSpry.Effect.Blind('slideItUp2',);

//-->

SpryandDreamweaverCS3

Spry1.4的增强版集成了DreamweaverCS3,利用标记编辑器使开发变得很容易。

例如,Spry数据通过使用DreamweaverCS3中的对话框可以很容易实现,因为你可以像引入XML模式和预览数据一样做其它事情。

DreamweaverCS3还可以在当前站点中包含需要的JavaScript和CSS文件。

Spry工具条中包含了前面介绍的三组对象集,分别用于显示XML数据,表单元素验证和菜单与面板集。

DreamweaverCS3可以内视SpryXmlDataSet库使用的XML数据,显示绑定面板中某行的私有属性——这些属性可以从绑定面板拖动到页面中,如果它们位于SpryRegion或SpryRepeat中将会在浏览器中动态递交。

结论

Spry框架是实现Ajax框架的简单形式,尤其适用于专门的用户组中的设计人员。

Web标准支持者批评Spry的实现使用了定制HTML属性,不过就笔者看来这并不是问题,因为Spry组件像预想的一样工作良好。

当Spry集成到DreamweaverCS3中后,它很容易在一个文本编辑器中部署——在Spry下载包中Adobe提供了大量的样例。

当前发行版本有一个API运行用户在Spry框架内创建它们自己使用的小应用程序。

举报
举报
版权申诉
版权申诉
word格式文档无特别注明外均可编辑修改;预览文档经过压缩,下载后原文更清晰! 立即下载
配套讲稿:

如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制:

部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词:
Spry 框架 入门
提示  冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:Spry框架入门.docx
链接地址:https://www.bdocx.com/doc/24948998.html
相关搜索
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
展开