第3章 JSF应用程序开发入门
3.1 JSF开发环境的配置
在前面的章节我们已经配置好了应用程序开发要用到的 JDK 和 Web 服务器（Servlet 容器）——
Tomcat。为了开发基于 JSF 的应用程序，在此基础上我们还要下载 JSF 的参考实现。并且为了对应用
程序从编写到部署的过程有一个直观地感受，以免一上来就直接用集成开发环境（ IDE）而对幕后的
过程缺乏必要的了解，我们这里先采用手工方式编写代码、编译及部署应用程序，然后，在 ANT 工
具的帮助下快速地完成这些步骤，因此，还要下载和安装 ANT 工具。
3.1.1 JSF参考实现的下载与安装
前面我们已经介绍过，JSF 是一个标准，因此，它可以有多种实现（Implementation）。现在比较
常用的有两个。本书中在介绍基础部分的内容时，选用的是 Sun 的参考实现，在最后介绍办公用品管
理 系 统 综 合 示 例 时 使 用 的 是 apache 的 实 现
MyFaces。下载地址是：
http://myfaces.apache.org/
另一个是 Sun 的参考实现，因为 JSF 1.2 版已
经是 Java EE 的一个组成部分，因此有多种方法可
以得到该实现。比如，下载 JDK 时就可以下载包
含 Java EE 的 JDK；如果您的机器上已经安装了
JDK 也可以单独下载 Java EE。不过最直截了当的
方法是单独下载 JSF 参考实现。下载地址是：
http://java.sun.com/javaee/javaserverfaces/
download.html
Sun 的参考实现的下载页面如图 3.1 所示。
在图中点击被椭圆包含的任意一个链接都可
图 3.1
JSF 第一步——JSF+Spring+Hibernate+AJAX 编程实践
以到达真正的下载页面，本书的大部分都采用的是 JSF 1.2 版本的参考实现；如果您需要以前版本的
参考实现，可以在图 3.1 所示的页面的下面部分（图中没有显示出来）找到它们的下载链接。
将下载下来的压缩文件解压，将解压后的目录中的 lib 子目录中的 jsf-api.jar 和 jsf-impl.jar 这两个
文件拷贝到 c:\tomcat6\lib 目录下。另外，还需要到 https://maven-repository.dev.java.net/repository/jstl/
jars/去下载一个 jstl-1.2.jar 放在 c:\tomcat6\lib 目录下。
3.1.2 ANT的下载与安装
Ant 是一个开发 Java 应用程序的工具，利用它可以轻松地完成应用程序的编译、打包、部署等一
系列的任务。它的下载地址是 http://ant.apache.org/bindownload.cgi
在开始 写本书时它的 1.7 版本 的 beta 刚发
布，为了稳妥，本书采用的是它的稳定版本即 ：
1.6.5。下载页面的截图如图 3.2 所示。
将 下 载 的 压 缩 包 解 压 ， 将 解 压 出 来 的
apache-ant-1.6.5 文件夹拷贝到 一个合适的地 方 ，
本书上的做法是放在 c:\tools\下，为了简单起见，
将文件夹名改为 ant165。
要说明一下的是，所有上面安装过程，无
论上 JDK、Tomcat 还是 JSF，它们的下载网页
都是在不断更新的，上面列出的只是笔者当时
下载时的情景。安装的目录命名等不是强制性
的要这样做，您完全可以根据您的习惯和实际
情况来命名和选择放置的地方，只要在后面的
环境变量设置时根据您的文件目录和文件名称
的实际情况来设置就可以了。唯一要注意的是 ，
目录名中最好不要含有空格。
3.1.3 环境变量的设置
环境变量的设置涉及到为 JSF 和 ANT 设置环境变量，但我们在实践中发现，设置 JSF 环境变量后，
编译应用程序的有关类如 Backing Bean 仍然会出现问题，因此，也可以不对其设置环境变量。
设置 ANT_HOME 环境变量：与 2.3.3 介绍的内容类似，在环境变量设置对话框中，点击系统部分
的新建按钮，又弹出一个新建环境变量对话框，在变量名中输入 ANT_HOME，在变量值中输入 c:\
tools\ant165，点击确定按钮。该变量的作用是指明 ant 的安装目录。
设 置 CLASSPATH 环 境 变 量 ： 仍 然 与 前 面 设 置 JDK 和 Tomcat 的 环 境 变 量 的 方 法 类 似 ， 将
%ANT_HOME%\lib\
*
.jar 加在原来的环境变量后，并且与前面的内容用英文分号隔开。
60
图 3.2
第 3 章 JSF 应用程序开发入门
设置 PATH 环境变量：将%ANT_HOME%\lib\
*
.jar 追加到原来的内容后，并用英文分号与前面的
内容分开。
3.2 开发您的第一个JSF应用程序
为了简明起见，大多数编程方面的书籍介绍的第一个应用程序都是一个简单的 Hello World 应用，
本书也遵从这个惯例。
3.2.1 Hello World应用程序的需求分析
开发应用程序的第一步就是要搞清楚应用程序的需求，Hello World 应用程序虽然简单，同样也要
进行需求分析。只不过分析过程非常简单罢了。
我们这里的 Hello World 应用程序要满足如下一些要求：
用户在一个文本框中输入用户名，点击提交按钮，程序转向到问候页面。如果用户输入的用户名
为 stranger，则问候语为 How do you do，用户名！如果用户输入的用户名不为 stranger，则问候语为
How are you，New Friend!
3.2.2 应用程序的目录结构
建立如图 3.3 所示的应用程序目录结构。
在该目录结构中，hello 目录叫做项目的根目录，下面的 src 目录及
其子目录是放置该项目中各种源文件的目录，这些源文件包括 Java 类源
文件（Java 类源文件的扩展名为.java）、配置文件及属性文件等。 src
下面的一些子目录也叫包。hello 目录下的 WebRoot 目录则是放置页面文
件的地方。
Web 应用程序还有一个特殊的目录 WEB-INF 目录，在 WEB-INF 目
录下一般会有如下一些目录和文件：classes、lib、web.xml 和其他配置文
件。
classes 目录下的子目录结构与 src 下的相同，是用来存放 Java 类源
文件编译后的文件的（编译后的 Java 类文件的扩展名为.class），源文件
目录下的各个子目录除 Java 类文件外的其他文件往往会拷贝到 classes 目录下相应的子目录中。WEB-
INF 目录下的 lib 子目录则用来存放各种库文件（也就是一些打包后的类文件，其扩展名为.jar）。
61
图 3.3
JSF 第一步——JSF+Spring+Hibernate+AJAX 编程实践
3.2.3 应用程序的页面文件
该 Web 应 用 程 序 有 四 个 页 面 文 件 ， 它 们 分 别 是 ： index.jsp 、 hello.jsp 、 howDoYouDo.jsp 和
howAreYou.jsp。
我们将这些文件保存在图 3.3 中的 hello 目录下的 WebRoot 子目录中，下面，我们来分别对它们做
一些介绍。
3.2.3.1 index.jsp
一般 Web 应用程序或者一个网站都有一个引导文件，通常应用程序的用户输入 Web 应用的地址
而不具体指向某个页面时能够访问到应用程序的入口页面。index.jsp 就是这样的引导文件。在我们的
Hello World 示例应用中该页面文件的代码很简单，只有短短两行代码，如下所示：
代码清单 3-1
<%@ page contentType="text/html; charset=UTF-8" %>
<jsp:forward page="/hello.faces"/>
第 1 行我们在讲 JSP 时已经接触过，应该对它比较熟悉了，就不再做介绍；
第 2 行代码是一个 JSP 的转向动作，其实，我们也应该很熟悉了，只是该动作转向的目的页面的
URL 的形式是“/hello.faces”，这是我们以前不太熟悉的，现在我们暂且存疑，等后面介绍应用程序的
配置文件时再来解答这个疑问。
其 实 ， 该 页 面 并 不 是 应用 程 序 必 需 的 。 如 果 没 有 该 文 件 ， 在 浏览 器 地 址 栏 中 输 入 http://
127.0.0.1:8080/ hello/hello.faces 也 可 以 直 接 访 问
hello.jsp 页面。
3.2.3.2 hello.jsp
hello.jsp 文件是本示例应用程序中我们要重点
介绍的页面文件。运行时它的情形如图 3.4 所示。
页面很简单，在页面的主体部分，开始是一
段提示文字：“Please enter your name”，这段文字
的下面是一个供用户输入名字的文本框，文本框
的下面是一个提交按钮。这个页面文件的代码如
下：
代码清单 3-2
<%@page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<title>Hello Application</title>
</head>
62
图 3.4
第 3 章 JSF 应用程序开发入门
<body>
<f:view>
<h:form id="helloForm">
<h3>Please enter your name </h3>
<table>
<tr>
<td>Name:</td>
<td>
<h:inputText id="userName"
value="#{hello.userName}" required="true"/>
<h:message for="userName" />
</td>
</tr>
</table>
<p>
<h:commandButton id="helloCommand"
type="submit"
value="Submit"
action="#{hello.sayHelloAction}"/>
</h:form>
<h:messages globalOnly="true">
</h:messages>
</f:view>
</body>
</html>
从代码可以看出，这是一个比较典型的 JSP 文件，文件中即有普通的 HTML 代码，也就是所谓的
模板数据，也有像自定义标签等这样的动态数据。
文件中的如下两句是 JSP 页面的标签库指令：
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
它们所引用的标签库则是 JSF 提供的自定义标签库。第一个标签库是 JSF 的核心标签库；第二个
则是 JSF 的 HTML 组件标签库。
核心标签库提供了组件树的根、验证、转换、事件处理等基本任务标签。它们独立于特定的呈现
工具包的标签，也就是说，无论呈现页面组件的呈现工具包提供的是 HTML 标签，还是 WML 标签，
核心标签库都是相同的。
HTML 组件标签库中的标签则用来呈现 Web 页面上的 UI 组件，比如常见文本框、表单等等都是
用这种标签来表示的。HTML 组件标签库是 JSF 实现提供的缺省的标签库。
在上面这两个指令中，标签库的前缀分别是 f 和 h，这只是习惯的做法，实际可以是其他字符或
字符串，但不能是 JSF 及相关技术的保留字。下面具体地介绍一下该页面上用到的 JSF 的自定义标签。
文件中的<f:view>标签
文件中的<f:view></f:view>代表的是组成 JSF 视图的组件的根，在页面文件中它必须将所有其他
的 JSF 标签包围起来，被它包围的标签既包括 JSF 的核心标签库中的标签，也包括 HTML 组件标签库
63
