RichFaces - 基本概念

上一頁
下一頁

在本章中，我們將瞭解 RichFaces 的一些基本概念，並學習 RichFaces 如何處理 AJAX 請求以及許多其他功能。

處理 AJAX 請求

如前所述，RichFaces 提供豐富的 UI 元件，即使在沒有實現任何 AJAX 程式碼的情況下，也能在 Web 應用程式中啟用 AJAX 功能。所有這些 AJAX 功能都是透過 **a4:j** 標籤庫引入的。**<a4j:commandLink>，<a4j:commandButton>，<a4j:support>** 和 **<a4j:poll>** 是四個幫助開發人員將 AJAX 功能包含到 Web 應用程式中的標籤。我們將在後續章節中學習更多關於標籤庫的知識。

部分樹處理

在傳統的 AJAX 應用程式中，所有輸入欄位都將作為樹的不同節點進行處理，但在 RichFaces 中，我們可以選擇部分提交樹節點並驗證所需的欄位。

讓我們考慮一個例子來進一步瞭解這一點。假設，HTML 中總共有五個元素 - “姓名”、“員工 ID”、“員工工資”、“員工地址”和“員工部門”。現在您只想驗證或處理員工 ID，這可以使用 RichFaces 實現，但使用 AJAX 無法實現。您需要將整個表單提交到伺服器。RichFaces 提供了一個 execute 屬性，可以識別特定元件並處理它。以下是可用的不同級別的 execute 屬性。

  • **@all** - 此屬性將處理所有資料。

  • **@none** - 當您不想處理任何資料時，可以使用此屬性。

  • **@this** - 這將僅處理請求元件。

  • **@form** - 這將處理包含請求元件的整個表單。

  • **@region** - 這將處理網頁的特定區域。

部分檢視更新

與輸入欄位類似，RichFaces 提供了類似的選項來更新不同的檢視。開發人員可以根據自己的選擇自定義檢視。與 execute 屬性類似，還有一個 render 屬性，其工作方式類似於 execute 屬性。所有這些屬性都基於網頁的 ID 識別符號工作。

以下是可用的不同級別的 render 屬性。

  • **@all** - 這將更新整個元件。

  • **@none** - 這不會更新任何元件。

  • **@this** - 這將僅更新請求元件。

  • **@from** - 這將更新包含請求資料的表單。

  • **@region** - 這將更新網頁的特定區域。

其他 a4j 標籤

到目前為止，我們已經討論了關於 RichFaces 應用程式的概念屬性。在本節中，我們將透過動手示例詳細瞭解它們。

<a4j:AJAX>

這是 RichFaces 提供的核心元件之一。這不過是對 JSF2.0 f:AJAX 標籤的擴充套件部分。此標籤在網頁中發生 JS 事件時觸發 AJAX 請求。以下示例詳細描述了此標籤。在網頁資料夾下建立一個“xhtml”頁面，並將其命名為“a4jAJAXExample.xhtml”。然後，貼上以下程式碼段。

<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://xmlns.jcp.org/jsf/html"   
   xmlns:a4j = "http://richfaces.org/a4j">   
   
   <h:head>   
      <title>a4j:AJAX Tag Example</title>   
   </h:head>   

   <h:body>  
      <h:form id = "form"> 
         <h:inputText value = "#{managedBean.message}"> 
            <a4j:AJAX render = "ShowMessage" /> 
         </h:inputText> 
         
         <h:outputText value = "#{managedBean.message}" id = "ShowMessage" 
            style = "animation-duration"/> 
      </h:form> 
   </h:body> 
   
</html>

我們還需要建立一個託管 Bean 來儲存來自網頁的輸入。繼續並在源包目錄下建立一個 Java 類。以下是 **managedbean.java** 類程式碼。

import javax.faces.bean.ManagedBean;   
import javax.faces.bean.RequestScoped;   

@ManagedBean   
@RequestScoped   

public class managedBean {   
   String message;   
   public String getMessage() {   
      return message;   
   }   
   public void setMessage(String message) {   
      this.message = message;   
   }   
}

儲存這兩個檔案並執行，這將在瀏覽器中生成以下輸出。

Hello Buddy

<a4j:param>

a4j:param 是 f:param 標籤的擴充套件。它用於為屬性或例項變數賦值。此標籤能夠永久地將值分配給例項變數。以下是“a4jparamExample.html”程式碼。

<?xml version = "1.0" encoding = "UTF-8"?>  
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://xmlns.jcp.org/jsf/html"   
   xmlns:a4j = "http://richfaces.org/a4j">  
   
   <h:head> 
      <title>Param tag example</title> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/> 
   </h:head> 
   
   <h:body> 
      <h:form id = "form"> 
         <h:panelGrid columns = "2"> 
            <a4j:commandButton value = "TutorialsPoint" render = "rep"> 
               <a4j:param value = "Tutorials point" assignTo = "#{managedBean.message}" /> 
            </a4j:commandButton> 
  
            <a4j:commandButton value = "RichFace Tutorials" render = "rep"> 
               <a4j:param value = "RichFace Tutorials" assignTo = "#{managedBean.message}" /> 
            </a4j:commandButton> 
         </h:panelGrid> 
         <br /> 
         
         <h:outputText id = "rep" value = "Selected Name:#{managedBean.message}" /> 
      </h:form> 
   </h:body> 
   
</html>

以下是相應的託管 Bean 類程式碼。

import javax.faces.bean.ManagedBean;   
import javax.faces.bean.RequestScoped;   

@ManagedBean   
@RequestScoped   

public class managedBean {   
   String message;   
   public String getMessage() {   
      return message;   
   }   
   public void setMessage(String message) {   
      System.out.println("This method is getting called with"+message); 
      
      // we have added this line in order to check how the AJAX call 
      // happens to the class methods without any direct communication  
      this.message = message;   
   }   
}

繼續執行該檔案。以下是瀏覽器中的輸出。

Richface Tutorials

現在，在伺服器控制檯中，您將看到以下輸出，這證明 xhtml 檔案正在與託管 Bean 通訊，以便在執行時設定例項變數。

Apache Tomcat

<a4j:commandButton>

我們在之前的示例中已經使用了 command button 標籤。它用於在 xhtml 頁面內建立按鈕，該按鈕將生成並與 AJAX 引擎通訊以處理特定請求。它接收輸入並處理它，並在 Web 瀏覽器中呈現輸出。

在前面的示例中，我們建立了兩個按鈕 - “TutorialsPoint” 和“RichFace 教程”。我們的 command button 標籤在內部與託管 Bean 通訊，並設定所需的例項變數。它還負責呈現值。

<a4j:commandLink>

Command link 的工作方式類似於 JSF 2.0 的 <h:commandlink> 元件。command button 在每次 command link 在 JS click 事件上工作時生成基於提交的 AJAX 請求。這是 command button 和 command link 之間唯一的區別。以下示例將幫助您更好地理解標籤庫。建立“a4jCommandLink.xhtml”檔案，並將以下程式碼貼上到其中。

<?xml version = "1.0" encoding = "UTF-8"?>  
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://xmlns.jcp.org/jsf/html"   
   xmlns:a4j = "http://richfaces.org/a4j">  
   
   <h:head> 
      <title>Example of command Link</title> 
   </h:head> 
    
   <h:body> 
      <h:form id = "form">
         <h:panelGrid columns = "3"> 
            <h:outputText value = "Name:" /> 
            <h:inputText value = "#{managedBean.message}" /> 
             <a4j:commandLink value = "Click Me" render = "out" execute = "@form" /> 
         </h:panelGrid> 
      </h:form> 
      <br /> 
      
      <a4j:outputPanel id = "out"> 
         <h:outputText value = "Welcome to #{managedBean.message} !" /> 
      </a4j:outputPanel> 
   </h:body> 
   
</html>

無需更改託管 Bean 類中的任何內容。執行此檔案，以下將是瀏覽器中的輸出。

Click Me

<a4j:outputPanel>

output panel 充當 HTML 頁面的跨度。它用於對網頁的不同元件進行分組，而不是單獨指定它們。在前面的示例中，我們使用了 output panel 來顯示輸入文字框中提供的訊息。以下是 output panel 的語法。

<a4j:outputPanel id = "out"> 
   <h:outputText value = "Welcome to #{managedBean.message} !" /> 
</a4j:outputPanel>

<a4j:region>

這是 RichFaces 的關鍵功能，它允許從網頁中處理某些部分。使用此標籤，部分樹處理發生在 RichFaces 中。它主要用於提高渲染過程。以下示例將幫助您詳細瞭解這一點。請使用以下程式碼建立“a4jregionExample.xhtml”檔案。

<?xml version = "1.0" encoding = "UTF-8"?> 
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:a4j = "http://richfaces.org/a4j" >  
   
   <h:head> 
      <title>Region Example</title>       
   </h:head> 
    
   <h:body> 
      <h:form> 
         <h:inputText value = "#{managedBean.message}"/> 
         <h:inputText value = "#{managedBean.job}"/> 
         <a4j:commandLink id = "one" value = "one"/> 
         
         <a4j:region> 
            <h:inputText value = "#{managedBean.message}"/> 
            <a4j:commandLink id = "two" value = "two"/> 
         </a4j:region>
      </h:form>  
   </h:body> 
   
</html>

除了這個 xhtml 頁面外，請相應地更新我們的 managedBean。

import javax.faces.bean.ManagedBean;   
import javax.faces.bean.RequestScoped;   

@ManagedBean   
@RequestScoped   

public class managedBean {   
   String message;  
   String job; 
      public String getMessage() {   
      return message;   
   }   
   public void setMessage(String message) {   
      System.out.println("setMessage method is getting called with--"+message); 
      this.message = message;   
   } 
   public String getJob() { 
      return job; 
   } 
   public void setJob(String job) { 
      System.out.println("setJob method is getting called with--"+job); 
      this.job = job; 
   } 
}

上述程式碼段將在瀏覽器中生成以下輸出。

One Two

每當單擊 command link “one” 時，它將處理整個表單，但是，當我們單擊 command link “two” 時，只會處理 message 例項，因為它包含在 region 標籤內。類似地，如果我們將 command link 'one' 包含在另一個 region 標籤中，那麼它將只處理前兩個輸入引數。以下是伺服器控制檯的螢幕截圖，每當單擊 command link “two” 時。

Link Two

每當單擊 command link “one” 時，以下將是輸出。

Link Two

<a4j:repeat>

repeat 標籤的工作方式與 JSF 的 <ui:repeat> 標籤完全相同。它有助於迭代網頁中的列表。在以下“a4jRepeat.xhtml”檔案示例中，我們正在迭代託管 Bean 類中的列表。

<?xml version = "1.0" encoding = "UTF-8"?> 
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:a4j = "http://richfaces.org/a4j"> 
   
   <h:head></h:head> 
   
   <h:body> 
      <h:form id = "form"> 
         <h:panelGrid columns = "1" style = "width: 640px"> 
            <a4j:outputPanel id = "panel" layout = "block"> 
               <a4j:repeat       value = "#{managedBean.subjectList}" var = "sub"> 
                  <li> 
                     <h:outputText value = "#{sub}"/> 
                  </li> 
               </a4j:repeat> 
            </a4j:outputPanel> 
         </h:panelGrid> 
      </h:form> 
   </h:body> 
   
</html>

在瀏覽器中執行此特定檔案後，您將獲得以下輸出。

A4 Repeat

<a4j:status>

顧名思義，此標籤在您希望在前端顯示 AJAX 請求的狀態時非常有用。您可以根據自己的選擇包含普通文字訊息或 gif 或基於影像的狀態。對於以下這樣的小型應用程式，您將在前端看到狀態的概覽，但是，當您運行復雜的 AJAX 請求時，此狀態非常明顯。請按如下所示修改“a4jregionExample.xhtml”。

<?xml version = "1.0" encoding = "UTF-8"?> 
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:a4j = "http://richfaces.org/a4j">  
   
   <h:head> 
      <title>Region Example</title> 
   </h:head> 
    
   <h:body> 
      <h:form> 
         <a4j:status startText = "Working..." /> 
            <h:inputText value = "#{managedBean.message}"/> 
            <h:inputText value = "#{managedBean.job}"/> 
            <a4j:commandLink id = "one" value = "one"/>
            
            <a4j:region> 
               <h:inputText value = "#{managedBean.message}"/> 
               <a4j:commandLink id = "two" value = "two"/> 
            </a4j:region> 
            
         <a4j:status startText = "Done" /> 
      </h:form>  
   </h:body> 
   
</html>

每當您執行此應用程式時，您都可以看到兩個狀態“正在處理...”和“已完成”的概覽。這些狀態將在請求完成後自動消失。

<a4j:include>/<a4j:keepAlive>

Include 和 keepAlive 這兩個標籤是在 RichFaces 3.0 中引入的，但在 RichFaces 4 中，這些標籤已棄用，因為這些功能可以使用 Facelets 中使用的其他不同標籤輕鬆實現，例如 <ui:include> 和 <ui:insert>。顧名思義，include 用於將一個頁面包含到另一個頁面中，keepAlive 用於控制與 JSF 頁面關聯的託管 Bean 的作用域。建議使用任何軟體 API 的更新版本，並使用 <UI> 元件和“註釋”實現來實現業務目標。

<a4j:log>

顧名思義，此 a4j 元件有助於將日誌資訊生成到 Web 瀏覽器中。以下示例詳細解釋了此標籤。以以下方式編輯“a4jregionExample.xhtml”檔案。

<?xml version = "1.0" encoding = "UTF-8"?> 
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml" 
   xmlns:ui = "http://java.sun.com/jsf/facelets" 
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:a4j = "http://richfaces.org/a4j">  
   
   <h:head> 
      <title>Region Example</title> 
   </h:head> 
    
   <h:body>
      <h:form> 
         <a4j:status startText = "Working..." /> 
            <h:inputText value = "#{managedBean.message}"/> 
            <h:inputText value = "#{managedBean.job}"/> 
            <a4j:commandLink id = "one" value = "one"/> 
            
            <a4j:region> 
               <h:inputText value = "#{managedBean.message}"/> 
               <a4j:commandLink id = "two" value = "two"/> 
            </a4j:region> 
            
            <a4j:log></a4j:log> 
         <a4j:status startText = "Done" /> 
      </h:form>  
   </h:body>
   
</html>

現在在瀏覽器中執行上述程式碼，以下將是輸出。a4j:log 將在需要時生成所有級別的所需日誌。

A4:log

<a4j:jsFunction>

這是 RichFaces 最高階的功能，其中可以在沒有任何 JavaScript 程式碼的情況下建立自動 JS 函式。CDK 將根據任何 JS 事件生成自動 JavaScript 程式碼。

在以下示例中，我們正在建立一個 JavaScript 函式，該函式將在我們懸停在指定值上時被呼叫。

<?xml version = "1.0" encoding = "UTF-8"?> 
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml" 
   xmlns:ui = "http://java.sun.com/jsf/facelets" 
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:a4j = "http://richfaces.org/a4j">  
   
   <h:head> 
      <title>Example of JS Function</title> 
   </h:head> 
    
   <h:body> 
      <table width = "500" border = "1"> 
         <tbody> 
            <tr> 
               <td>
                  <span onmouseover = "showMySkill('core java,J2EE')" 
                     onmouseout = "showMySkill('')">BackEnd developer</span>
               </td> 
               <td>
                  <span onmouseover = "showMySkill('DB,RDBMS,unix')" 
                     onmouseout = "showMySkill('')">Database Admin</span>
               </td> 
               <td>
                  <span onmouseover = "showMySkill(
                     'JS frameworks,html,java scripts')" 
                     onmouseout = "showMySkill('')">Front End Developer</span>
               </td> 
            </tr> 
            <tr> 
               <td colspan = "3">You need to know: 
                  <b><h:outputText id = "showSkillset" value = "#{managedBean.message}"/></b>
               </td> 
            </tr> 
         </tbody> 
      </table> 
      
      <h:form id = "form"> 
         <a4j:jsFunction name = "showMySkill" render = "showSkillset"> 
            <a4j:param name = "name" assignTo = "#{managedBean.message}" /> 
         </a4j:jsFunction> 
      </h:form> 
   </h:body> 
</html>

上述程式碼將在瀏覽器中生成以下輸出。根據 JS 事件，CDK 將覆蓋名為“showMySkill()”的方法，並在瀏覽器中列印所需的值。

JS Event

<a4j:AJAXListener>

當您希望在將結果呈現到瀏覽器之前執行特定偵聽器時，使用此標籤。此標籤在 RichFaces 4 中不可用，因為相同的功能在中可用，您可以在其中在任何 JS 事件發生時建立 AJAX 請求。雖然建議使用更新的軟體版本，但如果您仍在使用 RichFaces 3，則可以按以下方式使用此標籤。

<rich:panel> 
   <f:facet name = "header">Using a4j:actionListener</f:facet> 
   <a4j:commandButton value="Submit" reRender = "#{AJAXBean.areas}"> 
      <a4j:AJAXListener binding = "#{AJAXBean.renderAreasListener}"/> 
   </a4j:commandButton> 
</rich:panel>

在上述示例中，單擊“提交”按鈕時，將建立一個 JS 事件，該事件將呼叫 bean 類中實現的“areas”方法，並將相應的結果作為結果呈現。

列印頁面

上一頁
下一頁
廣告

© . All rights reserved.