JSF 2 簡介，第 3 部分: 事件處理、JavaScript 和 Ajax

使用更多新 JSF 2 特性增強(qiáng)復(fù)合組件

級別：中級

David Geary , 總裁, Clarity Training, Inc.

2009 年 8 月 03 日

Java?Server Faces (JSF) 2 專家組成員 David Geary 將在這一期文章中結(jié)束這部有關(guān) JSF 2 新特性的系列文章（共 3 部分）。本文介紹如何使用該框架的新事件模型和內(nèi)置 Ajax 支持來增強(qiáng)可重用組件的功能。

JSF 的最大賣點(diǎn)在于它是一種基于組件的框架。這意味著您可以實(shí)現(xiàn)供其他人重用的組件。這種強(qiáng)大的重用機(jī)制在 JSF 1 中基本上是不可能實(shí)現(xiàn)的，因?yàn)樵?JSF 1 中實(shí)現(xiàn)組件是非常困難的事情。

然而，正如第 2 部分所述，JSF 2 通過一種名為 復(fù)合組件 的新特性簡化了組件的實(shí)現(xiàn) — 無需 Java 代碼和配置。這一特性可以說是 JSF 2 中最重要的部分，因?yàn)樗嬲龑?shí)現(xiàn)了 JSF 組件的潛力。

在這份有關(guān) JSF 2 的第三篇也是最后一篇文章中，我將展示如何利用新的 Ajax 和事件處理功能（也在 JSF 2 中引入）構(gòu)建復(fù)合組件特性，要從 JSF 2 中獲得最大收益，需要遵循下面的技巧：

技巧 1：組件化
技巧 2：Ajax 化
技巧 3：展示進(jìn)度

對于第一個(gè)技巧，我將簡要回顧已在第 2 部分中詳細(xì)描述過的兩個(gè)組件。對于后面的技巧，我將展示如何使用 Ajax 和事件處理功能來改造這些組件。

技巧 1：組件化

我在第 1 部分中引入的 places 應(yīng)用程序包含有大量復(fù)合組件。其中之一便是 map 組件，它顯示一個(gè)地址地圖，其中包含一個(gè)縮放級別下拉菜單，如圖 1 所示：

圖 1. places 應(yīng)用程序的 map 組件

清單 1 顯示了經(jīng)過刪減的 map 組件列表：

清單 1. map 組件

                    

                    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    

                    
<html xmlns="http://www.w3.org/1999/xhtml"
                    

                    
    ...
                    

                    
    xmlns:composite="http://java.sun.com/jsf/composite"
                    

                    
    xmlns:places="http://java.sun.com/jsf/composite/components/places">
                    

                    

                    
   <!-- INTERFACE -->
                    

                    
   <composite:interface>
                    

                    
     <composite:attribute name="title"/>
                    

                    
   </composite:interface>
                    

                    

                    
   <!-- IMPLEMENTATION --> 
                    

                    
   <composite:implementation">
                    

                    
     <div class="map">
                    

                    
       ...
                    

                    
       <h:panelGrid...>
                    

                    
         <h:panelGrid...>
                    

                    
            <
                    
                      h:selectOneMenu
                    
                    
 onchange="submit()"
                    

                    
                 value="#{cc.parent.attrs.location.
                    
                      zoomIndex
                    
                    
}"
                    

                    
                 valueChangeListener="#{cc.parent.attrs.location.zoomChanged}"
                    

                    
                 style="font-size:13px;font-family:Palatino">
                    

                    

                    
              <f:selectItems value="#{places.zoomLevelItems}"/>
                    

                    

                    
            </h:selectOneMenu>               
                    

                    
          </h:panelGrid>
                    

                    
        </h:panelGrid>   
                    

                    

                    
        <
                    
                      h:graphicImage
                    
                    
 url="#{cc.parent.attrs.location.mapUrl}" 
                    

                    
          style="border: thin solid gray"/>  
                    

                    
       ...
                    

                    

                    
     </div>
                    

                    
   ...
                    

                    

                    
  </composite:implementation>    
                    

                    
</html>

組件的一大優(yōu)點(diǎn)就是可以使用更有效的替代方法替換它們，同時(shí)不會影響到相關(guān)的功能。比如，在圖 2 中，我使用一個(gè) Google Maps 組件替換了清單 1 中的 image 組件，Google Maps 組件由 GMaps4JSF 提供（見參考資料）：

圖 2. GMaps4JSF 的 map 圖像

map 組件的更新后的代碼（進(jìn)行了刪減）如清單 2 所示：

清單 2. 使用一個(gè) GMaps4JSF 組件替換 map 圖形

                    

                    
<h:selectOneMenu 
                    
                      onchange="submit()"
                    
                    

                    
                      value
                    
                    
="#{cc.parent.attrs.location.
                    
                      zoomIndex
                    
                    
}"
                    

                    
              valueChangeListener="#{cc.parent.attrs.location.zoomChanged}"
                    

                    
              style="font-size:13px;font-family:Palatino">
                    

                    

                    
  <f:selectItems value="#{places.zoomLevelItems}"/>
                    

                    

                    
</h:selectOneMenu>   
                    

                    

                    
...         
                    

                    

                    
<
                    
                      m:map
                    
                    
 id="map" width="420px" height="400px" 
                    

                    
     address="#{cc.parent.attrs.location.streetAddress}, ..." 
                    

                    
                      zoom
                    
                    
="#{cc.parent.attrs.location.
                    
                      zoomIndex
                    
                    
}"
                    

                    
     renderOnWindowLoad="false">
                    

                    

                    
  <m:mapControl id="smallMapCtrl" 
                    

                    
              name="GLargeMapControl" 
                    

                    
          position="G_ANCHOR_TOP_RIGHT"/>
                    

                    

                    
  <m:mapControl  id="smallMapTypeCtrl" name="GMapTypeControl"/>                  
                    

                    
  <m:marker id="placeMapMarker"/>     
                    

                    

                    
</m:map>

要使用 GMaps4JSF 組件，我從 GMaps4JSF 組件集合中使用 <m:map> 標(biāo)記替換了 <h:graphicImage> 標(biāo)記。將 GMaps4JSF 組件與縮放下拉菜單連接起來也很簡單，只需為 <m:map> 標(biāo)記的 zoom 屬性指定正確的 backing-bean 屬性。

關(guān)于縮放級別需要注意一點(diǎn)，那就是當(dāng)一名用戶修改縮放級別時(shí)，我將通過 <h:selectOneMenu> 的 onchange 屬性強(qiáng)制執(zhí)行表單提交，如清單 1 中第一處使用粗體顯示的代碼行所示。這個(gè)表單提交將觸發(fā) JSF 生命周期，這實(shí)際上將把新的縮放級別推入到保存在父復(fù)合組件中的 location bean 的 zoomIndex 屬性中。這個(gè) bean 屬性被綁定到輸入組件，如清單 2 中的第一行所示。

由于我沒有為與縮放級別修改相關(guān)的表單提交指定任何導(dǎo)航，JSF 在處理請求后刷新了同一頁面，重新繪制地圖以反映新的縮放級別。然而，頁面刷新還重新繪制了整個(gè)頁面，即使只修改了地圖圖像。在技巧 2：Ajax 化中，我將展示如何使用 Ajax，只對圖像部分重新繪制，以響應(yīng)縮放級別的修改。

login 組件

places 應(yīng)用程序中使用的另一個(gè)組件是 login 組件。圖 3 展示了這個(gè) login 組件的實(shí)際使用：

圖 3. login 組件

清單 3 展示了創(chuàng)建圖 3 所示的 login 組件的標(biāo)記：

清單 3. 最基礎(chǔ)的 login ：只包含必需的屬性

                    

                    
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    

                    
  xmlns:ui="http://java.sun.com/jsf/facelets"
                    

                    
  xmlns:util="http://java.sun.com/jsf/composite/components/util">
                    

                    

                    
  <util:login 
                    
                      loginAction
                    
                    
="#{user.login}"
                    

                    
                      managedBean
                    
                    
="#{user}"/>
                    

                    

                    
</ui:composition>

login 組件只包含兩個(gè)必需的屬性：

loginAction ：登錄 action 方法
managedBean ：包含名稱和密碼屬性的托管

清單 3 中指定的托管 bean 如清單 4 所示：

清單 4. User.groovy

                    

                    
package com.clarity
                    

                    

                    
import javax.faces.context.FacesContext
                    

                    
import javax.faces.bean.ManagedBean
                    

                    
import javax.faces.bean.SessionScoped
                    

                    

                    
@ManagedBean() 
                    

                    
@SessionScoped  
                    

                    

                    
public class User {    
                    

                    
  private final String VALID_NAME     = "Hiro"
                    

                    
  private final String VALID_PASSWORD = "jsf"
                    

                    

                    
  private String 
                    
                      name, password
                    
                    
;
                    

                    

                    
  public String getName() { name }
                    

                    
  public void setName(String newValue) { name = newValue }
                    

                    

                    
  public String getPassword() { return password }
                    

                    
  public void setPassword(String newValue) { password = newValue }  
                    

                    

                    
  public String 
                    
                      login()
                    
                    
 {
                    

                    
    "/views/places"
                    

                    
  }
                    

                    

                    
  public String logout() {
                    

                    
    name = password = nameError = null
                    

                    
    "/views/login"
                    

                    
  }
                    

                    
}

清單 4 中的托管 bean 是一個(gè) Groovy bean。在這里使用 Groovy 替代 Java 語言并不會帶來多少好處，只是減少了處理分號和返回語句的麻煩。然而，在技巧 2 的 Validation 部分中，我將展示一個(gè)對 User 托管 bean 使用 Groovy 的更有說服力的原因。

大多數(shù)情況下，您將需要使用提示和按鈕文本來配置登錄組件，如圖 4 所示：

圖 4. 充分配置的 login 組件

清單 5 展示了生成圖 4 所示的 login 組件的標(biāo)記：

清單 5. 配置 login 組件

                    

                    
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    

                    
  xmlns:f="http://java.sun.com/jsf/core"
                    

                    
  xmlns:h="http://java.sun.com/jsf/html"
                    

                    
  xmlns:ui="http://java.sun.com/jsf/facelets"
                    

                    
  xmlns:util="http://java.sun.com/jsf/composite/components/util">
                    

                    

                    
  <util:login loginPrompt="#{msgs.loginPrompt}"
                    

                    
               namePrompt="#{msgs.namePrompt}"
                    

                    
           passwordPrompt="#{msgs.passwordPrompt}"
                    

                    
          loginButtonText="#{msgs.loginButtonText}"
                    

                    
              loginAction="#{user.login}"          
                    

                    
              managedBean="#{user}"/>
                    

                    

                    
</ui:composition>

在清單 5 中，我從一個(gè)資源包中獲取了用于提示的字符串和登錄按鈕的文本。

清單 6 定義了 login 組件：

清單 6. 定義 login 組件

                    

                    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    

                    
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    

                    

                    
<!-- Usage:
                    

                    

                    
  <util:login loginPrompt="#{msgs.loginPrompt}"
                    

                    
               namePrompt="#{msgs.namePrompt}"
                    

                    
           passwordPrompt="#{msgs.passwordPrompt}"
                    

                    
          loginButtonText="#{msgs.loginButtonText}"
                    

                    
              loginAction="#{user.login}"
                    

                    
              managedBean="#{user}">
                    

                    

                    
    <f:actionListener for="loginButton" 
                    

                    
                     type="com.clarity.LoginActionListener"/>
                    

                    

                    
  </util:login>
                    

                    

                    
  managedBean must have two properties: name and password. 
                    

                    

                    
  The loginAction attribute must be an action method that takes no
                    

                    
  arguments and returns a string. That string is used to navigate
                    

                    
  to the page the user sees after logging in.
                    

                    

                    
  This component's loginButton is accessible so that you can
                    

                    
  add action listeners to it, as depicted above. The class specified
                    

                    
  in f:actionListener's type attribute must implement the
                    

                    
  javax.faces.event.ActionListener interface.
                    

                    

                    
 -->
                    

                    

                    
<html xmlns="http://www.w3.org/1999/xhtml"
                    

                    
    xmlns:f="http://java.sun.com/jsf/core"
                    

                    
    xmlns:h="http://java.sun.com/jsf/html"
                    

                    
    xmlns:composite="http://java.sun.com/jsf/composite">
                    

                    

                    
  <!-- INTERFACE -->
                    

                    
  <
                    
                      composite:interface
                    
                    
>
                    

                    

                    
    <!-- PROMPTS -->
                    

                    
    <composite:attribute name="loginPrompt"/>
                    

                    
    <composite:attribute name="namePrompt"/>
                    

                    
    <composite:attribute name="passwordPrompt"/>
                    

                    

                    
    <!--  LOGIN BUTTON -->      
                    

                    
    <composite:attribute name="loginButtonText"/>
                    

                    

                    
    <!-- loginAction is called when the form is submitted -->
                    

                    
    <composite:attribute name="loginAction" 
                    

                    
             method-signature="java.lang.String login()"
                    

                    
                     required="true"/>
                    

                    

                    
    <!-- You can add listeners to this actionSource:  -->
                    

                    
    <composite:actionSource name="loginButton" targets="form:loginButton"/>
                    

                    

                    
    <!-- BACKING BEAN -->
                    

                    
    <composite:attribute name="managedBean" required="true"/>
                    

                    
  </composite:interface>
                    

                    

                    
  <!-- IMPLEMENTATION -->
                    

                    
  <
                    
                      composite:implementation
                    
                    
>
                    

                    
    <div class="prompt">
                    

                    
      #{
                    
                      cc.attrs.loginPrompt
                    
                    
}
                    

                    
    </div>
                    

                    

                    
    <!-- FORM -->       
                    

                    
    <h:form id="form">
                    

                    
      <h:panelGrid columns="2">
                    

                    

                    
        <!-- NAME AND PASSWORD FIELDS -->
                    

                    
        #{
                    
                      cc.attrs.namePrompt
                    
                    
}
                    

                    
        <h:inputText id="name" 
                    

                    
                  value="#{
                    
                      cc.attrs.managedBean.name
                    
                    
}"/>
                    

                    

                    
        #{
                    
                      cc.attrs.passwordPrompt
                    
                    
} 
                    

                    
        <h:inputSecret id="password" size="8" 
                    

                    
          value="#{
                    
                      cc.attrs.managedBean.password
                    
                    
}"/>
                    

                    

                    
      </h:panelGrid>
                    

                    

                    
      <p>
                    

                    
        <!-- LOGIN BUTTON -->    
                    

                    
        <h:commandButton id="loginButton"
                    

                    
          value="#{
                    
                      cc.attrs.loginButtonText
                    
                    
}"
                    

                    
          action="#{
                    
                      cc.attrs.loginAction
                    
                    
}"/>
                    

                    
      </p>
                    

                    
    </h:form>    
                    

                    
  </composite:implementation>
                    

                    
</html>

和 map 組件一樣， login 也可以使用一個(gè) Ajax 升級。在下一個(gè)技巧介紹 Validation 時(shí)，我將展示如何將 Ajax 驗(yàn)證添加到 login 組件中。

回頁首

技巧 2：Ajax 化

與非 Ajax HTTP 請求相比，Ajax 請求通常需要額外執(zhí)行兩個(gè)步驟：在服務(wù)器中對表單進(jìn)行局部處理，接著在客戶機(jī)上對 Document Object Model (DOM) 進(jìn)行局部呈現(xiàn)。

局部處理和呈現(xiàn)

通過將 JSF 生命周期分解為兩個(gè)不同的邏輯部分 —— 執(zhí)行和呈現(xiàn)，JSF 2 現(xiàn)在支持局部處理和局部呈現(xiàn)。圖 5 突出顯示了執(zhí)行部分：

圖 5. JSF 生命周期的執(zhí)行部分

圖 6 突出顯示了 JSF 生命周期的呈現(xiàn)部分：

圖 6. JSF 生命周期的呈現(xiàn)部分

將生命周期劃分為執(zhí)行和呈現(xiàn)部分的原理很簡單：您可以指定 JSF 在服務(wù)器上執(zhí)行（處理）的組件，以及在返回 Ajax 調(diào)用時(shí) JSF 呈現(xiàn)的組件。將使用 JSF 2 中新增的 <f:ajax> 實(shí)現(xiàn)這個(gè)目的，如清單 7 所示：

清單 7. 一個(gè) Ajax 縮放菜單

                    

                    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    

                    
<h:selectOneMenu id="menu"
                    

                    
                      value
                    
                    
="#{cc.parent.attrs.location.zoomIndex}"
                    

                    
     style="font-size:13px;font-family:Palatino">
                    

                    

                    
                      <f:ajax event="change" execute="@this" render="map"/>
                    
                    

                    
  <f:selectItems value="#{places.zoomLevelItems}"/>
                    

                    

                    
</h:selectOneMenu>             
                    

                    

                    
<m:map id="
                    
                      map
                    
                    
"...>

清單 7 對清單 2 中的第一行所示的菜單進(jìn)行了修改：我從清單 2 中刪除了 onchange 屬性，并添加了一個(gè) <f:ajax> 標(biāo)記。這個(gè) <f:ajax> 標(biāo)記指定了以下內(nèi)容：

觸發(fā) Ajax 調(diào)用的事件
在服務(wù)器上執(zhí)行的組件
在客戶機(jī)上呈現(xiàn)的組件

當(dāng)用戶從縮放菜單中選擇一個(gè)菜單項(xiàng)時(shí)，JSF 將對服務(wù)器發(fā)出 Ajax 調(diào)用。隨后，JSF 將菜單傳遞給生命周期的執(zhí)行部分（ @this 表示 <f:ajax> 周圍的組件），并在生命周期的 Update Model Values 階段更新菜單的 zoomIndex 。當(dāng) Ajax 調(diào)用返回后，JSF 呈現(xiàn)地圖組件，后者使用（新設(shè)置的）縮放指數(shù)重新繪制地圖，現(xiàn)在您就有了一個(gè) Ajax 化的縮放菜單，其中添加了一行 XHTML。

但是還可以進(jìn)一步簡化，因?yàn)?JSF 為 event 和 execute 屬性提供了默認(rèn)值。

每個(gè) JSF 組件都有一個(gè)默認(rèn)事件，當(dāng)在組件標(biāo)記內(nèi)部嵌入 <f:ajax> 標(biāo)記時(shí)，該事件將觸發(fā) Ajax 調(diào)用。對于菜單，該事件為 change 事件。這意味著我可以刪除清單 7 中的 <f:ajax> 的 event 屬性。 <f:ajax> 的 execute 屬性的默認(rèn)值是 @this ，這表示圍繞在 <f:ajax> 周圍的組件。在本例中，該組件為菜單，因此還可以刪除 execute 屬性。

通過對 <f:ajax> 使用默認(rèn)屬性值，我可以將清單 7 簡化為清單 8：

清單 8. 簡化后的 Ajax 縮放菜單

                    

                    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    

                    
<h:selectOneMenu id="menu"
                    

                    
     value="#{cc.parent.attrs.location.zoomIndex}"
                    

                    
     style="font-size:13px;font-family:Palatino">
                    

                    

                    
                      <f:ajax render="map"/>
                    
                    

                    
  <f:selectItems value="#{places.zoomLevelItems}"/>
                    

                    

                    
</h:selectOneMenu>             
                    

                    

                    
<m:map id="map"...>

這演示了使用 JSF 2 向組件添加 Ajax 有多么容易。當(dāng)然，前面的例子非常簡單：我僅僅是在用戶選擇某個(gè)縮放級別時(shí)重新繪制了地圖而不是整個(gè)頁面。驗(yàn)證表單中的各個(gè)字段等操作要更加復(fù)雜一些，因此接下來我將討論這些用例。

驗(yàn)證

當(dāng)用戶移出某個(gè)字段后對字段進(jìn)行驗(yàn)證并提供即時(shí)的反饋，這始終是一個(gè)好的做法。例如，在圖 7 中，我使用了 Ajax 對名稱字段進(jìn)行了驗(yàn)證：

圖 7. Ajax 驗(yàn)證

該名稱字段的標(biāo)記如清單 9 所示：

清單 9. 名稱字段

                    

                    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    

                    
<h:panelGrid columns="2">
                    

                    
  #{cc.attrs.namePrompt}
                    

                    
  <h:panelGroup>
                    

                    
    <h:inputText id="name" value="#{cc.attrs.managedBean.name}"
                    

                    
                      valueChangeListener
                    
                    
="#{cc.attrs.managedBean.validateName}">
                    

                    

                    
       <
                    
                      f:ajax
                    
                    
 event="
                    
                      blur
                    
                    
" render="
                    
                      nameError
                    
                    
"/>
                    

                    

                    
     </h:inputText>
                    

                    

                    
     <h:outputText id="
                    
                      nameError
                    
                    
" 
                    

                    
       value="#{cc.attrs.managedBean.
                    
                      nameError
                    
                    
}"
                    

                    
       style="color: red;font-style: italic;"/>
                    

                    
  </h:panelGroup>     
                    

                    
  ... 
                    

                    
</h:panelGrid>

我再一次使用了 <f:ajax> ，只不過這一次沒有執(zhí)行輸入的默認(rèn)事件 — change ，因此我將 blur 指定為觸發(fā) Ajax 調(diào)用的事件。當(dāng)用戶移出名稱字段時(shí)，JSF 將對服務(wù)器發(fā)出 Ajax 調(diào)用并在生命周期的執(zhí)行部分運(yùn)行 name 輸入組件。這意味著 JSF 將在生命周期的 Process Validations 階段調(diào)用 name 輸入的值修改監(jiān)聽程序（在清單 9 中指定）。清單 10 展示了這個(gè)值修改監(jiān)聽程序：

清單 10. validateName() 方法

                    

                    
package com.clarity
                    

                    

                    
import javax.faces.context.FacesContext
                    

                    
import javax.faces.bean.ManagedBean
                    

                    
import javax.faces.bean.SessionScoped
                    

                    
import javax.faces.event.ValueChangeEvent 
                    

                    
import javax.faces.component.UIInput 
                    

                    

                    
@ManagedBean()  
                    

                    
@SessionScoped    
                    

                    

                    
public class User {    
                    

                    
  private String name, password, nameError;
                    

                    

                    
  ...
                    

                    

                    
  public void 
                    
                      validateName
                    
                    
(ValueChangeEvent e) {
                    

                    
    UIInput nameInput = e.getComponent()
                    

                    
    String name = nameInput.getValue()
                    

                    

                    
    if (name.contains("_"))   
                    
                      nameError
                    
                    
 = "Name cannot contain underscores"
                    

                    
    else if (name.equals("")) 
                    
                      nameError
                    
                    
 = "Name cannot be blank"
                    

                    
    else                      
                    
                      nameError
                    
                    
 = "" 
                    

                    
  }
                    

                    

                    
  ...
                    

                    
}

這個(gè)修改值的監(jiān)聽程序（ user 托管 bean 的 validateName() 方法）將驗(yàn)證名稱字段并更新 user 托管 bean 的 nameError 屬性。

返回 Ajax 調(diào)用后，借助清單 9 中的 <f:ajax> 標(biāo)記的 render 屬性，JSF 呈現(xiàn) nameError 輸出。該輸出顯示了 user 托管 bean 的 nameError 屬性。

多字段驗(yàn)證

在前面的小節(jié)中，我展示了如何對單一字段執(zhí)行 Ajax 驗(yàn)證。但是，有些情況下，需要同時(shí)對多個(gè)字段進(jìn)行驗(yàn)證。比如，圖 8 展示了 places 應(yīng)用程序同時(shí)驗(yàn)證名稱和密碼字段：

圖 8. 驗(yàn)證多個(gè)字段

我在用戶提交表單時(shí)同時(shí)驗(yàn)證了名稱和密碼字段，因此對這個(gè)例子不需要用到 Ajax。相反，我將使用 JSF 2 的新事件系統(tǒng)，如清單 11 所示：

清單 11. 使用 <f:event>

                    

                    
<h:form id="form" prependId="false">
                    

                    

                    
  <
                    
                      f:event
                    
                    
 type="
                    
                      postValidate
                    
                    
" 
                    

                    
       listener="#{cc.attrs.managedBean.validate}"/>
                    

                    
  ...
                    

                    
</h:form>
                    

                    

                    
<div class="error" style="padding-top:10px;">
                    

                    
  <h:messages layout="table"/>
                    

                    
</div>

在清單 11 中，我使用了 <f:event> — 類似于 <f:ajax> ，它是 JSF 2 中新增的內(nèi)容。 <f:event> 標(biāo)記在另一方面還類似于 <f:ajax> ：使用起來很簡單。

將一個(gè) <f:event> 標(biāo)記放到組件標(biāo)記的內(nèi)部，當(dāng)該組件發(fā)生指定的事件（使用 type 屬性指定）時(shí)，JSF 將調(diào)用一個(gè)使用 listener 屬性指定的方法。因此， <f:event> 標(biāo)記在清單 11 中的含義就是：對表單進(jìn)行驗(yàn)證后，對用戶傳遞給這個(gè)復(fù)合組件的托管 bean 調(diào)用 validate() 方法。該方法如清單 12 所示：

清單 12. validate() 方法

                    

                    
package com.clarity
                    

                    

                    
import javax.faces.context.FacesContext
                    

                    
import javax.faces.bean.ManagedBean
                    

                    
import javax.faces.bean.SessionScoped
                    

                    
import javax.faces.event.ValueChangeEvent 
                    

                    
import javax.faces.component.UIInput 
                    

                    

                    
@ManagedBean()  
                    

                    
@SessionScoped    
                    

                    

                    
public class User {    
                    

                    
  private final String VALID_NAME     = "Hiro";
                    

                    
  private final String VALID_PASSWORD = "jsf";
                    

                    

                    
  ...
                    

                    

                    
  public void 
                    
                      validate
                    
                    
(ComponentSystemEvent e) {
                    

                    
    UIForm form = e.getComponent() 
                    

                    
    UIInput nameInput = form.findComponent("name")
                    

                    
    UIInput pwdInput = form.findComponent("password")
                    

                    

                    
    if ( ! (nameInput.getValue().equals(VALID_NAME) &&
                    

                    
        pwdInput.getValue().equals(VALID_PASSWORD))) {
                    

                    

                    
      FacesContext fc = FacesContext.getCurrentInstance()
                    

                    
      fc.addMessage(form.getClientId(), 
                    

                    
        new FacesMessage("Name and password are invalid. Please try again."))
                    

                    
      fc.renderResponse()
                    

                    
    }
                    

                    
  }
                    

                    

                    
  ...
                    

                    
}

JSF 將一個(gè)組件系統(tǒng)事件傳遞給清單 12 中的 validate() 方法，方法從這個(gè)事件中獲得對（適用于事件的）組件的引用 — 登錄表單。對于這個(gè)表單，我使用 findComponent() 方法獲得名稱和密碼組件。如果這些組件的值不為 Hiro 和 jsf，那么我將把一條消息存儲到 faces 上下文并要求 JSF 繼續(xù)處理生命周期的 Render Response 階段。通過這種方法，就可以避免 Update Model Values 階段，后者會將壞的名稱和密碼傳遞給模型（見圖 5 ）。

您可能已經(jīng)注意到，清單 10 和清單 12 中的驗(yàn)證方法是使用 Groovy 編寫的。與清單 4 不同，后者使用 Groovy 的惟一好處就是避免了分號和返回語句，清單 10 和清單 12 中的 Groovy 代碼使我不必進(jìn)行類型轉(zhuǎn)換。例如，在清單 10 中， ComponentSystemEvent.getComponent() 和 UIComponent.findComponent() 都返回類型 UIComponent 。對于 Java 語言，我需要轉(zhuǎn)換這些方法的返回值。Groovy 為我做了這一轉(zhuǎn)換工作。

回頁首

技巧 3：展示進(jìn)度

在 Ajax 化中，我展示了如何為 map 組件 Ajax 化縮放菜單，因此，當(dāng)用戶修改縮放級別時(shí)，places 應(yīng)用程序?qū)⒅恢匦吕L制頁面的地圖部分。另一個(gè)常見 Ajax 用例是向用戶提供反饋，表示一個(gè) Ajax 事件正在處理中，如圖 9 所示：

圖 9. 進(jìn)度條

在圖 9 中，我將使用一個(gè)動(dòng)畫 GIF 替換縮放菜單，這個(gè)動(dòng)畫 GIF 將在 Ajax 調(diào)用期間顯示。當(dāng) Ajax 調(diào)用完成后，我將使用縮放菜單替換進(jìn)度指示器。清單 13 展示了這一過程：

清單 13. 監(jiān)視 Ajax 調(diào)用

                    

                    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    

                    
<h:selectOneMenu id="menu"
                    

                    
     value="#{cc.parent.attrs.location.zoomIndex}"
                    

                    
     style="font-size:13px;font-family:Palatino">
                    

                    

                    
  <f:ajax render="map" 
                    
                      onevent="zoomChanging"
                    
                    
/>
                    

                    
  <f:selectItems value="#{places.zoomLevelItems}"/>
                    

                    

                    
  ...             
                    

                    
</h:selectOneMenu>
                    

                    
...
                    

                    
<h:graphicImage id="
                    
                      progressbar
                    
                    
" style="display: none" 
                    

                    
              library="images" name="orange-barber-pole.gif"/>

在清單 13 中，我添加了一個(gè)進(jìn)度條圖像（該圖像最初不會顯示出來），并為 <f:ajax> 指定了 onevent 屬性。該屬性引用一個(gè) JavaScript 函數(shù)，如清單 14 所示，這個(gè)函數(shù)將在清單 13 中的 Ajax 調(diào)用被初始化時(shí)由 JSF 調(diào)用：

清單 14. 響應(yīng) Ajax 請求的 JavaScript

                    

                    
function zoomChanging(data) {
                    

                    
  var menuId = data.source.id;
                    

                    
  var progressbarId = menuId.substring(0, menuId.length - "menu".length)
                    

                    
      + "progressbar";
                    

                    

                    
  if (data.name == "begin") {
                    

                    
    Element.hide(menuId);
                    

                    
    Element.show(progressbarId);
                    

                    
  } 
                    

                    
  else if (data.name == "success") {
                    

                    
    Element.show(menuId);
                    

                    
    Element.hide(progressbarId);
                    

                    
  }
                    

                    
}

JSF 向清單 14 中的函數(shù)傳遞一個(gè)對象，該對象中包含有一些信息，比如觸發(fā)了事件的組件的客戶機(jī)標(biāo)識符（在本例中為縮放級別菜單），以及 Ajax 請求的當(dāng)前狀態(tài)，使用 name 屬性表示。

清單 14 中的 zoomChanging() 函數(shù)計(jì)算進(jìn)度條圖像的客戶機(jī)標(biāo)識符，然后使用 Prototype Element 對象在 Ajax 調(diào)用期間隱藏和顯示對應(yīng)的 HTML 元素。

回頁首

結(jié)束語

在過去幾年中，人們認(rèn)為 JSF 1 是一個(gè)難以使用的框架。在許多方面上，這種評價(jià)是有一定道理的。JSF 1 在開發(fā)期間完全沒有考慮到實(shí)際使用中遇到的問題。因此，JSF 在實(shí)現(xiàn)應(yīng)用程序和組件方面比預(yù)先設(shè)想更加困難。

另一方面，JSF 2 經(jīng)歷了那些在 JSF 1 基礎(chǔ)之上實(shí)現(xiàn)過開源項(xiàng)目的開發(fā)人員的實(shí)際體驗(yàn)。總結(jié)經(jīng)驗(yàn)之后，JSF 2 是一個(gè)更加合理的框架，可以輕松地實(shí)現(xiàn)健壯的、Ajax 化的應(yīng)用程序。

貫穿本系列文章，我展示了一些最突出的 JSF 2 特性，比如注釋和替換配置約定、簡化后的導(dǎo)航、資源支持、復(fù)合組件、內(nèi)置 Ajax 以及內(nèi)嵌的事件模型。但是仍然有許多 JSF 2 特性未在本系列提及，比如 View 和 Page 范圍、為頁面添加書簽的支持和 Project Stage。所有這些特性以及其他更多特性讓 JSF 2 在 JSF 1 的基礎(chǔ)上實(shí)現(xiàn)了巨大的改進(jìn)。

回頁首

下載

描述名字大小下載方法本文示例的源代碼

j-jsf2-fu-3.zip	7.7MB	HTTP


	關(guān)于下載方法的信息

參考資料

學(xué)習(xí)

JSF 主頁：找到有關(guān)使用 JSF 進(jìn)行開發(fā)的更多資源。
GMaps4JSF ：這個(gè)庫幫助 JSF 用戶構(gòu)建使用 Google Maps 的 mashup。
Roger Kitain 的博客：Roger Kitain 和 Ed Burns 是 JSF 2.0 規(guī)范的主要撰寫者。
Jim Driscoll 的博客：將發(fā)現(xiàn)大量有關(guān) JSF 2 的內(nèi)容。
Ryan Lubke 的博客：Ryan Lubke 從事 JSF 2 參考實(shí)現(xiàn)的工作。
developerWorks Java 技術(shù)專區(qū) ：可以找到幾百篇關(guān)于 Java 編程的各個(gè)方面的文章。

獲得產(chǎn)品和技術(shù)

JSF ：下載 JSF 2.0。
GMaps4JSF ：下載 GMaps4JSF。

討論

“ Public Access to JSF 2.0 JSR-314-EG Discussions Now Available ”（Ed Burns 的博客，java.net，2009 年 3 月）：了解如何注冊 JSF 2 專家組郵件列表。
加入 developerWorks 社區(qū) 。

關(guān)于作者


		David Geary 是一名作家、演講家和顧問，也是 Clarity Training, Inc. 的總裁，他指導(dǎo)開發(fā)人員使用 JSF 和 Google Web Toolkit (GWT) 實(shí)現(xiàn) Web 應(yīng)用程序。他是 JSTL 1.0 和 JSF 1.0/2.0 專家組的成員，與人合作編寫了 Sun 的 Web Developer 認(rèn)證考試的內(nèi)容，并且為多個(gè)開源項(xiàng)目作出貢獻(xiàn)，包括 Apache Struts 和 Apache Shale。David 的 Graphic Java Swing 一直是關(guān)于 Java 的暢銷書籍，而 Core JSF （與 Cay Horstman 合著）是關(guān)于 JSF 的暢銷書。David 經(jīng)常在各大會議和用戶組發(fā)表演講。他從 2003 年開始就一直是 NFJS tour 的固定演講人，并且在 Java University 教授課程，兩次當(dāng)選為 JavaOne 之星。

JSF 2 簡介，第 3 部分: 事件處理、JavaScript 和 Ajax

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

欧美三区_成人在线免费观看视频_欧美极品少妇xxxxⅹ免费视频_a级毛片免费播放_鲁一鲁中文字幕久久_亚洲一级特黄

JSF 2 簡介，第 3 部分: 事件處理、JavaScript 和 Ajax