JSF 2 简介，第 3 部分: 事件处理、JavaScript 和 Ajax(4)_H5之家

JSF 将一个组件系统事件传递给中的 validate() 方法，方法从这个事件中获得对（适用于事件的）组件的引用 — 登录表单。对于这个表单，我使用 findComponent() 方法获得名称和密码组件。如果这些组件的值不为 Hiro 和 jsf，那么我将把一条消息存储到 faces 上下文并要求 JSF 继续处理生命周期的 Render Response 阶段。通过这种方法，就可以避免 Update Model Values 阶段，后者会将坏的名称和密码传递给模型（见）。

您可能已经注意到，和中的验证方法是使用 Groovy 编写的。与不同，后者使用 Groovy 的惟一好处就是避免了分号和返回语句，和中的 Groovy 代码使我不必进行类型转换。例如，在中，ComponentSystemEvent.getComponent() 和 UIComponent.findComponent() 都返回类型 UIComponent。对于 Java 语言，我需要转换这些方法的返回值。Groovy 为我做了这一转换工作。

技巧 3：展示进度

在中，我展示了如何为 map 组件 Ajax 化缩放菜单，因此，当用户修改缩放级别时，places 应用程序将只重新绘制页面的地图部分。另一个常见 Ajax 用例是向用户提供反馈，表示一个 Ajax 事件正在处理中，如图 9 所示：

图 9. 进度条

进度条

在中，我将使用一个动画 GIF 替换缩放菜单，这个动画 GIF 将在 Ajax 调用期间显示。当 Ajax 调用完成后，我将使用缩放菜单替换进度指示器。清单 13 展示了这一过程：

清单 13. 监视 Ajax 调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <h:selectOneMenu value="#{cc.parent.attrs.location.zoomIndex}"> <f:ajax render="map" onevent="zoomChanging"/> <f:selectItems value="#{places.zoomLevelItems}"/> ... </h:selectOneMenu> ... <h:graphicImage library="images"/>

在中，我添加了一个进度条图像（该图像最初不会显示出来），并为 <f:ajax> 指定了 onevent 属性。该属性引用一个 JavaScript 函数，如所示，这个函数将在中的 Ajax 调用被初始化时由 JSF 调用：

清单 14. 响应 Ajax 请求的 JavaScript

JSF 向中的函数传递一个对象，该对象中包含有一些信息，比如触发了事件的组件的客户机标识符（在本例中为缩放级别菜单），以及 Ajax 请求的当前状态，使用 name 属性表示。

中的 zoomChanging() 函数计算进度条图像的客户机标识符，然后使用 Prototype Element 对象在 Ajax 调用期间隐藏和显示对应的 HTML 元素。

结束语

在过去几年中，人们认为 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 的基础上实现了巨大的改进。

下载

描述名字大小

本文示例的源代码j-jsf2-fu-3.zip7.7MB