示例概述

　　我们通过一个自定义复合组件 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 自定义复合组件。