自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

在Java EE 6中使用JSF 2.0簡(jiǎn)化頁面制作

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

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

簡(jiǎn)化JSF 2.0頁面制作

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

Facelets

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

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

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

  1. <xml version="1.0" encoding="UTF-8"?> 
  2.            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3.            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" 
  5.            xmlns:f="http://java.sun.com/jsf/core" 
  6.            xmlns:h="http://java.sun.com/jsf/html" 
  7.            xmlns:ui="http://java.sun.com/jsf/facelets"> 
  8.    <head> 
  9.            <title>Guess Number JSF Application</title> 
  10.    </head> 
  11.    <body> 
  12.       <h:form> 
  13.        <h2> 
  14.        Hi. My name is Duke. I am thinking of a number from <b> 
  15.               <h:outputText value="#{UserNumberBean.minimum}"/> to  
  16.               &nbsp;&nbsp;<b> 
  17.        <h:outputText value="#{UserNumberBean.maximum}"/>.  
  18.        <p> 
  19.          Can you guess it ?  
  20.        </p> 
  21.        <h:graphicImage id="waveImg" url="/wave.med.gif" /> 
  22.        <h:inputText id="userNo" 
  23.              value="#{UserNumberBean.userNumber}"> 
  24.           converterMessage="#{ErrMsg.userNoConvert}"> 
  25.        <f:validateLongRange 
  26.              minimum="#{UserNumberBean.minimum}" 
  27.              maximum="#{UserNumberBean.maximum}"/> 
  28.        </h:inputText> 
  29.        <h:commandButton id="submit" 
  30.              action="success" value="submit" /> 
  31.        <h:message showSummary="true" showDetail="false" 
  32.                   style="color: red;  
  33.                    font-family: 'New Century Schoolbook', serif;  
  34.                    font-style: oblique;  
  35.                    text-decoration: overline"  
  36.                    id="errors1" 
  37.                    for="userNo"/> 
  38.        </h2> 
  39.       </h:form> 
  40.    </body> 
  41.    </html> 
  42.  

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

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

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

模板

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

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

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

  1. <xml version="1.0" encoding="UTF-8"?> 
  2.    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5.    <html xmlns="http://www.w3.org/1999/xhtml" 
  6.          xmlns:ui="http://java.sun.com/jsf/facelets" 
  7.          xmlns:h="http://java.sun.com/jsf/html" 
  8.  
  9.       <head> 
  10.          <title><ui:insert name="title">Page Title</ui:insert</title><body> 
  11.       </head> 
  12.       <body> 
  13.           <div> 
  14.               <ui:insert name="Links"/> 
  15.           </div> 
  16.           <div> 
  17.               <ui:insert name="Data"/> 
  18.          </div> 
  19.       </body> 
  20.    </html> 
  21.  

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

  1. <xml version="1.0" encoding="UTF-8"?> 
  2.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3.  
  4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  5.  
  6.     <html xmlns="http://www.w3.org/1999/xhtml" 
  7.           xmlns:ui="http://java.sun.com/jsf/facelets" 
  8.           xmlns:h="http://java.sun.com/jsf/html" 
  9.      <body> 
  10.        <ui:composition template="/template.xhtml"> 
  11.            This text will not be displayed.  
  12.            <ui:define name="title"> 
  13.                Welcome page  
  14.            </ui:define> 
  15.            <ui:define name="Links"> 
  16.                ... [Links should be here]  
  17.            </ui:define> 
  18.            <ui:define name="Links"> 
  19.                ... [Data should be here]  
  20.            </ui:define> 
  21.        </ui:composition> 
  22.            This text also will not be displayed.  
  23.      </body> 
  24.     </html> 

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

混合組件

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

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

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

登錄面板混合組件 
圖 2 登錄面板混合組件

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3.    <html xmlns="http://www.w3.org/1999/xhtml" 
  4.       xmlns:h="http://java.sun.com/jsf/html" 
  5.       xmlns:f="http://java.sun.com/jsf/core"> 
  6.       xmlns:f="http://java.sun.com/jsf/facelets"> 
  7.       xmlns:composite="http://java.sun.com/jsf/composite"> 
  8.  
  9.    <h:head> 
  10.    <title>This content will not be displayed in the rendered output</title> 
  11.    </h:head> 
  12.  
  13.    <h:body> 
  14.     <composite:interface> 
  15.            <composite:actionSource name="loginEvent"/> 
  16.     </composite:interface> 
  17.     <composite:implementation> 
  18.      <table> 
  19.     <tr> 
  20.        <td>Username:  <h:inputText id="username" /> </td> 
  21.     </tr> 
  22.     <tr> 
  23.        <td>Password: <h:inputSecret id="password" /></td> 
  24.     </tr> 
  25.     <tr> 
  26.        <td><h:commandButton value="Login" id="loginEvent" /></td> 
  27.     </tr> 
  28.      </table> 
  29.     </composite:implementation> 
  30.    </h:body> 
  31.    </html> 
  32.  

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

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

  1. <!DOCTYPE html  
  2.    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.    <html xmlns="http://www.w3.org/1999/xhtml" 
  5.       xmlns:h="http://java.sun.com/jsf/html" 
  6.       xmlns:f="http://java.sun.com/jsf/core" 
  7.       xmlns:ui="http://java.sun.com/jsf/facelets" 
  8.       xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
  9.  
  10.    <head> 
  11.    <title>Example 01>/title> 
  12.    <style type="text/css"> 
  13.    .grayBox { padding: 8px; margin: 10px 0; border: 1px solid #CCC; background-color: #f9f9f9;  }  
  14.    </style> 
  15.    </h:head> 
  16.  
  17.    <h:body> 
  18.      <p>Usage of Login Panel Component</p> 
  19.  
  20.         <ui:debug hotkey="p" rendered="true"/> 
  21.  
  22.      <h:form> 
  23.          <div id="compositeComponent" class="grayBox" style="border: 1px solid #090;"> 
  24.             <ez:loginPanel> 
  25.                 <f:actionListener for="loginEvent" type="example01.LoginActionListener" /> 
  26.  
  27.             </ez:loginPanel> 
  28.          </div> 
  29.      <p><h:commandButton value="reload" /></p> 
  30.  
  31.      <p><h:outputText value="#{loginActionMessage}" /></p> 
  32.      </h:form> 
  33.  
  34.    </h:body> 
  35.    </html> 
  36.  

注意聲明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屬性表示這個(gè)監(jiān)聽器是為混合組件上名為loginEvent行為事件準(zhǔn)備的，你需要編寫代碼來處理事件，例如：

  1. import javax.faces.component.UIComponent;  
  2.  import javax.faces.component.ValueHolder;  
  3.  import javax.faces.context.FacesContext;  
  4.  import javax.faces.event.AbortProcessingException;  
  5.  import javax.faces.event.ActionEvent;  
  6.  import javax.faces.event.ActionListener;  
  7.  
  8.  public class LoginActionListener implements ActionListener {  
  9.  
  10.      public void processAction(ActionEvent event) throws AbortProcessingException {  
  11.          FacesContext context = FacesContext.getCurrentInstance();  
  12.          context.getExternalContext().getRequestMap().put("loginActionMessage",  
  13.                  "Login event happened");  
  14.      }  
  15.  }  

#p#

JSF 2.0對(duì)Ajax的支持

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

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

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

  1. <h:commandButton id="button1"> 
  2.       <f:ajax execute="..." render="..."/> 
  3.    </h:commandButton> 
  4.  

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

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

  1. <f:view contentType="text/html"/> 
  2.      <h:head> 
  3.        <meta... 
  4.        <title... 
  5.      </h:head> 
  6.      <h:body> 
  7.        ...  
  8.        <h:outputScript name="jsf.js" library="javax.faces" target="body"/> 
  9.        ...  
  10.      </h:body> 
  11.      ...  
  12.  

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

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

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

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

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

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

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

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

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

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

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

責(zé)任編輯：yangsai 來源： 51CTO.com
JSF 2.0Java EE 6
相關(guān)推薦

2009-06-22 17:26:26

頁面導(dǎo)航JSF

2011-10-26 10:12:53

Sencha Touc布局

2010-01-26 09:10:38

Java EE 6注解Profile

2009-06-24 17:34:58

使用JSF的經(jīng)驗(yàn)

2009-06-23 11:35:44

JSF的Naviati

2009-07-03 17:52:17

JSP2.0

2009-06-24 17:21:23

JSF框架設(shè)計(jì)模式

2009-06-22 16:24:33

JSF框架中使用的設(shè)計(jì)

2024-03-04 11:52:16

Flutter應(yīng)用程序資產(chǎn)管理

2009-07-21 15:55:59

使用Web PartsASP.NET 2.0

2021-03-22 08:45:30

異步編程Java

2012-06-29 14:40:39

英偉達(dá)SPI

2020-09-17 06:00:21

Git

2011-03-11 09:20:35

jQueryjavascript

2009-08-04 09:39:11

2009-06-01 09:30:51

JSF2.0FaceletsAjax4JSF

2009-02-25 10:55:29

FCKeditor控件JSP

2009-06-26 17:27:15

JSF文件

2010-01-22 09:52:32

JPA 2.0Java EE 6

2011-06-08 16:56:37

VS2008 Qt
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)