JSF(JavaServer Faces) 介绍

JavaServer Pages(JSF) 在 Java 的 WEB 编程中已经被认为是下一个重大的事件。通过 JSF ，你可以在网页上使用 WEB 组件，来捕获用户行为产生的事件。不远的将来，Java 工具将支持这个技术，开发 WEB 应用程序将与我们现在开发 SWING 程序类似：拖放控件、写事件侦听器。本文是一个 JSF 的简要介绍，并且提供一个 JSF 的例子，用来展示 JSF 的事件驱动特性。要理解本文，您需要对 servlets, JSP, JavaBeans, 与标签库有一定的理解。

　　首先，一个 JSF 应用就是一个 servlet/JSP 应用。它有一个配置描述符，有 JSP 页面、客户定制标签、静态资源等等。不同的是，JSF 应用是事件驱动的。你通过写一个事件侦听类来决定应用程序的行为。以下建立一个 JSF 应用所需要的几个步骤：

　　1、建立 JSP 页面，用 JSF 组件包装 HTML 元素。

　　2、写一个 JavaBean 用来保持用户输入与组件数据的状态。

　　3、写一个事件侦听器来决定当某事件发生时应该有什么反映，比如用户点击了一个按钮或者提交了表单。JSF 支持两个事件：ActionEvent 与 valueChangeEvent 。ActionEvent 是针对用户提交表单与点击按钮的，而 valueChangeEvent 是当一个 JSF 组件改变了时触发。

　　现在，让我们来看一下JSF动作的细节。

　　 JSF 怎样工作

　　JSP 页面是 JSF 应用的用户接口。每个页面包括一些 JSF 组件用来描述 WEB 控件，如表单、输入框、按钮等等。组件可以嵌入另一个组件中，正如输入框可以在表单中。每个 JSP 页面就这样表示为组件树。JaveBeans 从用户的请求中获取数据并存储。

　　这是有意思的部分：每当用户做任何事情，如点击按钮或者提交表单，都有事件产生。然后事件消息通过 HTTP 传到服务器。在服务器端，是一个配置了叫做 Faces servlet 的特殊 servlet 的 WEB 容器。Faces servlet(javax.faces.webapp.FacesServlet)是所有 JSF 应用的引擎。每个 JSF 应用在 WEB 容器中都有独立的 Faces servlet 。另一个重要的对象是 javax.faces.context.FacesContext , 它包括了所有关于当前用户请求的必要信息。

　　Faces servlet 的后台处理是相当复杂的。然而你没有必要了解这些细节，只需要记住：Faces servlet 为 JSP 页面创建了组件树，对组件树的控制又对应着事件。Faces servlet 知道怎么去创建组件树，因为它已经访问了当前应用中所有的 JSP 页面。Faces servlet 还会创建一个 Event 对象，并把它传递给所有注册过的侦听器。你可以通过与当前请求相对应的 FacesContext 得到这个页面的组件树。

　　客户端浏览器上 WEB 控件产生的事件，被包含在一个 HTTP 请求中，放在一起还有如浏览器类型、请求地址等其它信息。因此，所有需要 Faces servlet 处理的请求必须指向这个 servlet 。那你怎样通过调用 Faces servelt 来处理每个 HTTP 请求呢？很容易，只需要在配置描述符里用一个 servlet-mapping 元素把一个特殊的 URL 式样映射到 Faces servlet。通常，你会用到 /faces/* 样式，如下所示：

<!-- Faces Servlet --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <!-- Faces Servlet Mapping --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping>

　　 请求地址必须包含有在 <url-pattern> 元素中描述的样式。这个要求不容易达到。另外也需要注意的是 <servlet> 元素，它包含 Faces servlet ，有一个 <load-on-startup> 元素，用来确是否应用程序第一次启动时 servlet 是否加载。

　　 为了捕获组件产生的事件，你需要为这个组件写一个侦听器，并把它注册给这个组件。通过在表示组件的客户端标签中嵌入 <action_listener> 元素能做到这一点。例如，为了让一个名叫 jsfApp.MyActionListener 的事件侦听器，来捕获一个名叫 submitButton 的命令按钮产生的事件，在你的 JSP 页面中写如下的代码即可：

<h:command_button id="submitButton" label="Add" commandName="submit" > <f:action_listener type="jsfApp.MyActionListener" /> </h:command_button>

　　一个 action listener 必须实现 javax.faces.event.ActionListener 接口，而一个 value-changed listener 必须实现 java.faces.event.valueChangedLister 接口。下面让我们来创建一个简单的 JSF 应用，以展现 JSF 是怎么样事件驱动的。

　　 一个简单的 JSF 应用

　　我们将创建一个简单的应用，它可以实现对二个数字相加。为了运行这个应用，你需要准备 TOMCAT5 与 JSF v1.0 EA4(包含在 Java Web Services Developer Pack (JWSDP) 1.2中)。这个应用程序包括：

　　adder.jsp JSP 页面。

　　NumberBean 存放用户数据的 JavaBean

　　MyActionListener 事件侦听器

　　web.xml 配置描述文件

　　为了使这个应用能正常工作，还需要几个 jar 文件，包括 JSF 标准实现与其它类库。如果你安装了 JWSDP 1.2，你就可以在 jsflib 目录下找到所需要的这些文件。把这些 .jar 文件拷贝到 WEB-INF/lib 目录下。下面是整个的 .jar 与 .tld 文件列表：

　　jsf-api.jar 包含有 Faces servlet 与其它相关 javax.faces 包下面的类

　　jfs-ri.jar 是 JSF 的参考实现

　　jstl_el.jar

　　standard.jar

　　此外，一个 JSF 的应用还需要如下的类库，它们是 Apache Jakarta 项目的一部分：

　　commons-beanutils.jar

　　commons-digester.jar

　　commons-logging.jar is



　　以下的几小段讨论这个 JSF 示例的每个部分。最后的一小段，“编译与运行”，解释 JSF 应用怎么样运行。

　　 创建目录结构

　　首先为你的 JSF 应用创建一个目录结构。在 TOMCAT 中，它在 webapps 目录下。“图1”描述了叫做 myJSFApp 的应用程序的目录结构。

　　 写配置描述符

　　与其它的 servlet/JSP 应用一样，这个应用程序也需要一个配置描述文件。如“清单1”表示。



　　Listing 1. The deployment descriptor (the web.xml file)

<?xml version="1.0"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd";;> <web-app> <!-- Faces Servlet --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet </servlet-class> <load-on-startup> 1 </load-on-startup> </servlet> <!-- Faces Servlet Mapping --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> </web-app>

　　在这个配置描述文件中有二个部分。 元素注册 Faces servlet ， 元素声明任何包含有 /faces/ 式样的请求地址，必须传递给 Faces servlet 。

创建 JSP 页面

　　一个叫做 adder.jsp 的 JSP 页面提供用户接口，如“清单2”所示：

　　Listing 2. The adder.jsp page

<%@ taglib uri="http://java.sun.com/jsf/html";; prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core";; prefix="f" %> <html> <head> <title>Add 2 numbers</title> </head> <body> <jsp:useBean id="NumberBean" class="jsfApp.NumberBean" scope="session" /> <f:use_faces><br /> <h:form id="addForm" formName="addForm" ><br /> First Number:<br /> <h:input_number id="firstNumber" valueRef= "NumberBean.firstNumber" /><br /> Second Number: <h:input_number id="secondNumber" valueRef= "NumberBean.secondNumber" /><br /> Result: <h:output_number id="output" valueRef= "NumberBean.result"/><br> <h:command_button id="submitButton" label="Add" commandName="submit" > <f:action_listener type="jsfApp.MyActionListener" /> </h:command_button> </h:form> </f:use_faces> </body> </html>

我们首先定义了两个标签，它用到 JSF 的两个标签库：html 与 core 。这俩个标签库的定义可以在 jsf-ri.jar 文件中找到，所以你不用为它担心。它们的前缀分别是 h / f 。

<%@ taglib uri="http://java.sun.com/jsf/html";; prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core";; prefix="f" %>

　　 这个动作元素定义 NumberBean JavaBean 为 session scope 。

<jsp:useBean id="NumberBean" class="jsfApp.NumberBean" scope="session" />

　　接着是 JSF 控件了。注意 JSF 控件需要嵌入到 标签中：

<f:use_faces> ... </f:use_faces>

　　在这里面，有一个表单。

<h:form id="addForm" formName="addForm"> ... </h:form>

　　内嵌在这个表单里的是二个 input_numbers, 一个 output_number, 与一个 command_button 。

第一个数字:

<h:input_number id="firstNumber" valueRef="NumberBean.firstNumber" /><br />

第二个数字:

<h:input_number id="secondNumber" valueRef="NumberBean.secondNumber" /><br />

结果:

<h:output_number id="output" valueRef="NumberBean.result" /><br /> <h:command_button id="submitButton" label="Add" commandName="submit"> <f:action_listener type="jsfApp.MyActionListener" /> </h:command_button>

　　注意命令按钮的事件侦听器。“图2”描述了这个 JSP 页面的组件树(树根省略)。

　　主组件是表单，它有四个子组件。

　　 写对象模型

　　在这个应用中，你需要用一个 JavaBean 来存二个数字与相加的结果。“清单3”是这个 JavaBean 的内容：NumberBean

　　Listing 3. The NumberBean JavaBean

package jsfApp; public class NumberBean { int firstNumber = 0; int secondNumber = 0; public NumberBean () { System.out.println("Creating model object"); } public void setFirstNumber(int number) { firstNumber = number; System.out.println("Set firstNumber " + number); } public int getFirstNumber() { System.out.println ("get firstNumber " + firstNumber); return firstNumber; } public void setSecondNumber(int number) { secondNumber = number; System.out.println("Set secondNumber " + number); } public int getSecondNumber() { System.out.println ("get secondNumber " + secondNumber); return secondNumber; } public int getResult() { System.out.println ("get result " + (firstNumber + secondNumber)); return firstNumber + secondNumber; } }

　　 写事件侦听器

　　命令按钮的事件侦听器是这个 JSF 应用的最有趣的部分。它表述一个事件怎么样引起一个侦听器去侦听。侦听器简单地只是输出信息到控制台。然而，它显示了重要的信息，如 JSP 页面组件树的层次结构，正是这些组件触发了事件。“清单4”展示事件侦听器：

　　Listing 4. The action listener for the command button (MyActionListener.java)

package jsfApp; import java.util.Iterator; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.event.ActionEvent; import javax.faces.event.ActionListener; import javax.faces.event.PhaseId; import javax.faces.tree.Tree; public class MyActionListener implements ActionListener { public PhaseId getPhaseId() { System.out.println("getPhaseId called"); return PhaseId.APPLY_REQUEST_valueS; } public void processAction(ActionEvent event) { System.out.println("processAction called"); // the component that triggered the action event UIComponent component = event.getComponent(); System.out.println ("The id of the component that fired the action event: " + component.getComponentId()); // the action command String actionCommand = event.getActionCommand(); System.out.println ("Action command: " + actionCommand); FacesContext facesContext = FacesContext.getCurrentInstance(); Tree tree = facesContext.getTree(); UIComponent root = tree.getRoot(); System.out.println ("----------- Component Tree -------------"); navigateComponentTree(root, 0); System.out.println ("----------------------------------------"); } private void navigateComponentTree (UIComponent component, int level) { Iterator children = component.getChildren(); // indent for (int i=0; i<level; i++) System.out.print(" "); // print component id System.out.println(component.getComponentId()); // navigate children while (children.hasNext()) { UIComponent child = (UIComponent) children.next(); navigateComponentTree(child, level + 1); } } }

编译与运行

　　为了编译这个应用，我们转到 myJSFApp/WEB-INF/classes 这个目录。如果你用的是 windows 系统，打出如下命令：

javac -classpath ../lib/jsf-api.jar;../lib/jsf-ri.jar;../../../../common/lib/servlet.jar jsfApp/*.java

　　注意你必须用到 lib 目录下的类库与 servlet.jar 库。

　　然后运行 Tomcat ，在地址栏输入如下地址：

　　 http://localhost:8080/myJSFApp/faces/adder.jsp

　　注意你在 JPS 页面文件名前用了 /faces/ 式样。然后可以在浏览器中看到”如图3“所示：

　　在控制台，你可以看到如下信息：

Model Object Created get firstNumber 0 get secondNumber 0 get result 0 getPhaseId called

　　现在在二个输入框中分别输入二个数字，然后点击 ADD 按钮。浏览器将显示计算结果“如图4”：

　　更重要的，再检查一下控制台，看到如下信息：

get firstNumber 0 get secondNumber 0 processAction called The id of the component that fired the action event: submitButton Action command: submit ----------- Component Tree ------------- null addForm firstNumber secondNumber output submitButton ---------------------------------------- Set firstNumber 10 Set secondNumber 20 get firstNumber 10 get secondNumber 20 get result 30

　　 总结

　　在这篇文章中，你学到了 JSF 区别于其它 servlet/JSP 应用的最重要的特点：事件驱动。你也创建了一个包含一个 JSP 页面的简单应用。更重要的，你写了能响应事件的侦听器。

　　实际应用中的 JSF 应用复杂得多，通常是很多 JSP 页面。这样情况下，你需要从一个页面导航到另一个页面。然而这应是另一篇文章的主题。



图1



图2



图3



图4