javaServer Faces 概述

JavaServer Faces 1.0 Framework 使您可輕松創(chuàng)建強大和動態(tài)的 Web 應(yīng)用程序。市場上有許多可用的 Web 用戶界面框架，但是 JavaServer Faces Technology 由于以下幾種原因而脫穎而出：它是一個 Java Community PRocess 標(biāo)準(zhǔn)；它為 Web UI 編程引入了 JavaBeans 組件范例；并且它的構(gòu)建采用了許多已有架構(gòu)的優(yōu)點。作為一個標(biāo)準(zhǔn)，許多工具供應(yīng)商可以受益于嚴(yán)格定義且一致的行為。JavaServer Faces Technology 的設(shè)計理念是一開始就在工具內(nèi)部使用。用戶也可以受益于不同 JavaServer Faces 技術(shù)實現(xiàn)之間的一致且明確的行為。

在 JavaServer Faces Technology 中提供了很多有用的特性。需要著重介紹的一些主要功能包括：

• Managed Bean 工具
• 驗證工具
• 豐富且可擴展的組件庫
• 插入式呈現(xiàn)工具包
• 對具體用戶事件響應(yīng)的導(dǎo)航
• 跨請求保留應(yīng)用程序狀態(tài)
• 轉(zhuǎn)換模型

本文將簡要介紹 JavaServer Faces Technology 的這些功能并且給出一些例子。
關(guān)于這些功能的詳細(xì)信息和 JavaServer Faces Technology 提供的其他功能，請參考 J2EE  指南的 JavaServer Faces Technology 的相關(guān)章節(jié)（第 17－21 章）。

JavaServer Faces 應(yīng)用程序?qū)嵸|(zhì)上是一個運行在一個與 Java(TM) 2 Platform, Enterprise Edition (J2EE(TM) platform) 兼容的容器中的 Servlet 或者 Java Server Pages(jsp) 應(yīng)用程序。這說明它需要 Java Servlet 2.3 和 JSP 1.2 或者更新的版本。 開始創(chuàng)建和配置一個 JavaServer Faces 應(yīng)用程序的最好的方法是免費下載Java 2 Software Development Kit, Standard Edition (J2SE SDK) 1.4 或者更高版本。需要指出的是，JavaServer Faces Technology 不要求在應(yīng)用程序中使用 JSP 頁面，您可以自由選擇直接使用 Servlets 或者其他模板技術(shù)。如果確實對 JSP 容器使用了 JavaServer Faces Technology，您將通過 JavaServer Faces 的客戶組件標(biāo)簽從內(nèi)建的 JavaServer Faces 內(nèi)核和 Html 組件庫中受益。JavaServer Faces 組件代表像文本字段、表單、按鈕、表格、復(fù)選框等的 Web 控件。

使用 JavaServer Faces Technology 創(chuàng)建一個 JSP 頁面時，在服務(wù)器的內(nèi)存中會建立一個組件樹，每一個組件標(biāo)簽對應(yīng)樹中的一個 UIComponent 實例。該框架使用組件樹來處理應(yīng)用程序的請求并且創(chuàng)建一個呈現(xiàn)出的響應(yīng)。當(dāng)用戶生成一個事件時，例如，點擊了一個按鈕，JavaServer Faces 生命周期即處理該事件并且產(chǎn)生適當(dāng)?shù)捻憫?yīng)。這是一個對大多數(shù)圖形用戶界面編程的表單而言而常見的一種的范例（paradigm）。

FacesServlet 是進(jìn)入 JavaServer Faces 框架的入口點。它處理請求處理生命周期并且用作一個前端控制器。JavaServer Faces Technology 也有保存重要請求信息的上下文的概念。上下文對象被稱為 FacesContext 。在 JavaServer Faces Technology 生命周期的每個階段上下文對象都被修改并且每次請求時都是有效的。

JavaServer Faces Technology 框架也有“值綁定”和“方法綁定表達(dá)式”的概念。如果熟悉了像 JSP Standard Tag Library (JSTL) 或者 JSP 2.0 這樣的技術(shù)，您就已經(jīng)熟悉了表達(dá)式語言的概念。JavaServer Faces Technology 綁定表達(dá)式使您可以容易地和底層數(shù)據(jù)模型交互。Character Combat 演示應(yīng)用程序舉例說明了如何使用“值綁定”從數(shù)據(jù)模型中提取值。

簡單的 JavaServer Faces Technology 應(yīng)用程序

本文包含一個簡單的 JavaServer Faces 應(yīng)用程序，它闡明了 JavaServer Faces Technology 的一些重要概念。為了理解該應(yīng)用程序， 您應(yīng)該已經(jīng)熟悉了包括JSP、 Servlets 和標(biāo)簽庫在內(nèi)的基本的 J2EE Web 技術(shù)。

示例應(yīng)用程序后的基本想法是讓用戶參加一個快速有趣的游戲。您是否想知道如果從《指環(huán)王》中取兩個人物并使它們互相打斗會發(fā)生什么？示例應(yīng)用程序以一種簡單有趣的方式回答了這個問題。 該應(yīng)用程序的名稱是 Character Combat 。

Character Combat 的組成如下：

• JSP 頁面，帶有表示 UI 的 JavaServer Faces 組件
  
• 容納模型數(shù)據(jù)的 backing bean
• 應(yīng)用程序配置文件指定：
  • JavaServer Faces Controller Servlet
  • Managed Bean
  • 導(dǎo)航處理

上圖顯示了 Character Combat 演示應(yīng)用程序中的頁面流：

• 在首頁面，用戶可以進(jìn)行如下操作：
  • 添加更多字符
  • 直接轉(zhuǎn)到下一頁面
• 在第二頁面，用戶可以進(jìn)行如下操作：
  • 返回到首頁面并添加更多字符
  • 選定戰(zhàn)斗的第一個參與者
  • 轉(zhuǎn)到第三頁面
• 在第三頁面，用戶可以進(jìn)行如下操作：
  • 返回到第二頁面
  • 選定戰(zhàn)斗的第二個參與者
  • 轉(zhuǎn)到尾頁面
• 在尾頁面，用戶可以進(jìn)行如下操作：
  • 查看戰(zhàn)斗結(jié)果
  • 返回到第三頁面
  • 重新開始演示應(yīng)用程序

您將注意到該工作流程符合“向?qū)А盪I 設(shè)計模式。我們已經(jīng)將本例的向?qū)Чδ芴崛〉揭粋€您自己的應(yīng)用程序的一個簡單 bean 中。

運行應(yīng)用程序

最新的 JavaServer Faces Technology 1.0 Framework 和其他所有運行時用到的附屬程序已經(jīng)集成到 Sun Java System application Server Platform Edtion 8 中。您不需要在 Application Server 中進(jìn)行任何額外的配置步驟來設(shè)置一個 JavaServer Faces web 應(yīng)用程序。Application Server 是免費的，它包含了 J2EE 技術(shù)最新的實現(xiàn)。如果您下載了 J2EE 1.4 SDK， 其中已經(jīng)包含了 Application Server。

如果編寫自己的 JavaServer Faces web 應(yīng)用程序，要使用 JavaServer Faces Technology 1.0 框架，唯一需要 您在應(yīng)用程序服務(wù)器中做的事情是指定 FacesServlet 實例并映射您的 Web 應(yīng)用程序的部署描述符。所有附屬文件已經(jīng)是容器的一部分，您不需要綁定任何額外的 JAR 文件。

要運行本文中討論的示例程序，只需要簡單地將所提供的配置 war 文件部署在應(yīng)用程序服務(wù)器中就可以了。通過使用上下文名稱 “jsf-characterCombat” 就可以使用應(yīng)用程序。除了一個預(yù)先構(gòu)建的 war 文件，還提供了演示源代碼。在與源代碼一起發(fā)行的 README 中您將找到如何配置和構(gòu)建的指示。

通過遵照 java.net 上的關(guān)于新建 javaserverfaces 項目的 FAQ 中的指示，可以訪問本演示的源代碼：

演示應(yīng)用程序構(gòu)建模塊

部署描述符

為了在 Web 應(yīng)用程序中使用 JavaServer Faces 框架，需要在部署描述符中定義 FacesServlet 和一個 FacesServlet 映射。下面是一個例子：

<!-- Faces Servlet -->
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>


  <!-- Faces Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>


  
 

FacesServlet 實例作為 JavaServer Faces Technology 框架中的一個前端控制器。它處理所有與 JavaServer Faces Technology 相關(guān)的請求。

在上面的例子中使用了擴展名映射。使用擴展名映射，Web 容器會將所有請求發(fā)送到 Faces Servlet，以獲取擴展名如“*.faces”的 頁面。

您也可以使用前綴映射來映射到 FacesServlet 實例。例如，您可以使所有名字以“/faces/*”為前綴的 Web 頁面通過 FacesServlet 實例。

應(yīng)用程序配置

所有 JavaServer Faces Technology 的具體配置信息都將進(jìn)入像 faces-config.xml 這樣的應(yīng)用程序配置文件中。在配置文件中可以定義 Managed Bean、Navigation Rule、Converter 和 Validator 等。

下面是配置文件中的一個條目的例子：

  

  <faces-config>

    <managed-bean>
      <managed-bean-name>modelBean</managed-bean-name>
      <managed-bean-class>
        characterCombat.ModelBean
      </managed-bean-class>
      <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

  </faces-config>

該條目在一個 bean 名稱和類之間創(chuàng)建了一個映射。該映射由 Managed Bean 創(chuàng)建工具使用。“modelBean”第一次被引用時，將創(chuàng)建模型對象并將它保存到適當(dāng)?shù)淖饔糜蛑小１疚牡暮竺嬗懻摿?Model Bean bean。

還有更多的配置選項，在 JavaServer Faces Technology 1.0 規(guī)范您可以找到完整的配置選項集。

構(gòu)建應(yīng)用程序

在演示源代碼發(fā)布中包含了一個預(yù)構(gòu)建的 war 文件。您可以在 Web 容器中部署該 war 文件。

注意該 war 文件包含了一個 JSTL 1.1 實現(xiàn)。如果您的 Web 容器不支持 JSTL 1.1，那么您需要用一個 JSTL 1.0 實現(xiàn)重新構(gòu)建 war 文件。

如果希望自己構(gòu)建演示應(yīng)用程序，您需要遵循如下步驟：

1. 在試圖建立演示應(yīng)用程序之前，確保擁有所有的編譯時附屬文件。演示應(yīng)用程序提供了一個“build.properties.sample”文件。復(fù)制該文件并將其重新命名為“build.properties”并且進(jìn)行更改使之適合您的環(huán)境。
   
2. 如果您正在使用 Application Server or the J2EE 1.4 SDK, JavaServer Faces Technology 1.0 Framework 和運行一個 JavaServer Faces 應(yīng)用程序的所需的全部附屬文件已經(jīng)是您的環(huán)境的一部分了。唯一需要做的事情是在您的“build.properties”文件中修改 SJSAS PE 8.0 安裝位置。
   
3. Character Combat 演示應(yīng)用程序提供了一個 “build.xml”文件。該文件包含了一組建立演示應(yīng)用程序 web 檔案的規(guī)則和目標(biāo)。要構(gòu)建應(yīng)用程序您還需要 Ant。Ant 已經(jīng)是 SJSAS PE 8.0 發(fā)行的一部分，它位于/bin/asant 中。
   
4. 要使用 SJSAS PE 8.0 容器來建立演示應(yīng)用程序，只需要在您的解包的 Character Combat demo 目錄中調(diào)用“asant”，您的“build.xml” 和定制的“build.properties”文件也在這個目錄中。

Character Combat 演示應(yīng)用程序架構(gòu)

Managed Bean

  
   <managed-bean>
    <managed-bean-name>
      modelBean
    </managed-bean-name>
    <managed-bean-class>
      characterCombat.ModelBean  
    </managed-bean-class>
    <managed-bean-scope>
      session
    </managed-bean-scope>
  </managed-bean>
  

那個 bean 后來在 Web 應(yīng)用程序的 JSP 頁面中被引用。下面是一個如何使用 bean 的例子：

   <h:inputText value="#{modelBean.customName}" />   

其中是一個嵌套在表單中的文本字段組件。當(dāng)表單被提交時，文本字段中的值將作為“customName” 屬性保存在 ModelBean 中。“＃{”和“}”指定使用一個“值綁定”表達(dá)式。該值綁定表達(dá)式告訴框架 “customNameThe” 是一個 JavaBean 屬性，它在“modelBean”關(guān)鍵字下 的Model Data 中定義。根據(jù) WEB-INF/faces-config.xml 配置文件，框架的 Managed Bean 工具知道了類映射的 bean 名，并且如果 bean 不存在就初始化該 bean。

對象模型

Character Combat 例子創(chuàng)建了一個 ModelBean 對象。與其他 JavaBeans 組件一樣，ModelBean 包含了一組訪問方法。它也預(yù)置了一個 默認(rèn)的字符表，同時也存儲用戶定制的字符。

ModelBean 是使用 Managed Bean 創(chuàng)建工具創(chuàng)建的，并且由在視圖中定義的 JavaServer Faces 組件通過名字引用。ModelBean 說明了如何使用 bean 來保存組件的值。

在本例中只支持添加新字符。通過更改模型和視圖來支持該功能，對程序的良好擴展可以支持刪除功能。

JSP 頁面

JSP 頁面為 Web 應(yīng)用程序提供 UI。JavaServer Faces Technology 提供兩個 JSP 標(biāo)簽庫，它們將組件展現(xiàn)給頁面的作者。您可以定制這些組件或者創(chuàng)建自己的組件。標(biāo)準(zhǔn)組件作為基本 HTML 4.01 組件呈現(xiàn)，使得 javascript 絕對最小。這確保您的頁面在所有的瀏覽器中按期望的樣子顯示。如果您需要對其他呈現(xiàn)類型 （如 WML 或 SVG 等）的支持，JavaServer Faces Technology 包含了一個 RenderKit 的概念，它是一個軟件模塊，組件使用它可以將自己呈現(xiàn)到特定的客戶設(shè)備類型中。

要使用包含組件的內(nèi)建 JavaServer Faces 標(biāo)簽庫，您需要在 JSP 頁面中包含下面的指令：

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ 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/html" prefix="h" %>

注意您的 JavaServer Faces 頁面需要所有的 JavaServer Faces 標(biāo)簽包含在 ... 標(biāo)簽間，從而可以正確的建立組件樹。

每一個 HTML 組件都可以使用樣式表來定制。您可以指定一個一般的 styleClass 或者為組件設(shè)置特定的樣式屬性值。

下面是一些用來說明上面的概念的 Character Combat 應(yīng)用程序中的一些例子，：

DataTable

DataTable UIComponent 可以處理幾種不同類型的數(shù)據(jù)模型，其中包括 java.util.List 和java.sql.ResultSet。它提取數(shù)據(jù)并將數(shù)據(jù)顯示在一個可定制的表格中。該組件也可以使用樣式表來定制。

在 Character Combat 演示應(yīng)用程序中，使用 List 作為底層數(shù)據(jù)模型。下面是一個代碼片斷：

                 headerClass=  "list-header"
               styleClass=   "list-background"
               value=        "#{modelBean.dataList}"
               var=          "character" >

    
      
    

    
      
        
      
      
    

    
      
        
      
      
    
	...
  

正如您在本例中所見到的，根據(jù)在標(biāo)簽中的定義，#{modelBean.dataList} 對保存在 “character” 變量中的字符條目列表進(jìn)行求值。對于列表中的每個字符都創(chuàng)建一個新行并且根據(jù)相應(yīng)的 tags 標(biāo)簽進(jìn)行顯示。

標(biāo)簽在包含在 facet 中的組件和它的父組件之間創(chuàng)建了一種特殊的關(guān)系。這種特殊關(guān)系使您可定義組件為標(biāo)題或者頁腳。在我們的例子中，我們使用 facet 來為列創(chuàng)建標(biāo)題。

既然 是一個 HTML 組件，它的樣式就可以使用樣式表來定制。在我們的例子中，我們?yōu)槟故救绾螢閹追N不同的 屬性使用樣式特性。我們在 JSP 頁面標(biāo)題中使用下面的代碼片斷來導(dǎo)入名為 “stylesheet.CSS” 的樣式表：

下面是呈現(xiàn)的 HTMLHere DataTable 的樣子：

PanelGrid

對于簡單的表格布局您可以使用組件。不像 DataTable 組件，PanelGrid 不接受任何底層數(shù)據(jù)模型。

下面是一個兩列的表格的例子。在第一行定義了一個標(biāo)題。第二行的第一列包含一個 InputText 字段，第二列包含了一個列表的下拉選項：

       <h:panelGrid columnClasses="list-column-center,
                              list-column-center"
               headerClass=  "list-header"
               styleClass=   "inputList-background"
               columns=      "2">

    <f:facet name="header">
      <h:outputText value="Customize Character:"/>
    </f:facet> 
    <h:inputText value="#{modelBean.customName}" />
    <h:selectOneListbox value="#{modelBean.customSpecies}"
      required="true" size="1" >
      <f:selectItems value="#{modelBean.speciesOptions}"/> 
    </h:selectOneListbox>

  </h:panelGrid>
    

  

InputText

InputText 組件是一種用來得到用戶提交的信息的方法。在我們的例子中，我們通過如下指定值屬性將文本字段和模型連接起來：

     <h:inputText value="#{modelBean.customName}" />  

InputText 嵌套在一個表單中。一旦表單被提交，字段中的值就會映射到我們的模型中。

在下面的圖像中，您可以看到 PanelGrid 布局組件中的一個 InputText、一個 CommandButtons 集合和一個 ListBox 的組合：

OutputText

OutputText 組件可以以不同的方式顯示信息。例如，您可以將它配置為跳過 HTML 標(biāo)簽，更改所有尖括號的顯示為適當(dāng)?shù)?< 語法或者無更改地直接傳遞 標(biāo)簽。 您也可以對該組件使用各種樣式表。

在整個示例應(yīng)用程序中都使用了 OutputText 來顯示來自模型的數(shù)據(jù)。在本例中我們顯示了字符的名字：

   <h:outputText value="#{character.name}"/>   

SelectOneRadio

您可以使用 SelectOneRadio 來顯示一個單選按鈕選擇集合。您可以包含一組單選選項和嵌套的選項組。下面是在我們的例子中使用 SelectOneRadio 的方法：

Layout 屬性告訴 組件垂直布局而不是默認(rèn)的水平布局。我們的 ModelBean“charactersToSelect” 方法返回一個 SelectItems 的列表，SelectOneRadio 知道如何顯示它們。該單選組件嵌套在一個表單中。當(dāng)表單被提交時，選中的單選項就會保存在模型的“currentSelection”屬性中。

CommandButton

CommandButton 是一個輸入組件，它可以創(chuàng)建 Action Event（動作事件）。您可以創(chuàng)建動作監(jiān)聽器來監(jiān)聽用戶在瀏覽您的 JavaServer Faces web 應(yīng)用程序時的特定的事件。您也可以為一個應(yīng)用程序動作提供一個動作方法綁定，當(dāng)選中組件時激活它。本例中我們使用了后者：

        
  <h:commandButton actionListener="#{modelBean.addCustomName}" 
                   value="Add Name"/>

在下一節(jié)我們將討論動作，因為它們在導(dǎo)航處理中是非常重要的。

下面說明如何提交 RadioButtons 集合和 CommandButton 向?qū)В?

導(dǎo)航：示例向?qū)ЫM件

要使用該組件用戶必須做兩件事情：

1. 在 Web 應(yīng)用程序 UI 中包含該組件
2. 創(chuàng)造相應(yīng)的導(dǎo)航規(guī)則

下面我們詳細(xì)介紹這些步驟。WizardButtons  Managed Bean 的細(xì)節(jié)超出了本文的討論范圍，但是基本上講，它有一些方法 可根據(jù)用戶在向?qū)ы撁媪鞒讨械漠?dāng)前位置來啟用或禁用 next 和 back 按鈕。

在 UI 中包含按鈕

    <jsp:include page="wizard-buttons.jsp"/>  

<%@ page contentType="text/html" language="java" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ page contentType="text/html" language="java" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

  <f:subview id="wizard-buttons">

    <h:panelGrid columns="2">

      <h:commandButton value="< Back" action="back"
                       disabled="#{wizardButtons.hasBack}" />

      <h:commandButton value="#{wizardButtons.nextLabel}"
                       action="next"
                       disabled="#{wizardButtons.hasNext}"/>

    </h:panelGrid>

  </f:subview>


  

  
   <navigation-rule>
    <from-view-id>/main.jsp</from-view-id>
    <navigation-case>
      <description>
        If the action returns "next", goto
        firstSelection.jsp
      </description>
      <from-outcome>next</from-outcome>
      <to-view-id>/firstSelection.jsp</to-view-id>
    </navigation-case>
  </navigation-rule>

  <navigation-rule>
    <from-view-id>/firstSelection.jsp</from-view-id>
    <navigation-case>
      <description>
        If the action returns "next", goto
        secondSelection.jsp
      </description>
      <from-outcome>next</from-outcome>
      <to-view-id>/secondSelection.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
      <description>
        If the action returns "back", goto
        main.jsp
      </description>
      <from-outcome>back</from-outcome>
      <to-view-id>/main.jsp</to-view-id>
    </navigation-case>
  </navigation-rule>  

                  <h:commandButton actionListener="#{modelBean.addCustomName}"  
                   value="Add Name"/>

public void addCustomName(ActionEvent event) throws 
  AbortProcessingException {

  if ((customName != null) && (!customName.trim().equals(""))) {
    customName = customName.trim();

    //check to see if name already exists in list
    Iterator iter = dataList.iterator();
    while (iter.hasNext()) {
      CharacterBean item = (CharacterBean) iter.next();
      if (item.getName().equals(customName)) {
        reset();
        return;
      }
    }

    //create new entry
    CharacterBean item = new CharacterBean();
    item.setName(customName);
    item.setSpecies((SpeciesBean)
    speciesPropertyMap.get(customSpecies));
    dataList.add(item);
  }
}