扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
作者：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 language="JavaScript" type="text/javascript" src="includes/xpath.js">
</script>
<script language="JavaScript" type="text/javascript" src="includes/SpryData.js"></script>
<scriptlanguage="JavaScript"type="text/javascript" src="includes/SpryJSONDataSet.js"></script>
<script type="text/javascript">
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>
<script src="includes/SpryValidationTextField.js" type="text/javascript"></script>
<link href="includes/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<span id="sprytextfield1">
<input type="text" name="textfield" id="textfield" />
<span class="textfieldRequiredMsg">The value is required.</span>
<span class="textfieldInvalidFormatMsg">Invalid format.</span>
</span>
</form>
<script type="text/javascript">
<!--
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中包含的样例文件是结合了文本和图形。
还有大量的其它应用程序并非专用于表单元素：
我们可以将菜单条放在一端，因为它直接就是一个多结点导航对象；其它的应用提供了各种各样的方式在屏幕上显示额外数据而不用重新加载页面。还有同样操作方式的其它典型Ajax框架。他们的行为更像桌面应用用户控制而不像HTML提供的标准接口控制。在Adobe试验网站上下载的Spry中包含了这些应用如何工作的示例。
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
京公网安备 11010802021500号