萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JSP和JSF合並打造完美Web應用

JSP和JSF合並打造完美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程序,將得到如圖1所顯示效果。


圖1 第一個JSF程序的運行結果

  三、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,因

copyright © 萬盛學電腦網 all rights reserved