JSP和JSF雙劍合并 共同打造完美Web應用

來源:互聯網
上載者:User
js|web

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和傳統的Web技術有著本質上的差別,在傳統的Web技術需要使用者自己對瀏覽器請求進行捕捉,儲存用戶端狀態,並且手工控制著頁面的轉向,等等。而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></head><body> <f:view> <h:form id="simpleForm"> <h:outputText id="favoriteLabel" value="請輸入一個數字:"/> <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整合的。我們首先可以看到一個核心標籤: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="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>

</f:view>標籤預示著JSF的開始,而它的下一個標籤form將建立一個HTML Form。而outputText標籤相當於HTML中的label組件。inputText標籤相當於HTML中的textField組件。而commandButton標籤相當於HTML中的submit按鈕。

三、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></head><body> <f:view> <h:form> <div>  <h:outputText id="fahrenheitLabel" value="請輸入華氏溫度:"/>  <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="轉換" action="#{tc.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:valuechangeListener type="tempconv.page.TCChangedListener"/>

</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.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");   }  }}

要想響應JSF事件,必須要實現JSF庫中的ValueChangeListener介面。上面的程式要注意的是最後根據輸入的值來設定相應的顏色。這些值並不依賴JSP。當然,你也可以將它們設定成null,而由JSP 標籤來設定它們的顏色。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。