级别： 中级 郭 庆 (qingguo@cn.ibm.com), 软件工程师, IBM
戴 丽 (daili@cn.ibm.com), 高级软件工程师, IBM
2007 年 10 月 11 日 在 2007 年 3 月发布的 WebShere Portlet Factory 6.0.1 中，增添了大量与 AJAX 技术相关的构建器。本文将结合一些例子，对这些构建器进行系统地介绍，帮助用户尽快掌握这些构建器的使用。
Ajax（Asyncronous javascript and XML)，作为 Web 2.0 的重要组成部分，意味着更强的用户交互和更漂亮的界面。在今年 3 月发布的 WebSphere Portlet Factory 6.0.1 中，增加了对 Ajax 技术的支持，有大量与 Ajax 相关的构建器添加到产品中。他们主要分为三类：一类是在原有构建器的基础上增加了 Ajax 页面更新选项，比如按钮构建器；另一类是在更高层次上对页面更新进行控制的构建器 - Ajax 区域构建器；还有一类是利用现有 Ajax 功能的构建器，比如 Ajax 预输入构建器等。在下面的文章里我们将对这三大类构建器结合例子进行详细地介绍。所用到的例子在附件的 Zip 文件里，用户需要把这个包导入到已有的 Portlet Factory 项目中。
页面动作构建器: 按钮，链接，Html事件操作
 | |
请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
|
|
这三个构建器的输入界面都新增加了一个部分 操作后行为 :
图 1. 操作后行为用户输入界面
用户可以通过这部分来实现页面动作后的指定范围内的页面更新，而不是整个页面的更新。
在附件的例子中提供了一个模型 - ButtonWIthPartialRefresh.model。 这个模型的HTML页面结构如代码1所示。
代码 1. ButtonWIthPartialRefresh的页面HTML
<html>
<head><title>Button With Partial Refresh</title></head>
<body>
<div align="center">
<div style="font:12pt Arial;font-weight: bold;color: #336699;">
Page Init Time: <%= new java.util.Date() %>
</div>
<br>
<span name="refresh"><%= new java.util.Date()%></span>
<span name="button"></span>
</div>
</body>
</html>
|
我们在button处添加一个按钮构建器，然后在按钮构建器的操作后行为中指定了更新的区域为该页面上的refresh位置。
运行这个模型，我们能看到一个简单的界面，显示了页面第一次加载时的时间，和更新的时间（点击Refresh按钮的时间）。
当点击Refresh按钮时，只有更新时间发生了变化。如图2所示。
图 2. ButtonWIthPartialRefresh模型运行时界面
Ajax区域构建器
Ajax区域构建器简介
Ajax区域构建器能够重写已有页面中某个指定区域的所有操作，包括链接、按钮的操作等，使这些操作成为Ajax操作，从而以异步方式来重新装入指定的刷新区域。
使用Ajax区域构建器，用户可以方便的给已有的界面添加Ajax效果。
Ajax区域构建器可以将模型的所有页面、某个页面、或某个页面上某个位置指定为Ajax区域，那么在这个区域里的所有操作将以异步方式来局部刷新指定位置。如图3所示。
图 3. Ajax区域构建器
当用户选择页面上某个位置的时候，新的输入会出现供用户进行选择。如图4所示。
图 4. 选择“页面某个位置”时Ajax区域构建器的输入
图4中Ajax区域构建器的几个输入的含义为：
- 刷新位置：指定此构建器调用将处理的页面区域。
- 使用触发器区域：选中此输入可以指定独立于刷新位置的区域，在此区域中通过重写所有操作来以异步方式重新装入刷新位置。如果未选中此输入，则将重写刷新区域中的所有操作。
- 触发器位置：指定一个区域，在此区域中通过重写所有操作来重新装入刷新区域。此输入仅在选中使用触发器区域的情况下显示。
- 刷新触发器区域：选中此输入可以将触发器区域添加到刷新位置。这会导致每次选中触发器区域中的一个操作，就刷新一次该区域中的输出。如果除构建操作之外，触发器区域还包含显示状态信息的构建器，例如页面调度按钮构建器，这一点将十分有用。
页面动作构建器 vs. Ajax区域构建器
虽然页面动作构建器和Ajax区域构建器都提供了局部刷新的功能，但是使用他们的时候需要根据情况进行选择。表1在效率，灵活性等方面对两者在局部刷新方面进行了比较。
表 1. 页面动作构建器和Ajax区域构建器的在局部刷新方面的比较
| # | Ajax区域构建器 | 页面动作构建器 |
|---|
| 效率 | 中、低 | 高 | | 灵活性 | 低 | 高 | | 刷新区域的尺寸 | 较大 | 擅长较小的区域，在一个页面上可以处理多个区域 | | 刷新（触发）区域内的操作 | 自动转化为局部刷新的操作 | 需要额外操作或实现 | | 刷新（触发）区域内的脚本 | 会被执行 | 不会被执行 | | 刷新（触发）的区域能否包含另一个的构建器 | 可以包含页面动作构建器 | 不能包含区域Ajax区域构建器 | | 使用的Ajax技术 | IFrame | XmlHttpRequest | | 能否后退到上一个页面 | 如果两个页面的URL不同则可以，否则不行 | 不能 |
其他应用Ajax技术的构建器
除了上面介绍的两种构建器之外，WebShere Portlet Factory 6.0.1还提供了一些其他应用Ajax技术的构建器，这些构建器有些可以用来实现局部更新，例如定时操作构建器，有些用来实现异步通信，例如动态验证构建器等。
下面我们将介绍一些常用的Ajax相关构建器。
定时操作构建器
定时操作构建器可以定时或周期性的执行某个特定的操作。而且，类似于页面动作构建器，它提供了操作后行为的用户输入。
结合这种嵌入的局部刷新功能，用户可以定时或周期性的刷新页面的特定区域。
这个构建器可以应用到多种用例中，例如动态刷新页面数据，定时提交表单保存用户编辑数据等。
在附件的例子中有另外一个模型 － TimedActionSample.model，这个模型演示的是周期性局部刷新页面数据。
它的HTML页面结构如代码2所示。
代码 2. TimedActionSample的页面HTML
<html>
<head><title>Button With Partial Refresh</title></head>
<body>
<div align="center">
<div style="font:12pt Arial;font-weight: bold;color: #336699;">
Page Init Time: <%= new java.util.Date() %>
</div>
<br>
<span name="refresh">Current Time is: <%= new java.util.Date()%></span>
|-------10--------20--------30--------40--------50--------60--------70--------80--------9|
|-------- XML error: The previous line is longer than the max of 90 characters ---------|
</div>
</body>
</html>
|
运行这个模型我们可以发现，页面初始时间不变，而更新时间每秒中都在变化。这是因为我们在定时操作构建器中指定操作周期为1秒，而且指定了局部刷新。
图 5. 定时操作构建器输入示例
动态验证构建器
动态验证构建器可以使客户端不断的跟服务器端进行验证。当用户在填写表单时，它可以调用服务器端的代码来验证用户输入的数据，如果有错误，则会立即显示出错误消息。
这个构建器可以使用任何HTML事件作为触发器来调用验证代码。一般来说，我们比较推荐用户使用其输入界面下拉列表的事件。如图6所示。在附件中，
我们提供了一个使用动态验证构建器的示例 － DynamicValidationSample.model，运行这个模型我们可以看到，当用户输入时，动态验证构建器会动态提交数据进行验证，
当验证失败时，错误信息会及时的显示在输入框的右侧。
图 6. 动态验证构建器输入示例
Ajax预输入构建器
这个构建器可以用来自动生成建议选择列表。当用户在某个输入框输入字符时，它会判断并根据用户当前输入弹出选择列表，列出用户可能需要的选项或与用户输入相关的正确的选项。
一方面它可以用来减少用户输入；另一方面提醒用户当前的输入可能并不正确，因为系统没有找到相应的数据。
我们可以把这个构建器应用于很多用例中，比较常见的是把不同用户对同一输入框的输入（或同一用户对同一输入框的多次输入）保存下来，
当下一次用户输入时，把以往的输入作为弹出列表的集合，根据用户当前的输入来过滤出可能满足用户的选项。
在附件中，我们提供了一个使用Ajax预输入构建器的示例 － SendMailToAuthors.model，当用户输入本文作者的邮箱地址时，会有弹出列表提示作者的正确邮箱地址。点击OK按钮，
将会使用默认邮件程序创建一个给指定邮箱地址的新邮件。如图7所示。
图 7. 使用Ajax预输入构建器来得到用户可能需要键入的邮箱地址
结束语
WebSphere Portlet Factory在其6.0.1版本中提供了很多应用了Ajax功能的构建器。这些构建器提供了当前常见的Ajax页面技术，包括局部刷新，定时操作，动态验证，预输入判断等等诸多功能。
开发人员可以根据用户需要选择适当的构建器来快速实现应用Ajax技术的页面，从而改善和提高最终用户的体验。同时，这些构建器的应用是增量式的，多数情况下用户不需要更改已有的模型，这也为向已有的模型添加Ajax技术提供了便利。
下载 | 描述 | 名字 | 大小 | 下载方法 |
|---|
| 本文用到的示例代码 | ajax_in_pf.zip | 11KB | HTTP |
|---|
参考资料 学习
讨论
作者简介 | 
| | 郭庆现在在IBM CSDL的ActiveInsight组做开发工作，负责在WebSphere Portlet Factory的基础上进行WebSphere Dashboard Framework的开发。他对WebSphere Portlet Factory的Ajax相关功能非常感兴趣并有深入了解。 |
| 
| | 戴丽在CDL从事软件产品开发，对Websphere Portlet Facotry 和 Websphere Dashboard Framework有丰富的使用经验。对Web 2.0 技术有浓厚兴趣。 |
对本文的评价
| 
