java资料夹

Adobe Spry框架入门
作者： builder.com.cn
2007-06-26 14:38:34

Adobe Spry是一个为Web设计人员开发的Ajax框架，它使得在一个HTML页面中创建丰富体验成为了可能。
Spry的目的是成为实现Ajax的一种简单方式，对HTML、CSS和JavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。
Spry与Ajax框架是不同的，因为它是面向设计人员而不是开发人员。与其它一些Ajax框架相比，它的服务器端的技术不是很可靠。它依赖于XML，XML可以很容易被Spry组件接受，几乎没有什么大问题。
Adobe简化Spry实现的动机已经引起一些Web标准拥护者的怒火，他们批评Spry利用了定制HTML属性。
最近，Adobe在它们的Adobe 实验网站上发布了一个更新版本Spry 1.5。这是自从去年最初的测试版发行以来的第六次发布，增加了一些新特性用于同不同类型的数据交互。包括：
• 嵌套数据集
• JSON 数据集
• HTML 数据集
• 会话处理
• 表单提交
• 分页数据视图
• 重写已经存在的效果
• 单选按钮验证框
• 自动建议框Spry API函数
Spry框架包含下列组件：
• Spry 数据和动态区
• 数据实用工具
• 服务器端实用工具
• 各种小应用程序
• 效果
Spry可以从Adobe 免费下载，其中包括大量演示、示例、技术文章和文档。文档还可以通过Adobe's LiveDocs下载，这里还有一个Spry用户的开发中心，你可以从中获得大量技术文章。
数据处理XML数据
说的足够多了，让我们试用一下这个框架。我们评估的第一点是Spry处理XML数据的能力。我们以XML文件的形式创建一些样本数据，其中包含某个假想市政当局员工的信息。
样例如下：
<xml version="1.0" encoding="UTF-8">
<employees>
<employee id="1">
<fname>Frank</fname>
<lname>Bacon</lname>
<email>[email protected]</email>
<mobilePhone>2201-09-0426</mobilePhone>
<department>Board of Education</department>
</employee>
<employee id="2">
<fname>Bob</fname>
<lname>Boyle</lname>
<email>[email protected]</email>
<mobilePhone>2501-301-291</mobilePhone>
<department>Animal Services</department>
</employee>
</employees>
可以看到有很多行数据，每行包含相同的属性，Spry与XML交互不需要DTD(数据类型定义)，这是处理XML的一个典型问题，但并不是标准。此处，我们的目的是使Spry为我们处理数据然后输出到一个HTML页中，你可以命名数据的属性并告知Spry在页面的那个位置显示它们。
使用一个文本编辑器，我们就可以处理HTML内容。下面是来自标记间的一小片段。我们引入了两个.js文件，第一个为了利用XPath使用了Google的开源代码，因此稍后我们能够过滤数据，第二个是Spry数据库，它依赖XPath库，这也是为什么使用时先声明的原因。
接下来声明了一个Spry XMLDataSet实例，此处我们将它命名为dsEmployees。初始化要求两个参数：XML文件的位置和一个用来识别XML节点或包含数据的节点的XPath表达式。XML还可以从一个URL加载。注意XPath表达式识别XML的根节点，然后是代表每行数据的子节点。
<title>Spry Simple Data Example</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript">
var dsEmployees = newSpry.Data.XMLDataSet("assets/employee_data.xml", "employees/employee");
</script>
</head>
在页面的主体部分输出Spry数据集很简单。Spry动态区用于在页面上显示XML数据，当数据集改变时它们会同时更新。一个动态区使用spry:region在一个div标记中声明，HTML标记作为动态区容器。动态区是Spry数据集的一个“观测区”，打括号用来区别数据集中的每个列，spry:repeat标记迭代显示数据集中的所有行。
<div id="Employees_DIV" spry:region="dsEmployees">
<table id="Employees Table">
<tr>
<th>Name</th>
<th>Department</th>
<th>Email</th>
</tr>
<tr spry:repeat="dsEmployees">
<td> </td>
<td></td>
<td><a href="mailto:"></a></td>
</tr>
</table>
</div>
Spry有处理来自一个或多个数据集的主要/详细动态区的规定。下面的样例代码和上面一样使用相同的逻辑在head标记中声明了一个Spry数据集。
Spry XMLDataSet的setCurrentRow方法中对重复的数据表行添加了一个单击事件，传递当前行的id作为参数。第二个数据表用一个div标记围起来，其中使用了spry:detailregion来形成代码的详细部分。利用列表对数据表排序十分简单。
<div id="Employees_DIV" spry:region="dsEmployees">
<table id="Employees Table">
<tr>
<th>Name</th>
</tr>
<tr spry:repeat="dsEmployees" onclick="dsEmployees.setCurrentRow('')">
<td> </td>
</tr>
</table>
</div>
<div id="Employee_Detail_DIV" spry:detailregion="dsEmployees">
<table id="Employee Detail Table" border="1">
<tr>
<th>Name</th>
<th>Department</th>
<th>Email</th>
<th>Mobile Phone</th>
</tr>
<tr>
<td> </td>
<td></td>
<td><a href="mailto:"></a></td>
<td></td>
</tr>
</table>
</div>
JSON
Spry以同样的方式处理来自JSON的数据，很自然，不同之处是数据文件的格式和用于处理JSON的Spry数据库。下面是一个数据文件样例，信息和上面的一样，现在是一个对象数组，这是JSON的优势所在，它有自己通用的数据描述方式而不需要使用像用于XML样例使用的DTD数据内容定制描述。
[
{
id:"1",
fname: "Frank",
lname: "Bacon",
email: "[email protected]",
mobilePhone: "2201-09-0426",
department: "Board of Education"
},
{
id:"2",
fname: "Bob",
lname: "Boyle",
email: "[email protected]",
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">

</script>
</body>
在上面代码的<form>标记中，你会发现我们使用了一个<span>标记来识别要验证的文本域。对每个验证信息我们在<span>标记中又嵌入了<span>标记。下面的窗体是一个JavaScript代码段在浏览器中插入的逻辑用来触发验证。
Spry.Widget.ValidationTextField方法对每个要验证的文本域需要一个参数，还有另外两个可选参数用于识别数据类型验证和触发验证的专用事件——在本例中当textfield失去焦点时触发。
自动建议程序是Spry 1.5新增加的一个功能，它是一个设计用于搜索接口的textfield表单元素，搜索接口通过显示一系列同用户标准输入可能的匹配作为对用户类型的一种反映。自动建议程序和其它的小应用程序不同，因为它依赖于要显示的建议的一个数据集。Spry中包含的样例文件是结合了文本和图形。
还有大量的其它应用程序并非专用于表单元素：
• Accordion
• 移动面板
• 菜单条
• 滑动面板
• 标签面板
我们可以将菜单条放在一端，因为它直接就是一个多结点导航对象；其它的应用提供了各种各样的方式在屏幕上显示额外数据而不用重新加载页面。还有同样操作方式的其它典型Ajax框架。他们的行为更像桌面应用用户控制而不像HTML提供的标准接口控制。在Adobe试验网站上下载的Spry中包含了这些应用如何工作的示例。
Spry效果
虽然Spry效果已经成为框架的一部分，但在1.5版本中有时还是重写了效果库，显著的改变是为了与其它语言更一致改变了很多方法的名称。
Spry效果的目的是对HTML页中的可视元素添加可视效果。这些效果包括动态过渡和内容的高亮显示。我是合理使用能够动画的坚定支持者，我们要尽量少的使用它。但是有时可以使用它指示应用状态。为了给用户较好的反馈，从一个状态到另一个状态的过渡可以巧妙地使用动态效果。
Spry效果包括：
• 去光效果
• 褪色效果
• 发光效果
• 高亮效果
• 摇动效果
• 滑动效果
• 压扁效果
可以使用Observers合并多个效果，因此，例如一个面板的宽度减小另一个面板的宽度以相同的大小增加，我们就可以对两个面板的转换使用一个滑动效果。
聚类允许效果一个接一个的运行，因此一个面板可以先增加宽度然后再增加高度，而不是像observer那样同时改变。
下面是一个使用了消光效果的HTML页面摘要。这本例中，效果通过单击超链接触发；消光效果将会使得包含文本的div标记逐渐减小高度知道消失为止，从超链接两个方向都会有效。Spry效果库是包含在Spry下载包中标准的一部分。
<title>Spry Effect Example</title>
<script src="includes/SpryEffects.js" type="text/javascript"></script>
<style type="text/css">
.animationContainer{
height: 220px;
}
.demoDiv{
height: 200px;
width: 400px;
overflow: hidden;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<a href="#" onclick="blind_toggle.start(); return false;">Blind Example</a>
<br />
<div class="animationContainer">
<div class="demoDiv" id="slideItUp2">
<h4>Spry Blind Effect Example</h4>
<p class="sampleText">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<script type="text/javascript">

</script>
Spry and Dreamweaver CS3
Spry 1.4的增强版集成了Dreamweaver CS3,利用标记编辑器使开发变得很容易。例如，Spry数据通过使用Dreamweaver CS3中的对话框可以很容易实现，因为你可以像引入XML模式和预览数据一样做其它事情。Dreamweaver CS3还可以在当前站点中包含需要的JavaScript和CSS文件。
Spry工具条中包含了前面介绍的三组对象集，分别用于显示XML数据，表单元素验证和菜单与面板集。

Dreamweaver CS3可以内视Spry XmlDataSet库使用的XML数据，显示绑定面板中某行的私有属性——这些属性可以从绑定面板拖动到页面中，如果它们位于Spry Region 或 Spry Repeat中将会在浏览器中动态递交。
结论
Spry框架是实现Ajax框架的简单形式，尤其适用于专门的用户组中的设计人员。Web标准支持者批评Spry的实现使用了定制HTML属性，不过就笔者看来这并不是问题，因为Spry组件像预想的一样工作良好。
当Spry集成到Dreamweaver CS3 中后，它很容易在一个文本编辑器中部署——在Spry下载包中Adobe提供了大量的样例。当前发行版本有一个API运行用户在Spry框架内创建它们自己使用的小应用程序。

猜你喜欢