javaServer Faces 概述

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

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

• Managed Bean 工具
• 驗證工具
• 豐富且可擴展的組件庫
• 插入式呈現工具包
• 對具體用戶事件響應的導航
• 跨請求保留應用程序狀態
• 轉換模型

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

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

使用 JavaServer Faces Technology 創建一個 JSP 頁面時，在服務器的內存中會建立一個組件樹，每一個組件標簽對應樹中的一個 UIComponent 實例。該框架使用組件樹來處理應用程序的請求并且創建一個呈現出的響應。當用戶生成一個事件時，例如，點擊了一個按鈕，JavaServer Faces 生命周期即處理該事件并且產生適當的響應。這是一個對大多數圖形用戶界面編程的表單而言而常見的一種的范例（paradigm）。

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

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

簡單的 JavaServer Faces Technology 應用程序

本文包含一個簡單的 JavaServer Faces 應用程序，它闡明了 JavaServer Faces Technology 的一些重要概念。為了理解該應用程序， 您應該已經熟悉了包括JSP、 Servlets 和標簽庫在內的基本的 J2EE Web 技術。

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

Character Combat 的組成如下：

• JSP 頁面，帶有表示 UI 的 JavaServer Faces 組件
  
• 容納模型數據的 backing bean
• 應用程序配置文件指定：
  • JavaServer Faces Controller Servlet
  • Managed Bean
  • 導航處理

上圖顯示了 Character Combat 演示應用程序中的頁面流：

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

您將注意到該工作流程符合“向導”UI 設計模式。我們已經將本例的向導功能提取到一個您自己的應用程序的一個簡單 bean 中。

運行應用程序

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

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

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

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

演示應用程序構建模塊

部署描述符

為了在 Web 應用程序中使用 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 相關的請求。

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

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

應用程序配置

所有 JavaServer Faces Technology 的具體配置信息都將進入像 faces-config.xml 這樣的應用程序配置文件中。在配置文件中可以定義 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 名稱和類之間創建了一個映射。該映射由 Managed Bean 創建工具使用。“modelBean”第一次被引用時，將創建模型對象并將它保存到適當的作用域中。本文的后面討論了 Model Bean bean。

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

構建應用程序

在演示源代碼發布中包含了一個預構建的 war 文件。您可以在 Web 容器中部署該 war 文件。

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

如果希望自己構建演示應用程序，您需要遵循如下步驟：

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

Character Combat 演示應用程序架構

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 應用程序的 JSP 頁面中被引用。下面是一個如何使用 bean 的例子：

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

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

對象模型

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

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

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

JSP 頁面

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

要使用包含組件的內建 JavaServer Faces 標簽庫，您需要在 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 標簽包含在 ... 標簽間，從而可以正確的建立組件樹。

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

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

DataTable

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

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

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

    
      
    

    
      
        
      
      
    

    
      
        
      
      
    
	...
  

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

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

既然 是一個 HTML 組件，它的樣式就可以使用樣式表來定制。在我們的例子中，我們為您展示如何為幾種不同的 屬性使用樣式特性。我們在 JSP 頁面標題中使用下面的代碼片斷來導入名為 “stylesheet.CSS” 的樣式表：

下面是呈現的 HTMLHere DataTable 的樣子：

PanelGrid

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

下面是一個兩列的表格的例子。在第一行定義了一個標題。第二行的第一列包含一個 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 標簽，更改所有尖括號的顯示為適當的 < 語法或者無更改地直接傳遞 標簽。 您也可以對該組件使用各種樣式表。

在整個示例應用程序中都使用了 OutputText 來顯示來自模型的數據。在本例中我們顯示了字符的名字：

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

SelectOneRadio

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

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

CommandButton

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

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

在下一節我們將討論動作，因為它們在導航處理中是非常重要的。

下面說明如何提交 RadioButtons 集合和 CommandButton 向導：

導航：示例向導組件

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

1. 在 Web 應用程序 UI 中包含該組件
2. 創造相應的導航規則

下面我們詳細介紹這些步驟。WizardButtons  Managed Bean 的細節超出了本文的討論范圍，但是基本上講，它有一些方法 可根據用戶在向導頁面流程中的當前位置來啟用或禁用 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);
  }
}