Adobe Spry框架入门

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

Spry的目的是成为实现Ajax的一种简单方式，对HTML、CSS和JavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。

作者：builder.com.cn 2007年6月26日

关键字：

JSON

Spry以同样的方式处理来自JSON的数据，很自然，不同之处是数据文件的格式和用于处理JSON的Spry数据库。下面是一个数据文件样例，信息和上面的一样，现在是一个对象数组，这是JSON的优势所在，它有自己通用的数据描述方式而不需要使用像用于XML样例使用的DTD数据内容定制描述。

[

{

id:"1",

fname: "Frank",

lname: "Bacon",

email: "fbacon@municipality.gov",

mobilePhone: "2201-09-0426",

department: "Board of Education"

{

id:"2",

fname: "Bob",

lname: "Boyle",

email: "bboyle@municipality.gov",

mobilePhone: "2501-301-291",

department: "Animal Services"

}

下面是同样来自页面<head>标记中的小片段，也引入了SpryJSONDataSet库的.js包。

</script>

<scriptlanguage="JavaScript"type="text/javascript" src="includes/SpryJSONDataSet.js"></script>

var dsEmployees = new Spry.Data.JSONDataSet("assets/employee_data.js");

</script>

</head>

使用了同处理XML数据一样的输出代码在页面上显示JSON数据，只需要对页面稍作修改以显示JSON数据代替XML数据，这个样例就很好的满足我们的要求。

但是这个例子在Safari浏览器上不能运行，在苹果机的Firefox上使用很好。这是用于处理JSON数据的一个测试代码和第一个版本，所以在Safari和引入的JavaScript库之间可能存在不知道的冲突。我们希望它应该能够工作。

Spry小应用程序

Spry的另一部分是小应用程序——可以同HTML、CSS和JavaScript像结合添加到页面中的可视元素。这些都是Spry框架的一部分，同时为了提供更丰富的用户体验还在页面上添加了用户交互接口。大部分小应用程序都是HTML窗体元素的增强版——同时还有一些额外的可视化元素提供了显示内容的菜单和其它替代方式。

每个Spry小应用程序包含了用于布局HTML代码和表达行为和CSS样式的JavaScript脚本。在编写这些小应用程序代码时将可用性考虑在内，为了能够进行键盘访问和小应用的可用性，应该关闭浏览器中的JavaScript，或设定为不支持。为了帮助开发人员能够利用Spry1.5 API开发他们的小应用，可以从Adobe获得开发指南。

Spry小应用扩展的HTML窗体元素包括：

复选框小程序
单选按钮小程序
选择小程序
文本区小程序
文本域小程序

这些小程序通过添加验证和用户反馈信息包括入口提示和错误消息扩展了普通表单功能。反馈信息通过使用CSS来改变窗体元素的背景色显示，或显示一个错误消息。大多数小应用程序提供了大量事件，所以在用户交互期间的不同时刻都可以进行验证；例如，键入一个值，选择另外一个表单元素或提交表单。

下面是一个验证的简单小例子，Textfield小程序用于表单验证，该文本域要求键入作为一个整数值，对每个验证类型有不同的错误提示信息。像前面我们从页面中摘录的样例一样。要注意的是该应用在<head>标记内我们引入了JavaScript和CSS两个文件。当下载部分Spry时，这些文件不能在同样的文件夹中找到，相反它们可以在应用文件夹中找到。

<title>Spry Text Field Widget Example</title>

</head>

<body>

<span class="textfieldRequiredMsg">The value is required.</span>

<span class="textfieldInvalidFormatMsg">Invalid format.</span>

</span>

</form>

<!--

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "integer", {validateOn:["blur"]});

//-->

</script>

</body>

在上面代码的<form>标记中，你会发现我们使用了一个<span>标记来识别要验证的文本域。对每个验证信息我们在<span>标记中又嵌入了<span>标记。下面的窗体是一个JavaScript代码段在浏览器中插入的逻辑用来触发验证。

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

自动建议程序是Spry 1.5新增加的一个功能，它是一个设计用于搜索接口的textfield表单元素，搜索接口通过显示一系列同用户标准输入可能的匹配作为对用户类型的一种反映。自动建议程序和其它的小应用程序不同，因为它依赖于要显示的建议的一个数据集。Spry中包含的样例文件是结合了文本和图形。

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

Accordion
移动面板
菜单条
滑动面板
标签面板

我们可以将菜单条放在一端，因为它直接就是一个多结点导航对象；其它的应用提供了各种各样的方式在屏幕上显示额外数据而不用重新加载页面。还有同样操作方式的其它典型Ajax框架。他们的行为更像桌面应用用户控制而不像HTML提供的标准接口控制。在Adobe试验网站上下载的Spry中包含了这些应用如何工作的示例。

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

Adobe Spry框架入门

业界热点: