熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JSP和JSF合並打造完美Web應用

2013-11-15 11:56:59  來源: JSP教程 

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

  一什麼是JSF

  JSF和JSP是一對新的搭檔JSP是用於後台的邏輯處理的技術而JSF恰恰相反是使開發人員能夠快速的開發基於 Java 的 Web 應用程序的技術是一種表現層技術目前JSF已經正式作為一個標准加入了Java EE

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

  作為一種標准的技術JSF還得到了相當多工具提供商的支持同時我們也會有很多很好的免費開發工具可以使用前不久 Sun Java Studio Creator 和 Oracle JDeveloper g 作為免費的支持 JSF 的開發工具發布給 JSF 帶來了不小的生氣另外我們也有一些很優秀的商業開發工具可共選擇BEA Workshop (原 M NitroX)ExadelMyEclipse 這樣的基於 Eclipse 的插件開發工具為現在廣大的 Eclipse 用戶帶來了不小的便利IBM 的 Rational Application Developer 和 Borland 的 JBuilder 也是很不錯的支持 JSF 可視化開發的商業開發工具

  JSF和傳統的Web技術有著本質上的差別在傳統的Web技術需要用戶自己對浏覽器請求進行捕捉保存客戶端狀態並且手工控制著頁面的轉向等等而JSF的出現無疑給我們帶來了巨大的便利JSF 提供了事件驅動的頁面導航模型該模型使應用程序開發人員能夠設計應用程序的頁面流與 Struts 的方式向類似的是所有的頁面流信息都定義在 JSF 配置 XML 文件 (facesconfigxml) 中而非硬編碼在應用程序中這很大程度簡化了開發人員開發難度簡化了應用程序的開發

  同時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進行集成的標簽庫就相當於ASPNET的服務端組件JSF提供了非常豐富的標簽庫通過這些標簽庫可以生成各種客戶端模型如HTMLWMLXML以及JavaScript等通過這些標簽你可以很容易建立大規模的客戶端模型並由這些標簽自動處理客戶端請求

  接下來讓我們來看一個如何使JSF和JSP在一起工作的例子在JSF中有兩個庫第一個叫做內核庫在這個庫中包含了各種主要的標簽如配置組件管理事件驗證輸入信息等第二個庫的主要功能是將HTML和JSF的各種標簽相對應每一個JSF標簽都會對應一個HTML組件如UIInput標簽對應了HTML中的文本框或密碼框

  在JSF標簽中文本輸入框叫做inputText而密碼輸入庫叫inputSecret下面是一個簡單的JSF和JSP結合的用戶接口程序

  <%@ taglib uri="%>
<%@ taglib uri="%>
<html>
<head>
<meta HTTPEQUIV="ContentType" CONTENT="text/html;CHARSET=GB">
<title>第一個JSF程序</title>
</head>
<body>
 <f:view>
 <h:form id="simpleForm">
 <h:outputText id="favoriteLabel" value="請輸入一個數字"/>
 <h:inputText id="favoriteValue" value="#{simplelongValue}">
  <f:validateLongrange maximum="" minimum=""/>
 </h:inputText>
 <p/>
 <h:commandButton id="submit" value="提交" action="#{simplesimpleActionMethod}"/>
 </h:form>
 </f:view>
</body>
</html>

  在上面的代碼中我們可以了解到JSF是如何同JSP集成的我們首先可以看到一個內核標簽view然後是幾個JSF組件如formoutputTextinputText以及commandButton這幾個組件被放到form中從而開成了form中的一部分在程序的最開始必須使用import導入兩個標簽庫代碼如下

  <%@ taglib uri="%>
<%@ taglib uri="%>

  上面行代碼聲明了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="#{simplelongValue}">
<f:validateLongrange maximum="" minimum=""/>
</h:inputText>
<p/>
<h:commandButton id="submit" value="提交"
action="#{simplesimpleActionMethod}"/>
</h:form>
</f:view>

  </f:view>標簽預示著JSF的開始而它的下一個標簽form將建立一個HTML Form而outputText標簽相當於HTML中的label組件inputText標簽相當於HTML中的textField組件而commandButton標簽相當於HTML中的submit按鈕運行這個JSP程序將得到如圖所顯示效果

  
第一個JSF程序的運行結果

  三JSP如何響應JSF的請求

  從上面的例子我們已經知道如何在JSP中使用JSF了在這一部分讓我們來看看在JSF是如何處理請求的

  首先讓我們來看一個例子這個例子是將華氏度轉換為攝氏度當用戶點擊提交按鈕時程序將進行轉換

  <%@ taglib uri="%>
<%@ taglib uri="%>
<html>
<head>
 <meta HTTPEQUIV="ContentType" CONTENT="text/html;CHARSET=GB">
<title>溫度轉換程序</title>
</head>
<body>
 <f:view>
 <h:form>
 <div>
  <h:outputText id="fahrenheitLabel" value="請輸入華氏溫度"/>
  <span>
   <h:inputText id="temperature" value="#{tcfahrenheitTemp}">
   <f:validateDoublerange minimum="" maximum=""/>
   <f:valuechangeListener type="tempconvpageTCChangedListener"/>
  </h:inputText>
  </span>
 </div>
 <div>
  <h:outputText id="celsiusLabel" value="攝氏溫度"/>
  <span>
   <h:outputText id="celsiusValue" value="#{tccelsiusTemp}">
   <f:convertNumber maxFractionDigits="" type="number"/>
  </h:outputText>
  </span>
 </div>
 <div>
  <h:commandButton value="轉換" action="#{tcconvert}">
  </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="#{tcfahrenheitTemp}">
 <f:validateDoublerange minimum="" maximum=""/>
 <f:valuechangeListener type="tempconvpageTCChangedListener"/>
</h:inputText>

  inputText標簽根據相應的值設置了id和value的屬性在JSF中是通過setAttribute(String name Object value)設置每一個屬性值的但我們需要注意的是JSF標簽可以指定相應的默認值這有些類似java中的系統屬性如果你給了一個屬性名子那系統將返回這個屬性的值如果指定它的默認值並且這個屬性不存在的話將返回這個默認值

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

  <f:valuechangeListener type="tempconvpageTCChangedListener"/>

  在JSF中事件處理是由valuechangeListener標簽完成的這個標簽所表示的事件在文本框的值發生變化時引發事件但有意思的是這個事件並不馬上提交而是要等到用戶點擊"提交"按鈕後這個事件連同相應的數據才提交給後端因此這個事件請求也叫做預提交最後讓我們看看UICommand的代碼實現

  <div>
 <h:commandButton value="轉換" action="#{tcconvert}">
 </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 = eventgetComponent();
  Object value = eventgetNewValue();
  if (null != value)
  {
   float curVal = ((Number) value)floatValue();
   Map values = compgetAttributes();
   if (curVal < )
   {
    valuesput("styleClass" "red");
   }
   else
   {
    valuesput("styleClass" "black");
   }
  }
}

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


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19954.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.