Java在最近幾年逐漸升溫，隨著Java SE 5和Java SE 6的推出，Java的未來更顯得無比輝煌。但以Java為基礎(chǔ)的JSP在Java SE 5推出之前卻一直抬不起頭來，這最重要的原因就是JSP雖然功能十分強(qiáng)大，但最大的優(yōu)點(diǎn)也是它的最大缺點(diǎn)，功能強(qiáng)大就意味著復(fù)雜，尤其是設(shè)計(jì)前端界面的可視化工具不多，也不夠強(qiáng)大。因此，設(shè)計(jì)JSP頁(yè)面就變得十分復(fù)雜和繁瑣。不過，在Java SE 5推出的同時(shí)，Sun為了簡(jiǎn)化JSP的開發(fā)難度，推出了新的JavaServer Faces(簡(jiǎn)稱JSF)規(guī)范。從而使JSP走上了康莊大道。

一、什么是JSF

　　JSF和JSP是一對(duì)新的搭檔。JSP是用于后臺(tái)的邏輯處理的技術(shù)，而JSF恰恰相反，是使開發(fā)人員能夠快速的開發(fā)基于 Java 的 Web 應(yīng)用程序的技術(shù)，是一種表現(xiàn)層技術(shù)。目前，JSF1.2已經(jīng)正式作為一個(gè)標(biāo)準(zhǔn)加入了Java EE 5中。

　　作為一種高度組件化的技術(shù)，開發(fā)人員可以在一些開發(fā)工具的支持下，實(shí)現(xiàn)拖拉式編輯操作，用戶只需要簡(jiǎn)單的將 JSF 組件拖到頁(yè)面上，就可以很容易的進(jìn)行 Web 開發(fā)了。這是其作為一種組件化的技術(shù)所具有的最大好處，我們能用的組件不光是一些比較簡(jiǎn)單的輸入框之類，還有更多復(fù)雜的組件可以使用的，比如 DataTable 這樣的表格組件， Tree 這樣的樹形組件等等。

　　作為一種標(biāo)準(zhǔn)的技術(shù)，JSF還得到了相當(dāng)多工具提供商的支持。同時(shí)我們也會(huì)有很多很好的免費(fèi)開發(fā)工具可以使用，前不久 Sun Java Studio Creator 2 和 Oracle JDeveloper 10g 作為免費(fèi)的支持 JSF 的開發(fā)工具發(fā)布，給 JSF 帶來了不小的生氣。另外我們也有一些很優(yōu)秀的商業(yè)開發(fā)工具可共選擇，BEA Workshop (原 M7 NitroX)，Exadel，MyEclipse 這樣的基于 Eclipse 的插件開發(fā)工具，為現(xiàn)在廣大的 Eclipse 用戶帶來了不小的便利，IBM 的 Rational Application Developer 和 Borland 的 JBuilder 也是很不錯(cuò)的支持 JSF 可視化開發(fā)的商業(yè)開發(fā)工具。

　　JSF和傳統(tǒng)的Web技術(shù)有著本質(zhì)上的差別，在傳統(tǒng)的Web技術(shù)需要用戶自己對(duì)瀏覽器請(qǐng)求進(jìn)行捕捉，保存客戶端狀態(tài)，并且手工控制著頁(yè)面的轉(zhuǎn)向，等等。而JSF的出現(xiàn)，無疑給我們帶來了巨大的便利，JSF 提供了事件驅(qū)動(dòng)的頁(yè)面導(dǎo)航模型，該模型使應(yīng)用程序開發(fā)人員能夠設(shè)計(jì)應(yīng)用程序的頁(yè)面流。與 Struts 的方式向類似的是，所有的頁(yè)面流信息都定義在 JSF 配置 XML 文件 (faces-config.xml) 中，而非硬編碼在應(yīng)用程序中。這很大程度簡(jiǎn)化了開發(fā)人員開發(fā)難度，簡(jiǎn)化了應(yīng)用程序的開發(fā)。

　　同時(shí)JSF也是一種遵循模型-視圖-控制器 (MVC) 模式的框架。實(shí)現(xiàn)了視圖代碼(View)與應(yīng)用邏輯(Model)的完全分離，使得使用 JSF 技術(shù)的應(yīng)用程序能夠很好的實(shí)現(xiàn)頁(yè)面與代碼的分離。所有對(duì) JSF 頁(yè)面的請(qǐng)求都會(huì)通過一個(gè)前端控制器 (FacesServlet) 處理，系統(tǒng)自動(dòng)處理用戶的請(qǐng)求，并將結(jié)果返回給用戶。這和傳統(tǒng)的 MVC 框架并沒有太大的區(qū)別。

　　在JSF中不僅使用了 POJO 技術(shù)，而且還使用了類似 Spring 的控制反轉(zhuǎn)(IoC) (或稱為依賴注入-DI) 技術(shù)，在 JSF 的 Backing Bean 中，我們可以把視圖所需要的數(shù)據(jù)和操作放進(jìn)一個(gè) Backing Bean 中。同時(shí)得益于 JSF 使用的 DI 技術(shù)，我們可以在配置文件中初始化 Managed Bean，同時(shí)我們也可以通過這樣的技術(shù)很方便的和使用類似技術(shù)的 Spring 進(jìn)行整合。

二、如何在JSP中使用JSF

　　JSF只有通過和JSP相結(jié)合，才能充分發(fā)揮它的功效。JSF是通過標(biāo)簽庫(kù)和JSP進(jìn)行集成的。標(biāo)簽庫(kù)就相當(dāng)于ASP.NET的服務(wù)端組件。JSF提供了非常豐富的標(biāo)簽庫(kù)，通過這些標(biāo)簽庫(kù)，可以生成各種客戶端模型，如HTML、WML、XML以及JavaScript等。通過這些標(biāo)簽，你可以很容易建立大規(guī)模的客戶端模型，并由這些標(biāo)簽自動(dòng)處理客戶端請(qǐng)求。

　　接下來讓我們來看一個(gè)如何使JSF和JSP在一起工作的例子。在JSF中有兩個(gè)庫(kù)。第一個(gè)叫做內(nèi)核庫(kù)，在這個(gè)庫(kù)中包含了各種主要的標(biāo)簽，如配置組件、管理事件、驗(yàn)證輸入信息等。第二個(gè)庫(kù)的主要功能是將HTML和JSF的各種標(biāo)簽相對(duì)應(yīng)。每一個(gè)JSF標(biāo)簽都會(huì)對(duì)應(yīng)一個(gè)HTML組件。如UIInput標(biāo)簽對(duì)應(yīng)了HTML中的文本框或密碼框。

　　在JSF標(biāo)簽中文本輸入框叫做inputText，而密碼輸入庫(kù)叫inputSecret。下面是一個(gè)簡(jiǎn)單的JSF和JSP結(jié)合的用戶接口程序。

＜%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %＞ ＜%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %＞ ＜html＞ ＜head＞ ＜meta HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=GB2312"＞ ＜title＞第一個(gè)JSF程序＜/title＞ ＜/head＞ ＜body＞ 　＜f:view＞ 　＜h:form id="simpleForm"＞ 　＜h:outputText id="favoriteLabel" value="請(qǐng)輸入一個(gè)數(shù)字："/＞ 　＜h:inputText id="favoriteValue" value="#{simple.longValue}"＞ 　　＜f:validateLongrange maximum="30" minimum="0"/＞ 　＜/h:inputText＞ 　＜p/＞ 　＜h:commandButton id="submit" value="提交" action="#{simple.simpleActionMethod}"/＞ 　＜/h:form＞ 　＜/f:view＞ ＜/body＞ ＜/html＞

　　在上面的代碼中，我們可以了解到JSF是如何同JSP集成的。我們首先可以看到一個(gè)內(nèi)核標(biāo)簽：view。然后是幾個(gè)JSF組件。如form、outputText、inputText以及commandButton。這幾個(gè)組件被放到form中從而開成了form中的一部分。在程序的最開始，必須使用import導(dǎo)入兩個(gè)標(biāo)簽庫(kù)。代碼如下。

<!--taglib uri="http://java.sun.com/jsf/core" prefix="f"-->

＜%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %＞ ＜%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %＞

　　上面2行代碼聲明了JSP中要使用哪一個(gè)JSF標(biāo)簽庫(kù)。內(nèi)核庫(kù)使用前綴(prefix)f聲明，而HTML庫(kù)使用前綴(prefix)h聲明。這兩個(gè)前綴并不是必須要使用，而只是一個(gè)建議。在程序中，內(nèi)核庫(kù)必須要使用，因?yàn)関iew在所有的JSF頁(yè)中必須使用。而HTML標(biāo)簽在運(yùn)行時(shí)將JSF標(biāo)簽轉(zhuǎn)化為HTML組件，這個(gè)h前綴并不是必須的，而是JSF規(guī)范推薦使用的，這樣，我們使我們的JSF程序更易讀。

　　在聲明后是幾行標(biāo)準(zhǔn)的HTML語句，本文不再詳述。從＜f:view＞<view>開始，是一段JSF語句。這段代碼如下所示：</view>

<view><commandbutton id="submit" value="提交" p=""><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font face="Verdana">＜f:view＞<br>＜h:form id="simpleForm"＞<br>＜h:outputText id="favoriteLabel" value="請(qǐng)輸入一個(gè)數(shù)字："/＞<br>＜h:inputText id="favoriteValue" value="#{simple.longValue}"＞<br>＜f:validateLongrange maximum="30" minimum="0"/＞<br>＜/h:inputText＞<br>＜p/＞<br>＜h:commandButton id="submit" value="提交"<br>action="#{simple.simpleActionMethod}"/＞<br>＜/h:form＞<br>＜/f:view＞</font></td> </tr></tbody></table></commandbutton></view>

　　＜f:view＞標(biāo)簽預(yù)示著JSF的開始，而它的下一個(gè)標(biāo)簽form將建立一個(gè)HTML Form。而outputText標(biāo)簽相當(dāng)于HTML中的label組件。inputText標(biāo)簽相當(dāng)于HTML中的textField組件。而commandButton標(biāo)簽相當(dāng)于HTML中的submit按鈕。運(yùn)行這個(gè)JSP程序，將得到如圖1所顯示效果。

　　圖1 第一個(gè)JSF程序的運(yùn)行結(jié)果

三、JSP如何響應(yīng)JSF的請(qǐng)求

　　從上面的例子我們已經(jīng)知道如何在JSP中使用JSF了，在這一部分讓我們來看看在JSF是如何處理請(qǐng)求的。

　　首先讓我們來看一個(gè)例子，這個(gè)例子是將華氏度轉(zhuǎn)換為攝氏度。當(dāng)用戶點(diǎn)擊提交按鈕時(shí)程序?qū)⑦M(jìn)行轉(zhuǎn)換。

＜%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %＞ ＜%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %＞ ＜html＞ ＜head＞ 　＜meta HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=GB2312"＞ ＜title＞溫度轉(zhuǎn)換程序＜/title＞ ＜/head＞ ＜body＞ 　＜f:view＞ 　＜h:form＞ 　＜div＞ 　　＜h:outputText id="fahrenheitLabel" value="請(qǐng)輸入華氏溫度："/＞ 　　＜span＞ 　　　＜h:inputText id="temperature" value="#{tc.fahrenheitTemp}"＞ 　　　＜f:validateDoublerange minimum="-100.0" maximum="100.0"/＞ 　　　＜f:valuechangeListener type="tempconv.page.TCChangedListener"/＞ 　　＜/h:inputText＞ 　　＜/span＞ 　＜/div＞ 　＜div＞ 　　＜h:outputText id="celsiusLabel" value="攝氏溫度："/＞ 　　＜span＞ 　　　＜h:outputText id="celsiusValue" value="#{tc.celsiusTemp}"＞ 　　　＜f:convertNumber maxFractionDigits="3" type="number"/＞ 　　＜/h:outputText＞ 　　＜/span＞ 　＜/div＞ 　＜div＞ 　　＜h:commandButton value="轉(zhuǎn)換" action="#{tc.convert}"＞ 　　＜/h:commandButton＞ 　＜/div＞ 　＜/h:form＞ 　＜/f:view＞ ＜/body＞ ＜/html＞

　　在程序的前兩行是導(dǎo)入JSF核心庫(kù)和HTML庫(kù)，這個(gè)在前面已經(jīng)討論過，在這里不再詳述。

　　下面讓我們來看看JSF標(biāo)簽是如何同后端進(jìn)行交互的。由于我們是在JSP中使用JSF，因此，這個(gè)和正常的JSP沒有什么區(qū)別;JSP實(shí)際上就是Servlet，在JSP第一次運(yùn)行時(shí)由JSP編譯器將.JSP文件編譯成Servlet后再由Servlet調(diào)用，然后由Servlet來接收客戶端傳過來的數(shù)據(jù)流。但和一般的JSP程序不同的是，JSF標(biāo)簽是由JSF API負(fù)責(zé)調(diào)用的(這樣可以做到邏輯層和表現(xiàn)層分離)，除此之外，它們和一般的JSP標(biāo)簽沒有任何區(qū)別。

　　當(dāng)UIComponent標(biāo)簽收到doStartTag方法時(shí)，JSF將使用這些屬性來設(shè)置標(biāo)簽的值。如本例中的inputText標(biāo)簽將按它的屬性值來設(shè)置。下面是JSF的代碼片段。

<inputtext id="temperature" value="#{tc.fahrenheitTemp}"><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font face="Verdana">＜h:inputText id="temperature" value="#{tc.fahrenheitTemp}"＞<br>　＜f:validateDoublerange minimum="-100.0" maximum="100.0"/＞<br>　＜f:valuechangeListener type="tempconv.page.TCChangedListener"/＞<br>＜/h:inputText＞</font></td> </tr></tbody></table></inputtext>

　　inputText標(biāo)簽根據(jù)相應(yīng)的值設(shè)置了id和value的屬性。在JSF中是通過setAttribute(String name, Object value)設(shè)置每一個(gè)屬性值的。但我們需要注意的是JSF標(biāo)簽可以指定相應(yīng)的默認(rèn)值。這有些類似java中的系統(tǒng)屬性，如果你給了一個(gè)屬性名子，那系統(tǒng)將返回這個(gè)屬性的值，如果指定它的默認(rèn)值，并且這個(gè)屬性不存在的話，將返回這個(gè)默認(rèn)值。

　　接下來讓我們來看看上面程序的最重要的部分，也就是UIInput組件的事件處理。

＜f:valuechangeListener type="tempconv.page.TCChangedListener"/＞

　　在JSF中事件處理是由valuechangeListener標(biāo)簽完成的。這個(gè)標(biāo)簽所表示的事件在文本框的值發(fā)生變化時(shí)引發(fā)事件。但有意思的是這個(gè)事件并不馬上提交，而是要等到用戶點(diǎn)擊"提交"按鈕后這個(gè)事件連同相應(yīng)的數(shù)據(jù)才提交給后端。因此，這個(gè)事件請(qǐng)求也叫做預(yù)提交。最后，讓我們看看UICommand的代碼實(shí)現(xiàn)。

＜div＞ 　＜h:commandButton value="轉(zhuǎn)換" action="#{tc.convert}"＞ 　＜/h:commandButton＞ ＜/div＞

　　上面的代碼將convert()方法和UICommand連接了起來，也就是說，點(diǎn)擊"提交"按鈕后，將執(zhí)行convert()方法。在遇到view標(biāo)簽后，JSF程序結(jié)果，JSFAPI最后調(diào)用doEnd方法來結(jié)束JSF程序。JSF引擎在解析這段程序后，將相應(yīng)的JSF標(biāo)簽轉(zhuǎn)換為HTML組件。

　　最后，讓我們來看看JSP是如何響應(yīng)JSF事件的。下面是一段響應(yīng)JSF事件的Java代碼。

public class TCChangedListener implements ValueChangeListener { 　public TCChangedListener() 　{ 　　super(); 　} 　// 事件處理 　public void processValueChange(ValueChangeEvent event) throws AbortProcessingException 　{ 　　UIComponent comp = event.getComponent(); 　　Object value = event.getNewValue(); 　　if (null != value) 　　{ 　　　float curVal = ((Number) value).floatValue(); 　　　Map values = comp.getAttributes(); 　　　if (curVal ＜ 0) 　　　{ 　　　　values.put("styleClass", "red"); 　　　} 　　　else 　　　{ 　　　　values.put("styleClass", "black"); 　　　} 　　} }

　　要想響應(yīng)JSF事件，必須要實(shí)現(xiàn)JSF庫(kù)中的ValueChangeListener接口。上面的程序要注意的是最后根據(jù)輸入的值來設(shè)置相應(yīng)的顏色。這些值并不依賴JSP。當(dāng)然，你也可以將它們?cè)O(shè)置成null，而由JSP 標(biāo)簽來設(shè)置它們的顏色。

JSP和JSF雙劍合并 打造完美Web應(yīng)用