一、上一篇文章内容回顾

?

在 上一篇文章中，我们介绍了用户自定义UI组件的不足和好处，说明了为什么要慎用自定义UI组件。通常情况下我们应该采用现成的或者由第三方专业厂商提供 UI组件包，只有在某些特殊情况下才尝试编写自定义UI组件。当然，如果对于你的应用来说，编写自定义UI组件是唯一可行的解决方案，那么JSF是允许你 这么做的。现行的JSF版本（指1.2版）在编写自定义UI组件方面稍嫌复杂，但JSF 2.0版将在这方面作出重大改进。

?

二、最简单的自定义UI组件

?

这篇文章中，我们将演示如何编写一个最简单的自定义UI组件。为了使读者对自定义UI组件的开发过程有一个清晰的了解，在进入具体编程步骤之前，我们先来了解一下即将编写的这个自定义UI组件。

?

由于这个教程系列将会有很多自定义UI组件的例子，因此，为方便在文中引用它们，不妨给每个自定义UI组件一个名称，比如这个最简单的，我们称其为一号组件。

?

三、一号组件的功能

?

一 号组件的功能非常简单，它允许用户为其设定一个字符串和一个数值，当页面呈现时，这个组件将在页面上重复显示指定的字符串，重复的次数由指定的数值决定。 例如，假设设定字符串为“Hello world!”，数值为3，则字符串被重复显示3次，即为“Hello world!Hello world!Hello world!”

?

在页面上显示字符串，早有现成的UI组件可以完成这个功能，而重复显示也不是什么难事，因此，一号组件没有什么存在的理由。不过，我们只是为了演示自定义UI组件的编程方法，暂且不必深究组件的实际用途。

?

四、引用一号组件

?

JSF默认的显示技术是JSP，虽然可以使用其他显示技术，但为了简化起见，我们就采用JSP。

?

我 们知道，JSP文件主要是由标签组成的。标签分两类，一类称为标准标签，一类称为自定义标签，如图 1所示。标准标签如<c:out>，是由JSP规范定义的，除此以外的其他标签统称为自定义标签。JSP的自定义标签是一种很灵活的机制，允 许用户通过引入自定义标签扩展JSP的功能。实际上，JSF也是通过这种方式来实现UI功能的。

?

图1 jsp标签的分类

?

要引用一号组件，只需在JSP文件中写入类似这样的标签即可：

<x:repeatText text="Hello world!" number="3">

这个标签实现的正是在页面上重复显示“Hello world!”3次。

?

图 2显示了在NetBeans中编写的一个引用一号组件的JSP文件例子，如图中高亮部分所示。JSP文件名为Page1.jsp，这是NetBeans自动创建的JSF Web应用的首页。

?

?
图 2 在jsp文件page1.jsp中引用自定义的一号组件

?

从图中可见，引用自定义UI组件和引用JSF的其他组件没有什么区别，只需给出正确的前缀和标签名称即可。例如，图 2中的x为前缀，repeatText为标签名称。关于前缀和标签名称的来龙去脉，我们将在后文说明。

?

五、一号组件的输出

?

当我们运行JSF应用，呈现包含了一号组件的JSP文件Page1.jsp时，浏览器上将显示一号组件的输出，如图 3所示。正如我们预期的那样，输出的结果是被重复了3次的“Hello world!”。

?

?

图 3 一号组件的输出内容

?

六、编写自定义UI组件的步骤