JavaServer Pages(JSF) 在 Java 的 WEB 編程中已經(jīng)被認(rèn)為是下一個(gè)重大的事件。通過(guò) JSF ，你可以在網(wǎng)頁(yè)上使用 WEB 組件，來(lái)捕獲用戶行為產(chǎn)生的事件。不遠(yuǎn)的將來(lái)，Java 工具將支持這個(gè)技術(shù)，開發(fā) WEB 應(yīng)用程序?qū)⑴c我們現(xiàn)在開發(fā) SWING 程序類似：拖放控件、寫事件偵聽器。本文是一個(gè) JSF 的簡(jiǎn)要介紹，并且提供一個(gè) JSF 的例子，用來(lái)展示 JSF 的事件驅(qū)動(dòng)特性。要理解本文，您需要對(duì) servlets, JSP, JavaBeans, 與標(biāo)簽庫(kù)有一定的理解。
首先，一個(gè) JSF 應(yīng)用就是一個(gè) servlet/JSP 應(yīng)用。它有一個(gè)配置描述符，有 JSP 頁(yè)面、客戶定制標(biāo)簽、靜態(tài)資源等等。不同的是，JSF 應(yīng)用是事件驅(qū)動(dòng)的。你通過(guò)寫一個(gè)事件偵聽類來(lái)決定應(yīng)用程序的行為。以下建立一個(gè) JSF 應(yīng)用所需要的幾個(gè)步驟：
1、建立 JSP 頁(yè)面，用 JSF 組件包裝 HTML 元素。
2、寫一個(gè) JavaBean 用來(lái)保持用戶輸入與組件數(shù)據(jù)的狀態(tài)。
3、寫一個(gè)事件偵聽器來(lái)決定當(dāng)某事件發(fā)生時(shí)應(yīng)該有什么反映，比如用戶點(diǎn)擊了一個(gè)按鈕或者提交了表單。JSF 支持兩個(gè)事件：ActionEvent 與 ValueChangeEvent 。ActionEvent 是針對(duì)用戶提交表單與點(diǎn)擊按鈕的，而 ValueChangeEvent 是當(dāng)一個(gè) JSF 組件改變了時(shí)觸發(fā)。
現(xiàn)在，讓我們來(lái)看一下 JSF 動(dòng)作的細(xì)節(jié)。
JSF 怎樣工作 JSP 頁(yè)面是 JSF 應(yīng)用的用戶接口。每個(gè)頁(yè)面包括一些 JSF 組件用來(lái)描述 WEB 控件，如表單、輸入框、按鈕等等。組件可以嵌入另一個(gè)組件中，正如輸入框可以在表單中。每個(gè) JSP 頁(yè)面就這樣表示為組件樹。JaveBeans 從用戶的請(qǐng)求中獲取數(shù)據(jù)并存儲(chǔ)。
這是有意思的部分：每當(dāng)用戶做任何事情，如點(diǎn)擊按鈕或者提交表單，都有事件產(chǎn)生。然后事件消息通過(guò) HTTP 傳到服務(wù)器。在服務(wù)器端，是一個(gè)配置了叫做 Faces servlet 的特殊 servlet 的 WEB 容器。Faces servlet(javax.faces.webapp.FacesServlet)是所有 JSF 應(yīng)用的引擎。每個(gè) JSF 應(yīng)用在 WEB 容器中都有獨(dú)立的 Faces servlet 。另一個(gè)重要的對(duì)象是 javax.faces.context.FacesContext , 它包括了所有關(guān)于當(dāng)前用戶請(qǐng)求的必要信息。
Faces servlet 的后臺(tái)處理是相當(dāng)復(fù)雜的。然而你沒(méi)有必要了解這些細(xì)節(jié)，只需要記住：Faces servlet 為 JSP 頁(yè)面創(chuàng)建了組件樹，對(duì)組件樹的控制又對(duì)應(yīng)著事件。Faces servlet 知道怎么去創(chuàng)建組件樹，因?yàn)樗呀?jīng)訪問(wèn)了當(dāng)前應(yīng)用中所有的 JSP 頁(yè)面。Faces servlet 還會(huì)創(chuàng)建一個(gè) Event 對(duì)象，并把它傳遞給所有注冊(cè)過(guò)的偵聽器。你可以通過(guò)與當(dāng)前請(qǐng)求相對(duì)應(yīng)的 FacesContext 得到這個(gè)頁(yè)面的組件樹。
客戶端瀏覽器上 WEB 控件產(chǎn)生的事件，被包含在一個(gè) HTTP 請(qǐng)求中，放在一起還有如瀏覽器類型、請(qǐng)求地址等其它信息。因此，所有需要 Faces servlet 處理的請(qǐng)求必須指向這個(gè) servlet 。那你怎樣通過(guò)調(diào)用 Faces servelt 來(lái)處理每個(gè) HTTP 請(qǐng)求呢？很容易，只需要在配置描述符里用一個(gè) servlet-mapping 元素把一個(gè)特殊的 URL 式樣映射到 Faces servlet。通常，你會(huì)用到 /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>
請(qǐng)求地址必須包含有在 <url-pattern> 元素中描述的樣式。這個(gè)要求不容易達(dá)到。另外也需要注意的是 <servlet> 元素，它包含 Faces servlet ，有一個(gè) <load-on-startup> 元素，用來(lái)確是否應(yīng)用程序第一次啟動(dòng)時(shí) servlet 是否加載。
為了捕獲組件產(chǎn)生的事件，你需要為這個(gè)組件寫一個(gè)偵聽器，并把它注冊(cè)給這個(gè)組件。通過(guò)在表示組件的客戶端標(biāo)簽中嵌入 <action_listener> 元素能做到這一點(diǎn)。例如，為了讓一個(gè)名叫 jsfApp.MyActionListener 的事件偵聽器，來(lái)捕獲一個(gè)名叫 submitButton 的命令按鈕產(chǎn)生的事件，在你的 JSP 頁(yè)面中寫如下的代碼即可：
<h:command_button id="submitButton" label="Add" commandName="submit" >
<f:action_listener type="jsfApp.MyActionListener" />
</h:command_button>
一個(gè) action listener 必須實(shí)現(xiàn) javax.faces.event.ActionListener 接口，而一個(gè) value-changed listener 必須實(shí)現(xiàn) java.faces.event.ValueChangedLister 接口。下面讓我們來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的 JSF 應(yīng)用，以展現(xiàn) JSF 是怎么樣事件驅(qū)動(dòng)的。
一個(gè)簡(jiǎn)單的 JSF 應(yīng)用 我們將創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用，它可以實(shí)現(xiàn)對(duì)二個(gè)數(shù)字相加。為了運(yùn)行這個(gè)應(yīng)用，你需要準(zhǔn)備 TOMCAT5 與 JSF v1.0 EA4(包含在
Java Web Services Developer Pack (JWSDP) 1.2中)。這個(gè)應(yīng)用程序包括：
adder.jsp JSP 頁(yè)面。
NumberBean 存放用戶數(shù)據(jù)的 JavaBean
MyActionListener 事件偵聽器
web.xml 配置描述文件
為了使這個(gè)應(yīng)用能正常工作，還需要幾個(gè) jar 文件，包括 JSF 標(biāo)準(zhǔn)實(shí)現(xiàn)與其它類庫(kù)。如果你安裝了 JWSDP 1.2，你就可以在 jsflib 目錄下找到所需要的這些文件。把這些 .jar 文件拷貝到 WEB-INF/lib 目錄下。下面是整個(gè)的 .jar 與 .tld 文件列表：
jsf-api.jar 包含有 Faces servlet 與其它相關(guān) javax.faces 包下面的類
jfs-ri.jar 是 JSF 的參考實(shí)現(xiàn)
jstl_el.jar
standard.jar
此外，一個(gè) JSF 的應(yīng)用還需要如下的類庫(kù)，它們是 Apache Jakarta 項(xiàng)目的一部分：
commons-beanutils.jar
commons-digester.jar
commons-logging.jar is
以下的幾小段討論這個(gè) JSF 示例的每個(gè)部分。最后的一小段，“編譯與運(yùn)行”，解釋 JSF 應(yīng)用怎么樣運(yùn)行。
創(chuàng)建目錄結(jié)構(gòu) 首先為你的 JSF 應(yīng)用創(chuàng)建一個(gè)目錄結(jié)構(gòu)。在 TOMCAT 中，它在 webapps 目錄下。“圖1”描述了叫做 myJSFApp 的應(yīng)用程序的目錄結(jié)構(gòu)。
寫配置描述符 與其它的 servlet/JSP 應(yīng)用一樣，這個(gè)應(yīng)用程序也需要一個(gè)配置描述文件。如“清單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>
在這個(gè)配置描述文件中有二個(gè)部分。 <servlet> 元素注冊(cè) Faces servlet ， <servlet-mapping> 元素聲明任何包含有 /faces/ 式樣的請(qǐng)求地址，必須傳遞給 Faces servlet 。
創(chuàng)建 JSP 頁(yè)面 一個(gè)叫做 adder.jsp 的 JSP 頁(yè)面提供用戶接口，如“清單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>
我們首先定義了倆個(gè)標(biāo)簽，它用到 JSF 的兩個(gè)標(biāo)簽庫(kù)：html 與 core 。這倆個(gè)標(biāo)簽庫(kù)的定義可以在 jsf-ri.jar 文件中找到，所以你不用為它擔(dān)心。它們的前綴分別是 h / f 。
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<jsp:useBean> 這個(gè)動(dòng)作元素定義 NumberBean JavaBean 為 session scope 。
<jsp:useBean id="NumberBean" class="jsfApp.NumberBean" scope="session" />
接著是 JSF 控件了。注意 JSF 控件需要嵌入到 <f:use_faces> 標(biāo)簽中：
<f:use_faces>
...
</f:use_faces>
在這里面，有一個(gè)表單。
<h:form id="addForm" formName="addForm">
...
</h:form>
內(nèi)嵌在這個(gè)表單里的是二個(gè) input_numbers, 一個(gè) output_number, 與一個(gè) command_button 。
第一個(gè)數(shù)字:
<h:input_number id="firstNumber" valueRef="NumberBean.firstNumber" /><br />
第二個(gè)數(shù)字:
<h:input_number id="secondNumber" valueRef="NumberBean.secondNumber" /><br />
結(jié)果:
<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”描述了這個(gè) JSP 頁(yè)面的組件樹(樹根省略)。
主組件是表單，它有四個(gè)子組件。
寫對(duì)象模型 在這個(gè)應(yīng)用中，你需要用一個(gè) JavaBean 來(lái)存二個(gè)數(shù)字與相加的結(jié)果。“清單3”是這個(gè) JavaBean 的內(nèi)容：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;
}
}
寫事件偵聽器 命令按鈕的事件偵聽器是這個(gè) JSF 應(yīng)用的最有趣的部分。它表述一個(gè)事件怎么樣引起一個(gè)偵聽器去偵聽。偵聽器簡(jiǎn)單地只是輸出信息到控制臺(tái)。然而，它顯示了重要的信息，如 JSP 頁(yè)面組件樹的層次結(jié)構(gòu)，正是這些組件觸發(fā)了事件。“清單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);
}
}
}
編譯與運(yùn)行 為了編譯這個(gè)應(yīng)用，我們轉(zhuǎn)到 myJSFApp/WEB-INF/classes 這個(gè)目錄。如果你用的是 windows 系統(tǒng)，打出如下命令：
javac -classpath ../lib/jsf-api.jar;../lib/jsf-ri.jar;../../../../common/lib/servlet.jar jsfApp/*.java
注意你必須用到 lib 目錄下的類庫(kù)與 servlet.jar 庫(kù)。
然后運(yùn)行 Tomcat ，在地址欄輸入如下地址：
http://localhost:8080/myJSFApp/faces/adder.jsp
注意你在 JPS 頁(yè)面文件名前用了 /faces/ 式樣。然后可以在瀏覽器中看到”如圖3“所示：
在控制臺(tái)，你可以看到如下信息：
Model Object Created
get firstNumber 0
get secondNumber 0
get result 0
getPhaseId called
現(xiàn)在在二個(gè)輸入框中分別輸入二個(gè)數(shù)字，然后點(diǎn)擊 ADD 按鈕。瀏覽器將顯示計(jì)算結(jié)果“如圖4”：
更重要的，再檢查一下控制臺(tái)，看到如下信息：
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
總結(jié) 在這篇文章中，你學(xué)到了 JSF 區(qū)別于其它 servlet/JSP 應(yīng)用的最重要的特點(diǎn)：事件驅(qū)動(dòng)。你也創(chuàng)建了一個(gè)包含一個(gè) JSP 頁(yè)面的簡(jiǎn)單應(yīng)用。更重要的，你寫了能響應(yīng)事件的偵聽器。
實(shí)際應(yīng)用中的 JSF 應(yīng)用復(fù)雜得多，通常是很多 JSP 頁(yè)面。這樣情況下，你需要從一個(gè)頁(yè)面導(dǎo)航到另一個(gè)頁(yè)面。然而這應(yīng)是另一篇文章的主題。