Tellixu 整理 2005-12-16 JSF 教程
1
前言
如果您是从使用的角度来看 JSF，则您不用理会 HTTP、数据转换等细节，JSF 将细节
都隐藏起来了，无论您是网页设计人员或是应用程序设计人员，都可以使用自己熟悉的方式
来看 JSF。
• 入门
藉由以下的几个主题，可以大致了解 JSF 的轮廓与特性，我们来看看网页设计人员
与应用程序设计人员各负责什么。
o 简介 JSF
o 第一个 JSF 程序
o 简单的导航 Navigation
o 导航规则设置
o JSF Expression Language
o 国际化讯息
• Managed Beans
JSF 使用 Bean 来达到逻辑层与表现层分离的目的，Bean 的管理集中在组态档
案中，您只要修改组态档案，就可以修改 Bean 之间的相依关系。
o Backing Beans
o Beans 的组态与设定
o Beans 上的 List, Map
• 数据转换与验证
转换器（Converter）协助模型与视图之间的数据转换，验证器（Validator）协助
进行语意检验（Semantic Validation）。
o 标准转换器
o 自订转换器
o 标准验证器
o 自订验证器
o 错误讯息处理
o 自订转换, 验证标签
• 事件处理
JSF 的事件模型提供一个近似的桌面 GUI 事件模式，让熟悉 GUI 设计的人员也能
快速上手 Web 程序设计。
o 动作事件
o 实时事件
o 值变事件
o Phase 事件
JSF 标签
Tellixu 整理 2005-12-16 JSF 教程
2
网页设计人员要作的就是了解 JSF 的标签的使用方式，这就像是学习进阶的 HTML 标
签，另一件事就是与程序设计人员沟通好各个 Bean 的名称绑定。
• 标签入门
卷标的相关属性查询，您可以参考 Tag Library Documentation，这边的介绍只
是一些简单的入门实例。
o 简介 JSF 标准标签
o 输出类标签
o 输入类标签
o 命令类标签
o 选择类标签 一
o 选择类标签 二
o 其它标签
• 表格处理
对于必须使用表格方式呈现的数据，JSF 的 <h:dataTable> 卷标协助您进行动
态表格数据的输出。
o 简单的表格
o 表头, 表尾
o TableModel 类别
自订组件
JSF 让您可以自订组件，每个组件都是可替换的，这使得组件在搭配时更有弹性，但
相对的却使开发组件的过程复杂的多，这边对自订 JSF 组件只是个入门砖，更多有关自订
组件的细节可得要专书来说明。
• JSF 生命周期与组件概述
要开发 JSF 组件，您需要更深入了解 JSF 的一些处理细节，包括了 JSF 生命周
期以及 JSF 框架。
o JSF 生命周期
o 概述自订组件
• 简单实例
在不考虑组件有子组件的情况下，这边以实际的一个例子来说明开发组件的过程，
至于考虑子组件的情况请参考专书介绍。
o 编码, 解碼
o 组件卷标
o 使用自订组件
o 自订 Renderer
Tellixu 整理 2005-12-16 JSF 教程
3
入门
简介 JSF
Web 应用程序的开发与传统的单机程序开发在本质上存在着太多的差异，Web 应用程
序开发人员至今不可避免的必须处理 HTTP 的细节，而 HTTP 无状态的（stateless）本质，
与传统应用程序必须维持程序运行过程中的信息有明显的违背，再则 Web 应用程序面对网
站上不同的使用者同时的存取，其执行绪安全问题以及资料验证、转换处理等问题，又是复
杂且难以解决的。
另一方面，本质上是静态的 HTML 与本质上是动态的应用程序又是一项违背，这造成
不可避免的，处理网页设计的美术人员与程序设计人员，必须被彼此加入至视图组件中的逻
辑互相干扰，即便一些视图呈现逻辑以卷标的方式呈现，试图展现对网页设计美术人员的亲
切，但它终究必须牵涉到相关的流程逻辑。
有很多方案试着解决种种的困境，而各自的着眼点各不相同，有的从程序设计人员的角
度来解决，有的从网页设计人员的角度来解决，各种的框架被提出，所造成的是各种不统一
的标签与框架，为了促进产能的整合开发环境（IDE）难以整合这些标签与框架，另一方面，
开发人员的学习负担也不断的加重，他们必须一人了解多个角色的工作。
JavaServer Faces
的提出在试图解决这个问题，它试图在不同的角度上提供网页设
计人员、应用程序设计人员、组件开发人员解决方案，让不同技术的人员可以彼此合作又不
互相干扰，它综合了各家厂商现有的技术特点，由 Java Community Process（JCP）团
队研拟出来的一套标准，并在 2004 年三月发表了 JavaServer Faces 1.0 实作成果。
从网页设计人员的角度来看，JavaServer Faces 提供了一套像是新版本的 HTML 标
签，但它不是静态的，而是动态的，可以与后端的动态程序结合，但网页设计人员不需要理
会后端的动态部份，网页设计人员甚至不太需要接触 JSTL 这类的卷标，也可以动态的展现
数据（像是动态的查询表格内容），JavaServer Faces 提供标准的标签，这可以与网页编
辑程序结合在一起，另一方面，JavaServer Faces 也允许您自订标签。
从应用程序设计人员的角度来看，JavaServer Faces 提供一个与传统应用程序开发相
类似的模型（当然因某些本质上的差异，模型还是稍有不同），他们可以基于事件驱动来开
发程序，不必关切 HTTP 的处理细节，如果必须处理一些视觉组件的属性的话，他们也可
以直接在整合开发环境上拖拉这些组件，点选设定组件的属性，JavaServer Faces 甚至还
为应用程序设计人员处理了对象与字符串（HTTP 传送本质上就是字符串）间不匹配的转换
问题。
从UI 组件开发人员的角度来看，他们可以设计通用的 UI 组件，让应用程序的开发产
能提高，就如同在设计 Swing 组件等，UI 开发人员可以独立开发，只要定义好相关的属性
选项来调整细节，而不用受到网页设计人员或应用程序设计人员的干扰。
三个角色的知识领域原则上可以互不干扰，根据您的角色，您只要了解其中一个知识领
域，就可以运用 JavaServer Faces，其它角色的知识领域您可以不用了解太多细节。
Tellixu 整理 2005-12-16 JSF 教程
4
当然，就其中一个角色单独来看，JavaServer Faces 隐藏了许多细节，若要全盘了解，
其实 JavaServer Faces 是复杂的，每一个处理的环境都值得深入探讨，所以学习
JavaServer Faces 时，您要选择的是通盘了解，还是从使用的角度来了解，这就决定了您
学习时所要花费的心力。
要使用 JSF，首先您要先取得 JavaServer Faces 参考实作（JavaServer Faces
Reference Implementation），在将来，JSF 会与 Container 整合在一起，届时您只要
下载支持的 Container，就可以使用 JSF 的功能。
请至 JSF 官方网站的
下载区 下载参考实作，在下载压缩档并解压缩之后，将其 lib
目录下的 jar 档案复制至您的Web应用程序的/WEB-INF/lib目录下，另外您还需要
jstl.jar 与 standard.jar 档案，这些档案您可以在 sample 目录下，解压缩当中的一个
范例，在它的/WEB-INF/lib目录下找到，将之一并复制至您的Web应用程序的
/WEB-INF/lib目录下，您总共需要以下的档案：
* jsf-impl.jar
* jsf-api.jar
* commons-digester.jar
* commons-collections.jar
* commons-beanutils.jar
* jstl.jar
* standard.jar
接下来配置 Web应用程序的 web.xml，使用 JSF时，所有的请求都透过 FacesServlet
来处理，您可以如下定义：
• web.xml
web.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<description>
JSF Demo
Tellixu 整理 2005-12-16 JSF 教程
5
</description>
<display-name>JSF Demo</display-name>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>
javax.faces.webapp.FacesServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
在上面的定义中，我们将所有.faces 的请求交由 FaceServlet 来处理，FaceServlet
会唤起相对的.jsp 网页，例如请求是/index.faces 的话，则实际上会唤起/index.jsp 网页，
完成以上的配置，您就可以开始使用 JSF 了。
第一个 JSF 程序
现在可以开发一个简单的程序了，我们将设计一个简单的登入程序，使用者送出名称，
之后由程序显示使用者名称及欢迎讯息。
程序开发人员
先看看应用程序开发人员要作些什么事，我们撰写一个简单的 JavaBean：
UserBean.java
package onlyfun.caterpillar;
public class UserBean {
private String name;
public void setName(String name) {
this.name = name;
}
