在Java EE 6中使用JSF 2.0簡化頁面制作

作者：黃永兵譯 2010-01-18 09:37:39

Java EE 6中使用了JSF 2.0，即JSR 314規(guī)范。最新的JavaServer Faces視圖聲明語言令創(chuàng)建一個JSF頁面更加容易。本文介紹了新的Facelets，模板，混合組件以及行為監(jiān)聽器，并介紹了JSF 2.0的Ajax支持以及其他的一些新特性。

【51CTO精選譯文】過去幾個星期，51CTO對Java EE 6的新特性進行了一系列介紹。除了Servlet 3.0的特性，Java EE 6也使用了新的JSF 2.0標(biāo)準(zhǔn)。下面我們來看一看JSF 2.0是如何簡化頁面制作并提供Ajax支持的。***，我們對Servlet 3.0和JSF 2.0的新特性進行了總結(jié)。

簡化JSF 2.0頁面制作

JavaServer Faces技術(shù)提供了一個服務(wù)端組件框架，簡化了Java EE應(yīng)用程序用戶界面的開發(fā)，其中最顯著的改進是頁面制作，通過使用標(biāo)準(zhǔn)的JavaServer Faces視圖聲明語言（JavaServer Faces View Declaration Language，俗稱Facelets）創(chuàng)建一個JSF頁面更加容易。

Facelets

Facelets是一個強大的輕量級聲明語言，可以使用它展示一個JSF頁面，使用Facelets時，你可以使用HTML風(fēng)格的模板展示一個JSF頁面，也可以構(gòu)建一個組件樹，JSF應(yīng)用程序中的用戶界面通常是由JSF組件構(gòu)成的JSF頁面，F(xiàn)acelets在JSP之上提供了更多優(yōu)點。

在JSP中，Web頁面中的元素是按照漸進順序處理和渲染的，而JSF提供了它自己的處理和渲染順序，這可能會導(dǎo)致不可預(yù)測的行為發(fā)生，F(xiàn)acelets解決了這個問題，通過模板，F(xiàn)acelets也允許代碼復(fù)用，可以大大減少開發(fā)UI的時間，現(xiàn)在Facelets已經(jīng)成為構(gòu)建JSF應(yīng)用程序的***技術(shù)。

Facelets通常是使用XHTML標(biāo)記語言編寫的，因此Facelets是可以跨不同開發(fā)平臺的，下面是Java EE 6教材中提供的JSF頁面的Facelets XHTML代碼部分：

<xml version="1.0" encoding="UTF-8"?> 
           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" 
           xmlns:f="http://java.sun.com/jsf/core" 
           xmlns:h="http://java.sun.com/jsf/html" 
           xmlns:ui="http://java.sun.com/jsf/facelets"> 
   <head> 
           <title>Guess Number JSF Application</title> 
   </head> 
   <body> 
      <h:form> 
       <h2> 
       Hi. My name is Duke. I am thinking of a number from <b> 
              <h:outputText value="#{UserNumberBean.minimum}"/> to  
              &nbsp;&nbsp;<b> 
       <h:outputText value="#{UserNumberBean.maximum}"/>.  
       <p> 
         Can you guess it ?  
       </p> 
       <h:graphicImage id="waveImg" url="/wave.med.gif" /> 
       <h:inputText id="userNo" 
             value="#{UserNumberBean.userNumber}"> 
          converterMessage="#{ErrMsg.userNoConvert}"> 
       <f:validateLongRange 
             minimum="#{UserNumberBean.minimum}" 
             maximum="#{UserNumberBean.maximum}"/> 
       </h:inputText> 
       <h:commandButton id="submit" 
             action="success" value="submit" /> 
       <h:message showSummary="true" showDetail="false" 
                  style="color: red;  
                   font-family: 'New Century Schoolbook', serif;  
                   font-style: oblique;  
                   text-decoration: overline"  
                   id="errors1" 
                   for="userNo"/> 
       </h2> 
      </h:form> 
   </body> 
   </html>

頁面渲染效果如圖1所示。

圖 1 使用Facelets創(chuàng)建的用戶界面

這個Facelets XHTML頁面和普通JSP頁面并沒有多大不同，F(xiàn)acelets支持JSF和JSTL標(biāo)簽庫，它也包括一個Facelets標(biāo)簽庫，支持功能豐富的頁面模板。命名空間聲明xmlns:ui="http://java.sun.com/jsf/facelets"就是針對facelets標(biāo)簽庫的，但這里沒有使用facelets標(biāo)簽庫的標(biāo)簽，facelets也支持統(tǒng)一的表達(dá)式語言。

模板

使用模板，你可以創(chuàng)建一個頁面作為應(yīng)用程序中其它頁面的模板，這樣可以避免多次創(chuàng)建結(jié)構(gòu)類似的頁面，同時也可以統(tǒng)一應(yīng)用程序中多個頁面的視覺風(fēng)格。

Facelets標(biāo)簽庫包括一個模板標(biāo)簽<ui:insert>，為了實施模板化，首先創(chuàng)建一個包括<ui:insert>標(biāo)簽的模板頁面，然后創(chuàng)建一個使用這個模板的客戶端頁面，在客戶端頁面中，使用<ui:composition>標(biāo)簽指定模板，使用<ui:define>標(biāo)簽指定插入到模板中的內(nèi)容。

下面是一個模板頁面的內(nèi)容：

<xml version="1.0" encoding="UTF-8"?> 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
   <html xmlns="http://www.w3.org/1999/xhtml" 
         xmlns:ui="http://java.sun.com/jsf/facelets" 
         xmlns:h="http://java.sun.com/jsf/html" 
 
      <head> 
         <title><ui:insert name="title">Page Title</ui:insert</title><body> 
      </head> 
      <body> 
          <div> 
              <ui:insert name="Links"/> 
          </div> 
          <div> 
              <ui:insert name="Data"/> 
         </div> 
      </body> 
   </html>

下面是使用這個模板的客戶端頁面代碼：

<xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml" 
          xmlns:ui="http://java.sun.com/jsf/facelets" 
          xmlns:h="http://java.sun.com/jsf/html" 
     <body> 
       <ui:composition template="/template.xhtml"> 
           This text will not be displayed.  
           <ui:define name="title"> 
               Welcome page  
           </ui:define> 
           <ui:define name="Links"> 
               ... [Links should be here]  
           </ui:define> 
           <ui:define name="Links"> 
               ... [Data should be here]  
           </ui:define> 
       </ui:composition> 
           This text also will not be displayed.  
     </body> 
    </html>

當(dāng)客戶端調(diào)用這個模板時，它使用標(biāo)題Welcome Page渲染這個頁面，這個頁面顯示了兩部分內(nèi)容，一個顯示客戶端中指定的鏈接列表，另一個顯示客戶端中指定的數(shù)據(jù)。

混合組件

混合組件時JSF中的一個新特性，通過它創(chuàng)建自定義JSF組件會更加容易。你可以使用JSF頁面標(biāo)記和其它JSF組件創(chuàng)建混合組件。在Facelets的標(biāo)注下，任何XHTML頁面都可以變成一個混合組件。此外，混合組件可以有驗證器，轉(zhuǎn)換器和監(jiān)聽器。

創(chuàng)建好混合組件后，你可以將它保存到庫中，以后有需要時就可以調(diào)用了。

讓我們創(chuàng)建一個渲染為登錄面板的混合組件，用戶登錄時，組件反饋一個登錄事件，如圖2所示。

圖 2 登錄面板混合組件

下面是混合組件的源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   <html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"> 
      xmlns:f="http://java.sun.com/jsf/facelets"> 
      xmlns:composite="http://java.sun.com/jsf/composite"> 
 
   <h:head> 
   <title>This content will not be displayed in the rendered output</title> 
   </h:head> 
 
   <h:body> 
    <composite:interface> 
           <composite:actionSource name="loginEvent"/> 
    </composite:interface> 
    <composite:implementation> 
     <table> 
    <tr> 
       <td>Username:  <h:inputText id="username" /> </td> 
    </tr> 
    <tr> 
       <td>Password: <h:inputSecret id="password" /></td> 
    </tr> 
    <tr> 
       <td><h:commandButton value="Login" id="loginEvent" /></td> 
    </tr> 
     </table> 
    </composite:implementation> 
   </h:body> 
   </html>

xmlns:composite="http://java.sun.com/jsf/composite"聲明了混合UI組件的命名空間，<composite:interface>標(biāo)簽聲明混合組件的使用契約，<composite:attribute>標(biāo)簽在使用契約中指定<composite:actionSource>標(biāo)簽，這個表示組件可以暴露一個事件，讓使用這個混合組件的頁面可以輕松訪問它。
<composite:implementation>標(biāo)簽定義了混合組件的實現(xiàn)，這里的實現(xiàn)是一個簡單的表，它包括用戶名、密碼和登錄按鈕JSF組件。

為了讓混合組件可用，將代碼保存為XHTML文件，將文件放到應(yīng)用程序根目錄下resources目錄的子目錄中即可。子目錄的名字可以采用包含混合組件的資源庫名字，JSF運行時通過向混合組件的標(biāo)簽名后追加.xhtml后綴查找混合組件。例如，如果你將標(biāo)簽命名為loginPanel，那么保存為混合組件的文件名就是loginPanel.xhtml。然后你就可以在Web頁面中使用混合組件了，下面就是一個使用混合組件的Web頁面代碼示例：

<!DOCTYPE html  
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   <html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
 
   <head> 
   <title>Example 01>/title> 
   <style type="text/css"> 
   .grayBox { padding: 8px; margin: 10px 0; border: 1px solid #CCC; background-color: #f9f9f9;  }  
   </style> 
   </h:head> 
 
   <h:body> 
     <p>Usage of Login Panel Component</p> 
 
        <ui:debug hotkey="p" rendered="true"/> 
 
     <h:form> 
         <div id="compositeComponent" class="grayBox" style="border: 1px solid #090;"> 
            <ez:loginPanel> 
                <f:actionListener for="loginEvent" type="example01.LoginActionListener" /> 
 
            </ez:loginPanel> 
         </div> 
     <p><h:commandButton value="reload" /></p> 
 
     <p><h:outputText value="#{loginActionMessage}" /></p> 
     </h:form> 
 
   </h:body> 
   </html>

注意聲明xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"，它指定了混合組件的命名空間和前綴，這里的ezcomp是資源目錄的子目錄名，JSF使用下面的約定：所有命名空間URI都以http://java.sun.com/jsf/composite/開頭，使用資源庫的名稱結(jié)束。

<f:actionListener>

標(biāo)簽關(guān)聯(lián)混合組件的行為監(jiān)聽器，標(biāo)簽中的for屬性表示這個監(jiān)聽器是為混合組件上名為loginEvent行為事件準(zhǔn)備的，你需要編寫代碼來處理事件，例如：

import javax.faces.component.UIComponent;  
 import javax.faces.component.ValueHolder;  
 import javax.faces.context.FacesContext;  
 import javax.faces.event.AbortProcessingException;  
 import javax.faces.event.ActionEvent;  
 import javax.faces.event.ActionListener;  
 
 public class LoginActionListener implements ActionListener {  
 
     public void processAction(ActionEvent event) throws AbortProcessingException {  
         FacesContext context = FacesContext.getCurrentInstance();  
         context.getExternalContext().getRequestMap().put("loginActionMessage",  
                 "Login event happened");  
     }  
 }

#p#

JSF 2.0對Ajax的支持

JSF 2.0天生就支持Ajax，利用Ajax技術(shù)，Web應(yīng)用程序在后臺以異步的方式從服務(wù)器獲取數(shù)據(jù)。支持Ajax后，允許頁面局部刷新，允許選擇視圖中的一個組件進行處理而不影響其它組件。

要在JSF中使用Ajax，需要訪問有資源標(biāo)識符的JavaScript資源jsf.js，它存在于javax.faces資源庫中，包含讓JSF與Ajax交互的JavaScript API，JavaScript API由一組標(biāo)準(zhǔn)的JavaScript函數(shù)組成，使JavaServer Faces框架中的Ajax操作變得簡單了，你幾乎不用直接包括這個文件，當(dāng)你使用任何開啟Ajax的標(biāo)簽或組件時，JSF會自動包括它。然后你就可以使用<f:ajax>標(biāo)簽或調(diào)用JavaScript API中的函數(shù)了。

下面是一個使用<f:ajax>標(biāo)簽的示例：

<h:commandButton id="button1"> 
      <f:ajax execute="..." render="..."/> 
   </h:commandButton>

這里的<f:ajax>標(biāo)簽是嵌套在<h:commandButton>標(biāo)簽內(nèi)的，這樣會結(jié)合在execute屬性中指定的Ajax行為和<h:commandButton>標(biāo)簽呈現(xiàn)的命令按鈕，你也可以指定一個event屬性來識別JavaScript DOM事件，如果你不指定event屬性，JSF使用組件的默認(rèn)行為，這里的默認(rèn)行為是onclick，因此JSF結(jié)合execute屬性中指定的Ajax請求和呈現(xiàn)按鈕的onclick事件。用戶點擊該按鈕時，JSF提交Ajax請求給服務(wù)器。

使用<f:ajax>標(biāo)簽的一個好處是不用在頁面中指定載入jsf.js，它會自動為你載入，相比之下，如果你調(diào)用JavaScript API，首先需要使用<h:outputScript>讓jsf.js對當(dāng)前視圖可用，例如：

<f:view contentType="text/html"/> 
     <h:head> 
       <meta... 
       <title... 
     </h:head> 
     <h:body> 
       ...  
       <h:outputScript name="jsf.js" library="javax.faces" target="body"/> 
       ...  
     </h:body> 
     ...

然后才可以使用JavaScript API中的函數(shù)產(chǎn)生Ajax請求。例如，你使用JavaScript函數(shù)jsf.ajax.request向服務(wù)器發(fā)送一個請求，如下面的代碼：

<h:commandButton id="button1" value="submit"> 
   onclick="jsf.ajax.request(this,event);" />

代碼包括一個<h:commandButton>標(biāo)簽，它呈現(xiàn)為一個按鈕，用戶點擊這個按鈕時，向服務(wù)器提交一個Ajax請求。

Servlet 3.0和JSF2.0中的更多新特性

Servlet 3.0中另一個新特性是允許你使用ServletContext類中的方法通過編程在Web應(yīng)用程序啟動時向其添加Servlet和Servlet過濾器，使用addServlet()方法添加Servlet，使用addFilter()添加Servlet過濾器。結(jié)合可插拔式共享框架特性，Web框架可以在無開發(fā)人員介入的情況下實現(xiàn)自我配置。

#t#此外Servlet 3.0加入了許多安全特性，除了聲明安全外，Server 3.0通過HttpServletRequest接口提供了編程安全，例如，你可以在應(yīng)用程序中使用HttpServletRequest的authenticate()方法執(zhí)行用戶名和密碼的收集，或者使用login()方法指向容器驗證一個非強制請求上下文中的請求調(diào)用者。有關(guān)Servlet 3.0的更多特性，請參閱JSR 315規(guī)范。

JSF 2.0中的一些額外增強與資源如何打包和處理有關(guān)，JSF 2.0標(biāo)準(zhǔn)化了打包哪里的資源。所有資源都放在resources目錄或一個子目錄下，資源需要按順序正確地進行渲染，例如CSS文件和JavaScript文件，圖3顯示了Netbeans中的一個JSF項目部分結(jié)構(gòu)及文件，注意其中的resources目錄，CSS和images目錄。

圖 3 JSF應(yīng)用程序中resources目錄下的資源

JSF 2.0也包括顯示和處理資源的API，使用javax.faces.application.Resource類顯示一個資源，使用javax.faces.application.ResourceHandler類創(chuàng)建資源的實例。有關(guān)JSF 2.0的更多信息，請參閱JSR 314規(guī)范。

【51CTO.com譯稿，非經(jīng)授權(quán)請勿轉(zhuǎn)載。合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com，且不得修改原文內(nèi)容。】

原文：Introducing the Java EE 6 Platform 作者：Ed Ort

責(zé)任編輯：yangsai 來源： 51CTO.com

JSF 2.0 Java EE 6