Java在最近幾年逐漸升溫，隨著Java SE 5和Java SE 6的推出，Java的未來更顯得無比輝煌。但以Java為基礎的JSP在Java SE 5推出之前卻一直抬不起頭來，這最重要的原因就是JSP雖然功能十分強大，但最大的優點也是它的最大缺點，功能強大就意味著複雜，尤其是設計前端介面的視覺化工具不多，也不夠強大。因此，設計JSP頁面就變得十分複雜和繁瑣...
Java在最近幾年逐漸升溫，隨著Java SE 5和Java SE 6的推出，Java的未來更顯得無比輝煌。但以Java為基礎的JSP在Java SE 5推出之前卻一直抬不起頭來，這最重要的原因就是JSP雖然功能十分強大，但最大的優點也是它的最大缺點，功能強大就意味著複雜，尤其是設計前端介面的視覺化工具不多，也不夠強大。因此，設計JSP頁面變得十分複雜和繁瑣。不過，在Java SE 5推出的同時，Sun為了簡化JSP的開發難度，推出了新的JavaServer Faces(簡稱JSF)規格。從而使JSP走上了康莊大道。
一、什麼是JSF
JSF和JSP是一對新的搭檔。 JSP是用於後台的邏輯處理的技術，而JSF則恰恰相反，是使開發人員能夠快速的開發基於Java 的Web 應用程式的技術，是一種表現層技術。目前，JSF1.2已經正式作為一個標準加入了Java EE 5。
作為一種高度組件化的技術，開發人員可以在一些開發工具的支援下，實作拖曳式編輯操作，使用者只需要簡單的將JSF 元件拖曳到頁面上，就可以輕鬆的進行Web 開發了。這是其作為一種組件化的技術所具有的最大好處，我們能使用的組件不光是一些比較簡單的輸入框之類，還有更多複雜的組件可以使用的，比如DataTable 這樣的表格組件， Tree 這樣的樹狀元件等等。
作為一種標準的技術，JSF也得到了相當多工具提供者的支援。同時我們也會有很多很好的免費開發工具可以使用，前不久Sun Java Studio Creator 2 和Oracle JDeveloper 10g 作為免費的支援JSF 的開發工具發布，給JSF 帶來了不小的生氣。另外我們也有一些很優秀的商業開發工具可共選擇，BEA Workshop (原M7 NitroX)，Exadel，MyEclipse 這樣的基於Eclipse 的插件開發工具，為現在廣大的Eclipse 用戶帶來了不小的便利，IBM 的Rational Application Developer 和Borland 的JBuilder 也是很不錯的支援JSF 視覺化開發的商業開發工具。
JSF和傳統的網路技術有著本質上的差別，在傳統的網路技術需要使用者自己對瀏覽器請求進行捕捉，保存客戶端狀態，並且手工控制著頁面的轉向，等等。而JSF的出現，無疑為我們帶來了巨大的便利，JSF 提供了事件驅動的頁面導航模型，該模型使應用程式開發人員能夠設計應用程式的頁面流。與Struts 的方式向類似的是，所有的頁面流程資訊都定義在JSF 設定XML 檔案(faces-config.xml) 中，而非硬編碼在應用程式中。這很大程度上簡化了開發人員開發難度，簡化了應用程式的開發。
同時JSF也是遵循模型-視圖－控制器(MVC) 模式的框架。實作了視圖程式碼(View)與應用程式邏輯(Model)的完全分離，使得使用JSF 技術的應用程式能夠很好的實作頁面與程式碼的分離。所有對JSF 頁面的請求都會透過一個前端控制器(FacesServlet) 處理，系統會自動處理使用者的請求，並將結果傳回給使用者。這和傳統的MVC 框架並沒有太大的差別。
在JSF中不僅使用了POJO 技術，而且還使用了類似Spring 的控制反轉(IoC) (或稱為依賴注入-DI) 技術，在JSF 的Backing Bean 中，我們可以把視圖所需的資料和操作放進一個Backing Bean 中。同時得益於JSF 使用的DI 技術，我們可以在設定檔中初始化Managed Bean，同時我們也可以透過這樣的技術很方便的和使用類似技術的Spring 進行整合。
二、如何在JSP中使用JSF
JSF只有透過和JSP結合，才能充分發揮它的功效。 JSF是透過標籤庫和JSP進行整合的。標籤庫就相當於ASP.NET的服務端元件。 JSF提供了非常豐富的標籤庫，透過這些標籤庫，可以產生各種客戶端模型，如HTML、WML、XML以及JavaScript等。透過這些標籤，你可以輕鬆建立大規模的客戶端模型，並由這些標籤自動處理客戶端請求。
接下來讓我們來看一個如何讓JSF和JSP在一起運作的例子。在JSF中有兩個庫。第一個叫做內核庫，在這個庫中包含了各種主要的標籤，如組態元件、管理事件、驗證輸入資訊等。第二個函式庫的主要功能是將HTML和JSF的各種標籤相對應。每一個JSF標籤都會對應一個HTML元件。如UIInput標籤對應了HTML中的文字方塊或密碼方塊。
在JSF標籤中文字輸入框叫做inputText，而密碼輸入庫叫inputSecret。下面是一個簡單的JSF和JSP結合的使用者介面程式。
＜%@ 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＞第一個JSF程式＜/title＞ ＜/title＞第一個JSF程式＜/title＞
＜/頭＞
＜body＞
＜f:view＞
＜h:form id="simpleForm"＞
＜h:outputText id="favoriteLabel" value="請輸入一個數字："/＞
＜h:inputText id="fariteValue" 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整合的。我們首先可以看到一個核心標籤：view。然後是幾個JSF組件。如form、outputText、inputText以及commandButton。這幾個元件被放到form中從而開成了form中的一部分。在程式的最開始，必須使用import導入兩個標籤庫。代碼如下。
＜%@ taglib uri=" http://java.sun.com/jsf/html " prefix="h" %＞
＜%@ taglib uri=" http://java.sun.com/jsf/core " prefix ="f" %＞
上面2行程式碼聲明了JSP中要使用哪一個JSF標籤庫。核心庫使用前綴（prefix）f聲明，而HTML庫使用前綴(prefix)h聲明。這兩個前綴並不是必須要使用，而只是一個建議。在程式中，核心庫必須要使用，因為view在所有的JSF頁中必須使用。而HTML標籤在運行時將JSF標籤轉換為HTML元件，這個h前綴並不是必須的，而是JSF規範推薦使用的，這樣，我們讓我們的JSF程式更易讀。
在聲明後是幾行標準的HTML語句，本文不再詳述。從＜f:view＞開始，是一段JSF語句。這段程式碼如下：
＜f:view＞
＜h:form id="simpleForm"＞
＜h:outputText id="favoriteLabel" value="請輸入一個數字："/＞
＜h:inputText id="favoriteValueValue " value="#{simple.longValue}"＞
＜f:validateLongrange maximum="30" minimum="0"/＞
＜/h:inputText＞
＜p/＞
＜h:commandButton id="submit" value="提交"
action="#{simple.simpleActionMethod}"/＞
＜/h:form＞
＜/f:view＞
＜/f:view＞標籤預示著JSF的開始，而它的下一個標籤form將建立一個HTML Form。而outputText標籤相當於HTML中的label元件。 inputText標籤相當於HTML中的textField元件。而commandButton標籤相當於HTML中的submit按鈕。運行這個JSP程序，將得到如圖1所顯示效果。
三、JSP如何回應JSF的請求
從上面的例子我們已經知道如何在JSP中使用JSF了，在這一部分讓我們來看看在JSF是如何處理請求的。
首先讓我們來看一個例子，這個例子是將華氏度轉換為攝氏度。當使用者點擊提交按鈕時程式將進行轉換。
＜%@ 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＞ 溫度轉換程式＜/title＞
＜
＞＞＞＞
body＞
＜f:view＞
＜h:form＞
＜div＞
＜h:outputText id="fahrenheitLabel" value="
請輸入華氏溫度："/＞
＜span＞
＜h:inputText id="temper"#{tc.fahrenheitTemp}"＞
＜f:validateDoublerange minimum="-100.0" maximum="100.0"/＞
＜
f:valuechangeener type="tempconv.page.TCChangedListener"/f:valuechange/h:type="tempconv.page.TCChangedListener"/
＞/inin
＜/div＞
＜div＞
＜h:outputText id="celsiusLabel" value="攝氏溫度："
/＞
＜span＞
＜h:outputText id="celsiusValue" value="#{tc.celsius"Temp}"＞
:convertNumber maxFractionDigits="3" type="number"/＞
＜/h:outputText＞
＜/span＞
＜/div＞
＜div＞
＜h:commandButc value="轉換" ＂="#{.convert}" ＞
＜/h:commandButton＞
＜/div＞
＜/h:form＞
＜/f:view＞
＜/body＞
＜/html＞
在程式的前兩行是導入JSF核心庫和HTML庫，這個在前面已經討論過，在這裡不再詳述。
下面讓我們來看看JSF標籤是如何在同後端進行互動的。由於我們是在JSP中使用JSF，因此，這個和正常的JSP沒有什麼區別；JSP實際上就是Servlet，在JSP第一次運行時由JSP編譯器將.JSP檔編譯成Servlet後再由Servlet調用，然後由Servlet來接收客戶傳過來的資料流。但和一般的JSP程式不同的是，JSF標籤是由JSF API負責呼叫的（這樣可以做到邏輯層和表現層分離），除此之外，它們和一般的JSP標籤沒有任何區別。
當UIComponent標籤收到doStartTag方法時，JSF將使用這些屬性來設定標籤的值。如本例中的inputText標籤將會按它的屬性值來設定。下面是JSF的程式碼片段。
＜h:inputText id="temperature" value="#{tc.fahrenheitTemp}"＞
＜f:validateDoublerange minimum="-100.0" maximum="100.0"/＞
＜f:valueListListener /＞
＜/h:inputText＞
inputText標籤根據對應的值設定了id和value的屬性。在JSF中是透過setAttribute(String name, Object value)設定每一個屬性值的。但我們要注意的是JSF標籤可以指定對應的預設值。這有些類似java中的系統屬性，如果你給了一個屬性名子，那麼系統將會傳回這個屬性的值，如果指定它的預設值，而這個屬性不存在的話，將會回傳這個預設值。
接下來讓我們來看看上面程式的最重要的部分，也就是UIInput元件的事件處理。
＜f:valuechangeListener type="tempconv.page.TCChangedListener"/＞
在JSF中事件處理是由valuechangeListener標籤完成的。這個標籤所表示的事件在文字方塊的值改變時引發事件。但有趣的是這個事件並不會馬上提交，而是要等到使用者點擊"提交"按鈕後這個事件連同對應的資料才提交給後端。因此，這個事件請求也叫做預提交。最後，讓我們看看UICommand的程式碼實作。
＜div＞
＜h:commandButton value="轉換" action="#{tc.convert}"＞
＜/h:commandButton＞
＜/div＞
上面的程式碼將convert()方法和UICommand連接了起來，也就是說，點擊"提交"按鈕後，將執行convert()方法。在遇到view標籤後，JSF程式結果，JSFAPI最後呼叫doEnd方法來結束JSF程式。 JSF引擎在解析這段程式後，將對應的JSF標籤轉換為HTML元件。
最後，讓我們來看看JSP是如何回應JSF事件的。下面是一段回應JSF事件的Java程式碼。
public class TCChangedListener implements ValueChangeListener
{
public TCChangedListener()
{
super
();
}
// 事件處理
public void processValueChange(ValueChangeEvent event)
throws AbortProcessingException
{
UIComponent comp =
event.get
null != value)
{
float curVal = ((Number) value).floatValue();
Map values = comp.getAttributes();
if (curVal ＜ 0)
{
values.put("styleClass", "red");
}
else
{
values.put("styleClass", "black");
}
}
}
要回應JSF事件，必須實作JSF函式庫中的ValueChangeListener介面。上面的程式要注意的是最後根據輸入的值來設定對應的顏色。這些值並不依賴JSP。當然，你也可以將它們設定成null，而由JSP 標籤來設定它們的顏色.