编写JSF自定义复合组件的技巧和窍门

    本文介绍开发 JavaServer Faces（JSF）自定义复合组件的新思路，提供如何快速开发可重用 JSF 组件的技巧，而不用像传统方式那样自己实现渲染器 （renderer）、状态管理和事件监听器。本文提供的原则和技术也对一般的 JSF 开发很有帮助。

    介绍

    JavaServer Faces（JSF）提供可扩展的组件模型，开发人员可以创建可重用的组件，使用这些自定义组件提高开发效率和降低开发成本。虽然对于定制和重用而言 JSF 的组件模型非常强大，但是开发人员普遍认为开发 JSF 自定义组件并不容易，因为通常至少需要熟悉 JSF encode/decode 和 state holder 的内部机制并覆盖相应的方法，如 encodeBegine（）、decode（）、saveState（） 和 restoreState（） 等，对于开发复杂的自定义组件，甚至需要深入理解更多的接口，如 NamingContainer、StateHolder、EditableValueHolder 和 ActionSource 等接口。

    然而，重用 JSF 标准组件的功能可以极大地简化自定义组件的开发，尤其对于自定义复合组件更是如此。在大部分情况下，我们可以重用 JSF 框架已经提供的标准渲染器、状态管理、事件监听器、转换器和验证器。已有的文章或书籍对如何重用这些标准功能涉及很少，本文基于重用的策略提出快速开发 JSF 自定义复合组件的原则和技巧。

    本文首先总结了 JSF 组件开发的通用原则，然后通过一个例子（Value Scroller 自定义复合组件）的开发详解说明了哪些标准功能可以重用以及如何重用，以达到简化 JSF 自定义复合组件开发的目的。

    原则与技巧

    开发 JSF 自定义复合组件主要有两个原则，一方面强调重用已有的标准组件；另一方面如何确保自定义组件易于重用。

    1、尽可能的重用标准组件的功能和实现

    传统的自定义复合组件开发建议完全覆盖实现 encode/decode 逻辑，但这样做耗费时间而且容易出错。毫无疑问，我们可以通过重用标准组件的渲染器等机制减少甚至根本不用自行编写这部分代码。另外，为了实现灵活的配置和使用，自定义复合组件通常需要提供很多属性，我们需要写很多代码来处理这些属性的读写和状态管理。实际上，我们可以简单地把自定义复合组件的属性传递给它自身包含的标准组件，由已有的标准代码去处理这些属性，而不用重复写这些代码。

    2、清晰地分离组件类、标签类和模型类

    JSF 的组件模型建议在组件类、标签类和模型类之间有明确清晰的责任分配，以便于重用和扩展。组件类不应该依赖于 javax.faces.component.html 包，因为组件类不仅可以用于 HTML，而且还应该可以重用于其它标记语言（如 WML）。也就是说组件类不应该直接引用 javax.faces.component.html 包内的 HTML 组件。例如，在你的组件类中创建一个 HtmlCommandButton 的实例是不可取的，你应该考虑用 javax.faces.component 包中的 UICommand .另一方面，如果你希望你的模型类可以重用于不同的 Web 框架，那么你的模型类就不应该依赖于 JSF 的任何包，即模型类只表示业务对象而不包含任何用户界面相关的组件、数据和状态。

    基于这些原则，对比传统方式和本文介绍的技巧，我们可以发现基于重用的开发策略会极大简化 JSF 自定义复合组件的编写。开发 JSF 自定义组件通常需要如下 3 个步骤。

    1、扩展 UIComponent

    传统方式：创建一个类，扩展 UIComponent，保存组件状态，在 faces-config.xml 中注册组件

    重用技巧：

    ■ 选择 UIPanel 作为布局容器，重用标准组件作为复合组件的子组件。

    ■ 实现内部动作监听器。

    2、定义渲染器或者内联实现它

    传统方式：覆盖实现 encode/decode，在 faces-config.xml 中注册渲染器。

    重用技巧：重用标准渲染器类型。

    3、创建自定义标签，继承 UIComponentTag

    传统方式：返回渲染器类型和组件类型，设置 JSF 表达式属性

    重用技巧：传递属性值给作为子组件的标准组件。

    示例概述

    我们通过一个自定义复合组件 Value Scroller 的开发步骤说明如何运用多种技巧重用标准组件的功能和实现，达到简化开发易于重用的目的。 Value Scroller 可以让你通过点击增值或减值按钮来输入数值，而不用手工键入，如 图 1 所示。这个示例只包含最基本的功能，如只支持整型数值输入，但对于本文要介绍的内容已经足够了。

    图 1. 测试页面中的 Value Scroller

    图 2 说明了 Value Scroller 的基本类结构，遵循 MVC 模式。组件类 ValueScroller 扩展了 UIPanel，作为控制器（Controller）负责与用户的交互。标签类 ValueScrollerTag 继承了 UIComponentTag， 作为视图（View）处理页面显示。与 Value Scroller 绑定的值对象作为模型（Model）存储用户键入的数值。

    图 2. Value Scroller 的类结构

    在后面章节中，本文将结合 Value Scroller 示例说明如何应用前面提到的原则和技巧快速开发 JSF 自定义复合组件。