确实相当强大。转自:http://www.ibm.com/developerworks/cn/java/j-jsf2fu3/ 使用更多新 JSF 2 特性增强复合组件 |
级别: 中级 David Geary , 总裁, Clarity Training, Inc. 2009 年 8 月 03 日 Java™Server Faces (JSF) 2 专家组成员 David Geary 将在这一期文章中结束这部有关 JSF 2 新特性的 系列文章(共 3 部分) 。本文介绍如何使用该框架的新事件模型和内置 Ajax 支持来增强可重用组件的功能。 JSF 的最大卖点在于它是一种基于组件的框架。这意味着您可以实现供其他人重用的组件。这种强大的重用机制在 JSF 1 中基本上是不可能实现的,因为在 JSF 1 中实现组件是非常困难的事情。 然而,正如 第 2 部分 所述,JSF 2 通过一种名为复合组件 的新特性简化了组件的实现 — 无需 Java 代码和配置。这一特性可以说是 JSF 2 中最重要的部分,因为它真正实现了 JSF 组件的潜力。 在这份有关 JSF 2 的第三篇也是最后一篇文章中,我将展示如何利用新的 Ajax 和事件处理功能(也在 JSF 2 中引入)构建复合组件特性,要从 JSF 2 中获得最大收益,需要遵循下面的技巧:
对于第一个技巧,我将简要回顾已在 第 2 部分 中详细描述过的两个组件。对于后面的技巧,我将展示如何使用 Ajax 和事件处理功能来改造这些组件。 技巧 1:组件化 我在 第 1 部分
中引入的 places 应用程序包含有大量复合组件。其中之一便是 图 1. places 应用程序的 map
组件
清单 1 显示了经过删减的 清单 1. map
组件
组件的一大优点就是可以使用更有效的替代方法替换它们,同时不会影响到相关的功能。比如,在图 2 中,我使用一个 Google Maps 组件替换了 清单 1
中的 图 2. GMaps4JSF 的 map 图像
清单 2. 使用一个 GMaps4JSF 组件替换 map 图形
要使用 GMaps4JSF 组件,我从 GMaps4JSF 组件集合中使用 关于缩放级别需要注意一点,那就是当一名用户修改缩放级别时,我将通过 由于我没有为与缩放级别修改相关的表单提交指定任何导航,JSF 在处理请求后刷新了同一页面,重新绘制地图以反映新的缩放级别。然而,页面刷新还重新绘制了整个页面,即使只修改了地图图像。在 技巧 2:Ajax 化 中,我将展示如何使用 Ajax,只对图像部分重新绘制,以响应缩放级别的修改。
places 应用程序中使用的另一个组件是 图 3. login
组件
清单 3
展示了创建 图 3
所示的 清单 3. 最基础的 login
:只包含必需的属性
清单 3 中指定的托管 bean 如清单 4 所示: 清单 4. User.groovy
清单 4
中的托管 bean 是一个 Groovy bean。在这里使用 Groovy 替代 Java 语言并不会带来多少好处,只是减少了处理分号和返回语句的麻烦。然而,在技巧 2 的 Validation
部分中,我将展示一个对 大多数情况下,您将需要使用提示和按钮文本来配置登录组件,如图 4 所示: 图 4. 充分配置的 login
组件
清单 5 展示了生成 图 4
所示的 清单 5. 配置 login
组件
在 清单 5 中,我从一个资源包中获取了用于提示的字符串和登录按钮的文本。 清单 6 定义了 清单 6. 定义 login
组件
和
技巧 2:Ajax 化 与非 Ajax HTTP 请求相比,Ajax 请求通常需要额外执行两个步骤:在服务器中对表单进行局部处理,接着在客户机上对 Document Object Model (DOM) 进行局部呈现。 局部处理和呈现 通过将 JSF 生命周期分解为两个不同的逻辑部分 —— 执行和呈现,JSF 2 现在支持局部处理和局部呈现。图 5 突出显示了执行部分: 图 5. JSF 生命周期的执行部分 图 6 突出显示了 JSF 生命周期的呈现部分: 图 6. JSF 生命周期的呈现部分 将生命周期划分为执行和呈现部分的原理很简单:您可以指定 JSF 在服务器上执行(处理)的组件,以及在返回 Ajax 调用时 JSF 呈现的组件。将使用 JSF 2 中新增的 清单 7. 一个 Ajax 缩放菜单
清单 7
对 清单 2
中的第一行所示的菜单进行了修改:我从 清单 2
中删除了
当用户从缩放菜单中选择一个菜单项时,JSF 将对服务器发出 Ajax 调用。随后,JSF 将菜单传递给生命周期的执行部分( 但是还可以进一步简化,因为 JSF 为 每个 JSF 组件都有一个默认事件,当在组件标记内部嵌入 通过对 清单 8. 简化后的 Ajax 缩放菜单
这演示了使用 JSF 2 向组件添加 Ajax 有多么容易。当然,前面的例子非常简单:我仅仅是在用户选择某个缩放级别时重新绘制了地图而不是整个页面。验证表单中的各个字段等操作要更加复杂一些,因此接下来我将讨论这些用例。 验证 当用户移出某个字段后对字段进行验证并提供即时的反馈,这始终是一个好的做法。例如,在图 7 中,我使用了 Ajax 对名称字段进行了验证: 图 7. Ajax 验证 该名称字段的标记如清单 9 所示: 清单 9. 名称字段
我再一次使用了 清单 10. validateName()
方法
这个修改值的监听程序( 返回 Ajax 调用后,借助 清单 9
中的 多字段验证 在前面的小节中,我展示了如何对单一字段执行 Ajax 验证。但是,有些情况下,需要同时对多个字段进行验证。比如,图 8 展示了 places 应用程序同时验证名称和密码字段: 图 8. 验证多个字段 我在用户提交表单时同时验证了名称和密码字段,因此对这个例子不需要用到 Ajax。相反,我将使用 JSF 2 的新事件系统,如清单 11 所示: 清单 11. 使用 <f:event>
在 清单 11
中,我使用了 将一个 清单 12. validate()
方法
JSF 将一个组件系统事件传递给 清单 12
中的 您可能已经注意到,清单 10
和 清单 12
中的验证方法是使用 Groovy 编写的。与 清单 4
不同,后者使用 Groovy 的惟一好处就是避免了分号和返回语句,清单 10
和 清单 12
中的 Groovy 代码使我不必进行类型转换。例如,在 清单 10
中,
技巧 3:展示进度 在 Ajax 化
中,我展示了如何为 图 9. 进度条 在 图 9 中,我将使用一个动画 GIF 替换缩放菜单,这个动画 GIF 将在 Ajax 调用期间显示。当 Ajax 调用完成后,我将使用缩放菜单替换进度指示器。清单 13 展示了这一过程: 清单 13. 监视 Ajax 调用
在 清单 13
中,我添加了一个进度条图像(该图像最初不会显示出来),并为 清单 14. 响应 Ajax 请求的 JavaScript
JSF 向 清单 14
中的函数传递一个对象,该对象中包含有一些信息,比如触发了事件的组件的客户机标识符(在本例中为缩放级别菜单),以及 Ajax 请求的当前状态,使用
清单 14
中的
结束语 在过去几年中,人们认为 JSF 1 是一个难以使用的框架。在许多方面上,这种评价是有一定道理的。JSF 1 在开发期间完全没有考虑到实际使用中遇到的问题。因此,JSF 在实现应用程序和组件方面比预先设想更加困难。 另一方面,JSF 2 经历了那些在 JSF 1 基础之上实现过开源项目的开发人员的实际体验。总结经验之后,JSF 2 是一个更加合理的框架,可以轻松地实现健壮的、Ajax 化的应用程序。 贯 穿本系列文章,我展示了一些最突出的 JSF 2 特性,比如注释和替换配置约定、简化后的导航、资源支持、复合组件、内置 Ajax 以及内嵌的事件模型。但是仍然有许多 JSF 2 特性未在本系列提及,比如 View 和 Page 范围、为页面添加书签的支持和 Project Stage。所有这些特性以及其他更多特性让 JSF 2 在 JSF 1 的基础上实现了巨大的改进。
下载
参考资料 学习
获得产品和技术 讨论
关于作者
|