Spry框架入门_第1页
Spry框架入门_第2页
Spry框架入门_第3页
Spry框架入门_第4页
Spry框架入门_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、AdobeSpry框架入门作者：2007-06-2614:38:34AdobeSpry是一个为Web设计人员开发的Ajax框架，它使彳#在一个HTM顷面中创建丰富体验成为了可能。Spry的目的是成为实现Ajax的一种简单方式，对HTMLCSSffiJavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。Spry与Ajax框架是不同的，因为它是面向设计人员而不是开发人员。与其它一些Ajax框架相比，它的服务器端的技术不是很可靠。它依赖于XMLXML可以很容易被Spry组件接受，几乎没有什么大问题。Adobe简化Spry实现的动机已经引起一些Webfe准拥护者

2、的怒火，他们批评Spry利用了定制HTM瞩性。最近，Adobe在它们的网站上发布了一个更新版本Spry1.5。这是自从去年最初的测试版发行以来的第六次发布，增加了一些新特性用于同不同类型的数据交互。包括：?嵌套数据集?JSON数据集?HTML数据集?会话处理?表单提交?分页数据视图?重写已经存在的效果?单选按钮验证框?自动建议框SpryAPI函数Spry框架包含下列组件：?Spry数据和动态区?数据实用工具?服务器端实用工具?各种小应用程序?效果Spry可以从Adobe免费下载，其中包括大量演示、示例、技术文章和文档。文档还可以通过下载，这里还有一个Spry用户的开发中心，你可以从中获得大量技

3、术文章。数据处理XML据说的足够多了，让我们试用一下这个框架。我们评估的第一点是Spry处理XML数据的能力。我们以XML文件的形式创建一些样本数据，其中包含某个假想市政当局员工的信息。样例如下：<xmlversion="1.0"encoding="UTF-8"><employees><employeeid="1"><fname>Frank</fname><lname>Bacon</lname><email>fbaconmunicipali

4、</email><mobilePhone>2201-09-0426</mobilePhone><department>BoardofEducation</department></employee><employeeid="2"><fname>Bob</fname><lname>Boyle</lname><email></email><mobilePhone&

5、gt;2501-301-291</mobilePhone><department>AnimalServices</department></employee></employees>可以看到有很多行数据，每行包含相同的属性，Spry与XML交互不需要DTD儆据类型定义），这是处理XML一一个典型问题，但并不是标准。此处，我们的目的是使Spry为我们处理数据然后输出到一个HTMIM中，你可以命名数据的属性并告知Spry在页面的那个位置显示它们。使用一个文本编辑器，我们就可以处理HTM呐容。下面是来自标记间的一小片段。我们引入了两个.js

6、文件，第一个为了利用XPath使用了Google的开源代码，因此稍后我们能够过滤数据，第二个是Spry数据库，它依赖XPath库，这也是为什么使用时先声明的原因。接下来声明了一个SpryXMLDataSet实例，此处我们将它命名为dsEmployees。初始化要求两个参数：XM戊件的位置和一个用来识别XML节点或包含数据的节点的XPath表达式。XMLa可以从一个URL加载。注意XPath表达式识别XMLB根节点，然后是代表每行数据的子节点。<title>SprySimpleDataExample</title><scripttype="text/jav

7、ascript"src="includes/xpath.js"></script><scripttype="text/javascript"src="includes/SpryData.js"></script><scripttype="text/javascript">vardsEmployees=newSpry.Data.XMLDataSet("assets/employee_data.xml","employees/

8、employee");</script></head>在页面的主体部分输出Spry数据集很简单。Spry动态区用于在页面上显示XML>据，当数据集改变时它们会同时更新。一个动态区使用spry:region在一个div标记中声明，HTM麻记作为动态区容器。动态区是Spry数据集的一个观测区"，打括号用来区别数据集中的每个列，spry:repeat标记迭代显示数据集中的所有行。<divid="Employees_DIV"spry:region="dsEmployees"><tableid=&

9、quot;EmployeesTable"><tr><th>Name</th><th>Department</th><th>Email</th></tr><trspry:repeat="dsEmployees"><td></td><td></td><td><ahref="mailto:"></a></td></tr></t

10、able></div>head标记中声明Spry有处理来自一个或多个数据集的主要/详细动态区的规定。下面的样例代码和上面一样使用相同的逻辑在了一个Spry数据集。SpryXMLDataSet的setCurrentRow方法中对重复的数据表行添加了一个单击事件，传递当前行的id作为参数。第二个数据表用一个div标记围起来，其中使用了spry:detailregion来形成代码的详细部分。利用列表对数据表排序十分简单。<divid="Employees_DIV"spry:region="dsEmployees"><tabl

11、eid="EmployeesTable"><tr><th>Name</th></tr><trspry:repeat="dsEmployees"onclick="dsEmployees.setCurrentRow('')"><td></td></tr></table></div><divid="Employee_Detail_DIV"spry:detailregion=&

12、quot;dsEmployees"><tableid="EmployeeDetailTable"border="1"><tr><th>Name</th><th>Department</th><th>Email</th><th>MobilePhone</th></tr><tr><td></td><td></td><td><ahref=

13、"mailto:"></a></td><td></td></tr></table></div>JSONSpry以同样的方式处理来自JSON的数据，很自然，不同之处是数据文件白格式和用于处理JSON勺Spry数据库。下面是一个数据文件样例，信息和上面的一样，现在是一个对象数组，这是JSON勺优势所在，它有自己通用的数据描述方式而不需要使用像用于XML样例使用的DT嗷据内容定制描述。id:"1",fname:"Frank",lname:"B

14、acon",email:"",mobilePhone:"2201-09-0426",department:"BoardofEducation",id:"2",fname:"Bob",lname:"Boyle",email:"",mobilePhone:"2501-301-291",department:"AnimalService

15、s"下面是同样来自页面<head>标记中的小片段，也引入了SpryJSONDataSet库的.js包。<scriptlanguage="JavaScript"type="text/javascript"src="includes/xpath.js"></script><scriptlanguage="JavaScript"type="text/javascript"src="includes/SpryData.js">

16、</script><scriptlanguage="JavaScript"type="text/javascript"src="includes/SpryJSONDataSet.js"></script><scripttype="text/javascript">vardsEmployees=newSpry.Data.JSONDataSet("assets/employee_data.js");</script></head>

17、;使用了同处理XML数据一样的输出代码在页面上显示JSONB据，只需要对页面稍作修改以显示JSON据彳t替XMl>据，这个样例就很好的满足我们的要求。但是这个例子在Safari浏览器上不能运行，在苹果机的Firefox上使用很好。这是用于处理JSON据的一个测试代码和第一个版本，所以在Safari和引入的JavaScript库之间可能存在不知道的冲突。我们希望它应该能够工作。Spry小应用程序Spry的另一部分是小应用程序一一可以同HTMLCSSffiJavaScript像结合添加到页面中的可视元素。这些都是Spry框架的一部分，同时为了提供更丰富的用户体验还在页面上添加了用户交互接口。

18、大部分小应用程序都是HTM嘀体元素的增强版一一同时还有一些额外的可视化元素提供了显示内容的菜单和其它替代方式。每个Spry小应用程序包含了用于布局HTML弋码和表达行为和CSS羊式的JavaScript脚本。在编写这些小应用程序代码时将可用性考虑在内，为了能够进行键盘访问和小应用的可用性，应该关闭浏览器中的JavaScript，或设定为不支持。为了帮助开发人员能够利用Spry1.5API开发他们的小应用，可以从Adobe获得开发指南。Spry小应用扩展的HTML1体元素包括：?复选框小程序?单选按钮小程序?选择小程序?文本区小程序?文本域小程序这些小程序通过添加验证和用户反馈信息包括入口提示和

19、错误消息扩展了普通表单功能。反馈信息通过使用CSS来改变窗体元素的背景色显示，或显示一个错误消息。大多数小应用程序提供了大量事件，所以在用户交互期间的不同时刻都可以进行验证；例如，键入一个值，选择另外一个表单元素或提交表单。下面是一个验证的简单小例子，Textfield小程序用于表单验证，该文本域要求键入作为一个整数值，对每个验证类型有不同的错误提示信息。像前面我们从页面中摘录的样例一样。要注意的是该应用在<head>标记内我们引入了JavaScript和CSS两个文件。当下载部分Spry时，这些文件不能在同样的文件夹中找到，相反它们可以在应用文件夹中找到。<title>

20、;SpryTextFieldWidgetExample</title><scriptsrc="includes/SpryValidationTextField.js"type="text/javascript"></script><linkhref="includes/SpryValidationTextField.css"rel="stylesheet"type="text/css"/></head><body><f

21、ormid="form1"name="form1"method="post"action=""><spanid="sprytextfield1"><inputtype="text"name="textfield"id="textfield"/><spanclass="textfieldRequiredMsg">Thevalueisrequired.</span>&

22、lt;spanclass="textfieldInvalidFormatMsg">Invalidformat.</span></span></form><scripttype="text/javascript"><!-varsprytextfield1=newSpry.Widget.ValidationTextField("sprytextfield1","integer",);/-></script></body>在上面彳码

23、的<form>标记中，你会发现我们使用了一个<span淅记来识别要验证的文本域。对每个验证信息我们在<span>标记中又嵌入了<span>标记。下面的窗体是一个JavaScript代码段在浏览器中插入的逻辑用来触发验证。Spry.Widget.ValidationTextField方法对每个要验证的文本域需要一个参数，还有另外两个可选参数用于识别数据类型验证和触发验证的专用事件在本例中当textfield失去焦点时触发。自动建议程序是Spry1.5新增加的一个功能，它是一个设计用于搜索接口的textfield表单元素，搜索接口通过显示一系列同用户标准输

24、入可能的匹配作为对用户类型的一种反映。自动建议程序和其它的小应用程序不同，因为它依赖于要显示的建议的一个数据集。Spry中包含的样例文件是结合了文本和图形。还有大量的其它应用程序并非专用于表单元素：?Accordion?移动面板?菜单条?滑动面板?标签面板我们可以将菜单条放在一端，因为它直接就是一个多结点导航对象；其它的应用提供了各种各样的方式在屏幕上显示额外数据而不用重新加载页面。还有同样操作方式的其它典型Ajax框架。他们的行为更像桌面应用用户控制而不像HTM提供的标准接口控制。在Adobe试验网站上下载的Spry中包含了这些应用如何工作的示例。Spry效果虽然Spry效果已经成为框架的一

25、部分，但在1.5版本中有时还是重写了效果库，显著的改变是为了与其它语言更一致改变了很多方法的名称。Spry效果的目的是对HTMLM中的可视元素添加可视效果。这些效果包括动态过渡和内容的高亮显示。我是合理使用能够动画的坚定支持者，我们要尽量少的使用它。但是有时可以使用它指示应用状态。为了给用户较好的反馈，从一个状态到另一个状态的过渡可以巧妙地使用动态效果。Spry效果包括：?去光效果?褪色效果?发光效果?高亮效果?摇动效果?滑动效果?压扁效果可以使用Observers合并多个效果，因此，例如一个面板的宽度减小另一个面板的宽度以相同的大小增加，我们就可以对两个面板的转换使用一个滑动效果。聚类允许效

26、果一个接一个的运行，因此一个面板可以先增加宽度然后再增加高度，而不是像observer那样同时改变。div 标记逐下面是一个使用了消光效果的HTMIM面摘要。这本例中，效果通过单击超链接触发；消光效果将会使得包含文本的渐减小高度知道消失为止，从超链接两个方向都会有效。Spry效果库是包含在Spry下载包中标准的一部分。<title>SpryEffectExample</title><scriptsrc="includes/SpryEffects.js"type="text/javascript"></script

27、><styletype="text/css">.animationContainerheight:220px;.demoDivheight:200px;width:400px;overflow:hidden;background-color:#CCCCCC;</style></head><body><ahref="#"onclick="blind_toggle.start();returnfalse;">BlindExample</a><br/>

28、<divclass="animationContainer"><divclass="demoDiv"id="slideItUp2"><h4>SpryBlindEffectExample</h4><pclass="sampleText">Loremipsumdolorsitamet,consetetursadipscingelitr,seddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyamerat,seddiamvoluptua.Atveroeosetaccusametjustoduodoloresetearebum.Stetclita

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论