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>
在這個配置描述文件中有二個部分。 <servlet> 元素注冊 Faces servlet ， <servlet-mapping> 元素聲明任何包含有 /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" %>
<jsp:useBean> 這個動作元素定義 NumberBean JavaBean 為 session scope 。
<jsp:useBean id="NumberBean" class="jsfApp.NumberBean" scope="session" />
接著是 JSF 控件了。注意 JSF 控件需要嵌入到 <f:use_faces> 標簽中：
<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 頁面。這樣情況下，你需要從一個頁面導航到另一個頁面。然而這應是另一篇文章的主題。