- RichFaces 教程
- RichFaces - 首頁
- RichFaces - 概述
- RichFaces - 環境設定
- RichFaces - 架構
- RichFaces - 基本概念
- RichFaces - 富皮膚
- RichFaces - 輸入元件
- RichFaces - 輸出元件
- RichFaces - 迭代元件
- RichFaces - 選擇元件
- RichFaces - 選單元件
- RichFaces - 富樹
- RichFaces - 錯誤處理
- RichFaces 有用資源
- RichFaces 快速指南
- RichFaces - 有用資源
- RichFaces - 討論
RichFaces 快速指南
RichFaces - 概述
RichFaces 是一個用於 JSF 技術的開源元件庫。它由 JBoss 開發和設計。RichFaces 為 JSF 開發人員提供了可重用的標記和 AJAX 功能，而無需任何前端知識。RichFaces 基於 JSF 2 開發，因此遵循 JSF 的相同生命週期。內建的 AJAX 支援和可自定義的外觀功能為企業級 Java 應用程式開闢了新的視野。
優點和缺點
以下是使用 RichFaces 的一些優點。
AJAX 支援 - RichFaces 消除了舊的樣板 AJAX 和 JavaScript 程式碼，無需在網頁中包含標記。使用 RichFaces，開發人員可以動態包含標記，而無需任何 AJAX 方面的預備知識。
元件開發工具包 (CDK) - 如前所述，開發人員無需關注應用程式中使用的標記，他們只需要包含 RichFaces 標籤即可使用這些功能。這些標記的自動建立將由名為 CDK 的執行時環境完成。
資源處理 - RichFaces 提供額外的支援來建立不同的二進位制檔案，例如影像、Excel、電子表格等。
皮膚定製 - 皮膚定製是 JSF 中引入的一種現代方法，它使控制應用程式的外觀變得非常容易。使用不同的其他可自定義引數進行特別集中的顏色管理，對於開發人員來說非常方便。
以下是使用 RichFaces 的一些缺點。
資源 - 作為一項相當新的技術，獲取高質量資源對於 RichFaces 開發人員來說是一個巨大的問題。
複雜性 - 透過不同階段的轉換和動態標記的建立完全由 CDK 負責。對於傳統的 Web 前端開發者來說，理解 CDK 的內部處理過程有點複雜和令人困惑。
RichFaces - 環境設定
在本節中，您將設定開發環境並配置您的系統，以便您可以繼續進行 RichFaces 開發。
技術要求
根據技術要求，您將學習如何配置 JDK、應用程式伺服器或您選擇的任何 IDE。
系統要求
您可以使用任何執行的系統，對記憶體、RAM 和作業系統沒有任何限制。
JDK 安裝
在繼續操作之前，必須在系統上配置 JDK。請參考Oracle的官方網站下載並安裝 JDK 7 或更高版本。您可能需要設定 Java 的環境變數才能使其正常工作。要在 Windows 作業系統中驗證您的安裝，請在命令提示符中輸入“java –version”，輸出將顯示您系統中安裝的 Java 版本。
IDE 安裝
網際網路上有許多可用的 IDE。您可以根據自己的選擇使用任何 IDE。在本教程中，讓我們使用 NetBeans 8.2。您可以在下表中找到不同 IDE 的下載連結。
| IDE 名稱 | 安裝連結 |
|---|---|
| NetBeans | https://netbeans.org/downloads/ |
| Eclipse | www.eclipse.org/downloads/ |
| Intellij | www.jetbrains.com/idea/download/#section=windows |
始終建議使用最新版本的軟體以充分利用其功能。在本教程中，我們將使用 NetBeans IDE 8.2 和 JDK 8。
伺服器要求
作為應用程式伺服器，您將使用 Tomcat。在本節中，您將在系統中配置 Tomcat 伺服器。如果您正在安裝最新版本的 NetBeans，則可以直接與 NetBeans IDE 一起安裝 Apache Tomcat。如果沒有，請從Tomcat的官方網站下載最新版本的 Tomcat。將解壓後的 Tomcat 檔案儲存在您的 C 盤或 Program Files 資料夾中。這些檔案將在下一階段使用。
客戶端要求
RichFaces 是一個 UI 元件。因此，像每個 UI 元件一樣，網際網路瀏覽器將充當您的應用程式的客戶端。您可以使用任何現代網際網路瀏覽器，例如 IE、Safari、Chrome 等。
開發要求
下載所需的 jar 包：請訪問JBoss的官方網站並下載最新穩定版本的 JBoss jar 包。解壓檔案。為了開發 RichFaces 應用程式，您需要以下 jar 包。
- richfaces-a4j-4.5.17.Final.jar
- richfaces-core-4.5.17.Final.jar
- richfaces-rich-4.5.17.Final.jar
- cssparser-0.9.18.jar
- guava-19.0.jar
- sac-1.3.jar
建立專案
在本節中，讓我們建立一個演示應用程式，稍後將用於進一步學習 RichFaces。在繼續操作之前，強烈建議您下載並安裝前面提到的所有必需軟體和 jar 包。
步驟 1 - 開啟 NetBeans IDE。轉到檔案 → 新建專案。您將被重定向到以下螢幕截圖。
步驟 2 - 分別在“類別”和“專案”選項卡中選擇“Java Web”和“Web 應用程式”，然後單擊“下一步”。
步驟 3 - 在下一個選項卡中，您必須提供專案名稱。在這裡，讓我們將其命名為“RichFaceTutorial”。然後，單擊“下一步”。您將被重定向到以下螢幕截圖，您將在其中設定伺服器詳細資訊。
步驟 4 - 從下拉列表中選擇“Apache Tomcat”，然後單擊“新增”。單擊“新增”後，您將被重定向到一個單獨的螢幕，您需要在其中配置伺服器。要配置伺服器，您需要在上一步中下載的伺服器檔案。
步驟 5 - 從列表中選擇“Apache Tomcat 或 TomEE”，如圖所示，然後單擊“下一步”。您將被重定向到以下螢幕。
步驟 6 - 在伺服器位置，您需要提供下載的 Tomcat 檔案位置。單擊“瀏覽”並導航到所需資料夾路徑，然後單擊“完成”。成功新增伺服器後，您將被重定向到第一個螢幕。單擊“下一步”，您將有機會選擇要新增到應用程式中的不同框架，如下面的螢幕截圖所示。
步驟 7 - 選擇“JavaServer Faces”，在“JavaServer Faces 配置”中，您必須選擇“RichFaces”，然後單擊“完成”。
如果您沒有“RichFaces”作為選項，您可以從構建路徑中新增所需的 jar 檔案。完成此步驟後，您的應用程式就可以部署到應用程式伺服器上了。以下是完成上述所有步驟後應用程式的專案目錄結構。
步驟 8 - 前往並左鍵單擊“index.xhtml”檔案並執行該檔案。您將在瀏覽器中看到以下輸出。
在實際應用程式中，您可能需要生成所需的 war 檔案並將其部署到應用程式伺服器中，因為所有頁面都將相互連結。
但是，在本教程中，我們將逐頁執行應用程式，因為我們需要展示不同標籤的不同功能。
RichFaces - 架構
根據 Red Hat 官方文件，總共有五個元件在內部工作以提供豐富的使用者體驗。以下是五個元件。
AJAX 過濾器 - AJAX 過濾器用於區分來自客戶端瀏覽器的不同型別的請求。要將此元件包含到應用程式中，您需要在應用程式的 web.xml 檔案中註冊 RichFaces 過濾器。AJAX 過濾器在 JSF 應用程式的不同階段的行為有所不同。
AJAX 動作元件 - 動作元件負責將客戶端請求從瀏覽器傳送到 AJAX 引擎，AJAX 引擎將在那裡處理請求並呈現所需的檢視作為響應。
AJAX 容器 - AJAX 容器在概念上類似於 Spring 容器。它基本上識別客戶端瀏覽器特定區域以處理 AJAX 請求。
皮膚功能 - 皮膚和主題統稱為皮膚功能。此模組獨立執行，為整個應用程式的外觀提供廣泛的支援。
RichFaces JavaScript 引擎 - JavaScript 引擎在客戶端執行，它向 AJAX 引擎傳送更新以準備響應。此引擎自動工作，因此我們無需編寫任何額外的程式碼來控制它。
以下是 RichFaces 應用程式在 MVC 範例中的架構圖。
在上圖中，使用者的活動將被處理為“JS 事件”。之後，“JS 事件”將被傳輸到“XML 過濾器”，它實際上是 AJAX 過濾器的元件。“XML 過濾器”負責生成和處理使用者請求。所有其他元件都位於不同的 jar 檔案內部。我們需要使用適當的標籤庫才能使用這些功能。
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;
}
}
儲存這兩個檔案並執行，這將在瀏覽器中產生以下輸出。
<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;
}
}
執行該檔案。以下是瀏覽器中的輸出。
現在，您將在伺服器控制檯中看到以下輸出，這證明xhtml檔案正在與託管Bean通訊以在執行時設定例項變數。
<a4j:commandButton>
我們已經在之前的示例中使用了command button標籤。它用於在xhtml頁面內建立一個按鈕，該按鈕將生成並與AJAX引擎通訊以處理特定請求。它接收輸入，處理輸入並在Web瀏覽器中呈現輸出。
在之前的示例中，我們建立了兩個按鈕—“TutorialsPoint”和“RichFace Tutorials”。我們的command button標籤會在內部與託管Bean通訊並設定所需的例項變數。它還負責呈現值。
<a4j:commandLink>
Command link的工作方式類似於JSF 2.0的<h:commandlink>元件。command button會在每次command link在JS點選事件上工作時生成基於提交的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類中的任何內容。執行此檔案，瀏覽器中將顯示以下輸出。
<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”命令連結時，只有訊息例項將被處理，因為它包含在一個region標籤中。同樣，如果我們將“one”命令連結包含在另一個region標籤中，那麼它將只處理前兩個輸入引數。以下是伺服器控制檯的螢幕截圖，每當單擊“two”命令連結時。
每當單擊“one”命令連結時，將產生以下輸出。
<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>
在瀏覽器中執行此特定檔案後，您將獲得以下輸出。
<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>
執行此應用程式時，您可以看到“working...”和“Done”這兩個狀態的簡要資訊。這些狀態將在請求完成後自動消失。
<a4j:include>/<a4j:keepAlive>
include和keepAlive這兩個標籤是在RichFaces 3.0中引入的，但在RichFaces 4中，這些標籤已被棄用，因為這些功能可以使用Facelets中使用的其他不同標籤（如<ui:include>和<ui:insert>）輕鬆實現。顧名思義，include是用來將一個頁面包含到另一個頁面中，keepAlive是用來控制與JSF頁面關聯的託管Bean的作用域。建議使用軟體API的更新版本，並使用<UI>元件和“annotation”實現來實現業務目標。
<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將在需要時生成所有級別的所需日誌。
<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()”的方法，並將所需的值列印到瀏覽器中。
<a4j:AJAXListener>
當您想要在將結果渲染到瀏覽器之前執行特定偵聽器時，可以使用此標籤。此標籤在RichFaces 4中不可用，因為相同的功能在
<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>
在上面的示例中，單擊“Submit”按鈕時，將建立一個JS事件，該事件將呼叫bean類中實現的“areas”方法，並將相應的結果作為結果呈現。
RichFaces - 富皮膚
RichFaces提供了一種新的功能，可以集中控制網站的外觀，稱為Rich Skin。Skin是舊CSS檔案的更高階實現，對於後端開發人員來說，它更方便地控制網站的外觀。有一些內建的皮膚可用，可以根據您的選擇進行定製。
內建皮膚
RichFaces元件jar檔案中提供許多內建皮膚。以下是一些可用的內建Rich皮膚。
- Default
- Plain
- emeraldTown
- blueSky
- wine
- japanCherry
- ruby
- classic
- deepMarine
- NULL
在下面的示例中，我們將實現“classic”皮膚。實現上述任何皮膚都非常容易。在繼續之前，請使用下面給出的程式碼行在“web.xml”檔案中新增皮膚。我們可以從上面的列表中新增任何我們選擇的皮膚。我們只需要用相應的皮膚名稱修改<param-value>標籤。
<context-param> <param-name>org.richfaces.skin</param-name> <param-value>classic</param-value> </context-param>
新增此內容後，請建立一個“SkinExample.xhtml”檔案並將以下程式碼行新增到其中。
<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition 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:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Built in Skin</title>
</h:head>
<h:body>
<h:form>
<rich:panel style = "width:60%">
<rich:tabPanel switchType = "AJAX">
<rich:tab header = "Name">
Tutorials Point
</rich:tab>
<rich:tab header = "Features">
Best Place to learn
</rich:tab>
</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>
執行此頁面後，瀏覽器中將顯示以下輸出，其中每個選項卡都會動態傳播以生成不同的輸出。單擊下一個選項卡後，它將顯示不同的輸出。
在上面的示例中，<rich:panel>建立一個面板，我們使用<rich:tab>在其中建立不同的選項卡。<rich:tabPanel switchType = "AJAX">提供所用選項卡的AJAX轉換。
建立/修改皮膚
皮膚只是CSS設計的擴充套件版本，它將在執行時應用於網頁。在上一節中，我們學習了皮膚的一些基本的內建功能。在本節中，我們將建立我們自己的皮膚或修改現有的皮膚。RichFaces中的皮膚可以在以下三個級別進行定製。
**皮膚屬性檔案** − 所有皮膚都是透過“rechfaces-a4j-4.5.17.Final”jar檔案中提到的不同屬性檔案生成的。我們只需要建立一個相同的屬性檔案，並將其儲存在我們的原始檔夾下，然後編輯其屬性。我們需要相應地更改我們的“web.xml”以反映我們網站上的新皮膚屬性。
**元件樣式表** − 實現您選擇的新的CSS檔案，並在應用程式中使用它。
**覆蓋樣式類** − 可以透過直接在xhtml檔案中提及樣式屬性來覆蓋樣式。
讓我們考慮一個例子。我們將定製我們之前的“classic”皮膚。在“source”包內建立一個屬性檔案，並將其命名為“custom.skin.properties”。以下是此屬性檔案的條目，這些條目是從上面提到的jar檔案中提供的其他屬性檔案中複製的。
#Colors headerBackgroundColor = #black headerGradientColor = #DF5858 headerTextColor = #FFFFFF headerWeightFont = bold generalBackgroundColor = #f1f1f1 generalTextColor = #000000 generalSizeFont = 10px generalFamilyFont = Arial, Verdana, sans-serif controlTextColor = #000000 controlBackgroundColor = #ffffff additionalBackgroundColor = #F9E4E4 shadowBackgroundColor = #000000 shadowOpacity = 1 panelBorderColor = #C0C0C0 subBorderColor = #ffffff tabBackgroundColor = #EDAEAE tabDisabledTextColor = #C47979 trimColor = #F7C4C4 tipBackgroundColor = #FAE6B0 tipBorderColor = #E5973E selectControlColor = #FF9409 generalLinkColor = #CF0000 hoverLinkColor = #FF0000 visitedLinkColor = #CF0000 # Fonts headerSizeFont = 11px headerFamilyFont = Arial, Verdana, sans-serif tabSizeFont = 11 tabFamilyFont = Arial, Verdana, sans-serif buttonSizeFont = 11 CHAPTER 11 ■ SKINS 223 buttonFamilyFont = Arial, Verdana, sans-serif tableBackgroundColor = #FFFFFF tableFooterBackgroundColor = #cccccc tableSubfooterBackgroundColor = #f1f1f1 tableBorderColor = #C0C0C0 tableBorderWidth = 1px #Calendar colors calendarWeekBackgroundColor = #f5f5f5 calendarHolidaysBackgroundColor = #FFF1F1 calendarHolidaysTextColor = #980808 calendarCurrentBackgroundColor = #808080 calendarCurrentTextColor = #ffffff calendarSpecBackgroundColor = #f1f1f1 calendarSpecTextColor = #000000 warningColor = #FFE6E6 warningBackgroundColor = #FF0000 editorBackgroundColor = #F1F1F1 editBackgroundColor = #FEFFDA #Gradients Gradient Type = plain
根據技能水平，我們可以更改此屬性檔案中的任何屬性。我們可以新增新的樣式類或編輯現有的樣式類。完成新屬性檔案的建立後，是時候將其新增到“web.xml”檔案中。以下是“web.xml”的條目，它應該指向我們的皮膚。
<context-param> <param-name>org.richfaces.skin</param-name> <param-value>custom</param-value> </context-param>
**注意** − 確保新的屬性檔案存在於源目錄中，否則它將丟擲一個執行時錯誤，提示“NoClassFound Exception”。
繼續執行前面名為“SkinExample.xhtml”的檔案。瀏覽器中將顯示以下輸出，我們將能夠看到網站的整體外觀已更改為“Ruby”，因為從ruby.properties檔案中複製了一個新的屬性檔案。
執行時更改皮膚
在這個例子中，我們將執行時更改皮膚。建立一個如下所示的皮膚類。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class skinBean {
private String skin;
public skinBean() {
this.skin="plane";
}
public String getSkin() {
return skin;
}
public void setSkin(String skin) {
this.skin = skin;
}
}
然後修改“web.xml”檔案如下，以便在執行時填充皮膚名稱。
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>#{skinBean.skin}</param-value>
</context-param>
完成此操作後，我們需要更改JSF應用程式的配置檔案。這些檔案位於web-INF資料夾下。向其中新增以下bean屬性。
<managed-bean>
<managed-bean-name>skinBean</managed-bean-name>
<managed-bean-class>SkinBean</managed-bean-class>>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>skin</property-name>
<value>plain</value>
</managed-property>
</managed-bean>
以下是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"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>TODO supply a title</title>
</h:head>
<h:body>
<h:form>
<div style = "display: block; float: left">
<h:selectOneRadio value = "#{skinBean.skin}" border = "0"
layout = "pageDirection" title = "Changing skin" style = "font-size: 8;
font-family: comic" onchange = "submit()">
<f:selectItem itemLabel = "plain" itemValue = "plain" />
<f:selectItem itemLabel = "emeraldTown" itemValue = "emeraldTown" />
<f:selectItem itemLabel = "blueSky" itemValue = "blueSky" />
<f:selectItem itemLabel = "wine" itemValue = "wine" />
<f:selectItem itemLabel = "japanCherry" itemValue = "japanCherry" />
<f:selectItem itemLabel = "ruby" itemValue = "ruby" />
<f:selectItem itemLabel = "deepMarine" itemValue = "deepMarine" />
</h:selectOneRadio>
</div>
<div style = "display: block; float: left">
<rich:panel >
<rich:panelMenu style = "font-family: monospace; font-size: 12;">
Changing skin in runtime
</rich:panelMenu>
<rich:panelMenu style = "font-family: monospace; font-size: 12;">
This is a result of the modification "blueSky" skin
</rich:panelMenu>
</rich:panel>
</div>
</h:form>
</h:body>
</html>
以上程式碼將在瀏覽器中產生以下輸出。
在上面的例子中，我們最初選擇“plain”，因此它指向plain。一旦你透過單選按鈕進行傳播，它將相應地改變顏色。
RichFaces - 輸入元件
到目前為止，我們已經學習了很多關於RichFaces的不同AJAX元件以及一個名為“Skin”的新功能。在本章中，我們將學習RichFaces提供的不同“Rich”元件，以便開發一個現代的web應用程式。以下是“RichFaces”提供的不同輸入元件。
<rich:inplaceInput>
Rich inplaceInput提供了一個建立可編輯文字框而不是普通輸入文字框的機會。在下面的例子中，我們將使用這個元件建立一個可編輯文字框。建立一個xhtml檔案並將其命名為“richinplaceInput.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>TODO supply a title</title>
</h:head>
<h:body>
<f:view></f:view>
<h:form>
<rich:inplaceInput value = "#{managedBean.message}"
defaultLabel = "Enter Your Name"/>
</h:form>
</h:body>
</html>
儲存此檔案並執行它。瀏覽器中將顯示以下輸出。
繼續在該文字框中輸入您選擇的任何內容，然後按Enter鍵。此標籤還提供內聯編輯選項。編輯後的輸出如下所示。
<rich: inplaceSelect>
這是RichFaces提供的另一個輸入標記，使用者可以從中選擇一個輸入值下拉列表，它也是內聯和可編輯的。我們需要從內部bean類填充下拉列表。請建立一個“xhtml”檔案並將其命名為“richinplaceSelectExample.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>TODO supply a title</title>
</h:head>
<h:body>
<h:form>
<rich:inplaceSelect value = "#{subject.subjectName}" defaultLabel = "Click to Select Country">
<f:selectItems value = "#{subject.SubJectList()}"></f:selectItems>
</rich:inplaceSelect>
</h:form>
</h:body>
</html>
在上面的例子中，我們將從後端填充下拉選項。這是一個名為“subject.java”的bean類。
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Subject {
String SubjectName;
public Subject() {
}
public Subject(String SubjectName) {
this.SubjectName = SubjectName;
}
public List<String> SubJectList() {
//this list to be rendered
ArrayList<String> list = new ArrayList<>();
list.add("JAVA");
list.add("DOTNET");
list.add("COBOL");
list.add("AJAX");
list.add("JAVA SCRIPT");
return list;
}
public String getSubjectName() {
return SubjectName;
}
public void setSubjectName(String SubjectName) {
this.SubjectName = SubjectName;
}
}
我們將透過列表傳遞的所有科目名稱都將顯示在下拉選單中。執行此應用程式後的輸出如下所示。
<rich:SuggestionBox>
<rich:SuggestionBox>用於根據輸入文字框中提供的輸入向用戶提供建議。此標籤在內部建立一個JS事件，並呼叫所需的偵聽器類以從後端提供建議。不幸的是，這個suggestionBox和ComboBox都合併到RichFaces 4中名為“<rich:autocomplete>”的單獨標籤中，但是，如果您使用的是RichFaces 3，您可以使用以下標籤。
<h:inputText id = "city" value = "#{capitalsBean.capital}" />
<rich:suggestionbox for = "city" var = "result"
suggestionAction = "#{capitalsBean.autocomplete}">
<h:column>
<h:outputText value = "#{result.name}" />
</h:column>
</rich:suggestionbox>
其中“capitalsBean”將是一個具有不同引數的Java類，而名為“autocomplete”的偵聽器類將在執行時設定“capital”例項變數的值，並提供所需的輸出選擇。強烈建議使用RichFaces 4“autocomplete”而不是使用此標籤，因為設計者不再支援此標籤。
<rich:comboBox>
<rich:comboBox>的工作方式與<rich:suggestionBox>完全相同，但是，它不是呼叫偵聽器類，而是將一些建議預先呈現到客戶端瀏覽器中，這些建議相互互動並提供所需的輸出。像<rich:sugegstionBox>一樣，此功能在新版本中也已棄用，並使用名為“<rich:autocomplete>”的另一個標籤，如下面的程式碼所示。
建立一個單獨的檔案並將其命名為“richAutoComplete.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head></h:head>
<h:body>
<h:form id = "form">
<h:form id = "form">
<rich:autocomplete mode = "cachedAJAX" minChars = "2"
autocompleteMethod = "#{autoComplete.SubJectList()}" />
</h:form>
</h:form>
</h:body>
</html>
在上面的例子中，我們透過RichFaces的自動完成功能填充科目列表。建立一個另一個Java類並將其命名為“autoComplete.java”。
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class autoComplete {
public autoComplete(){}
private List<String> autoCompleteList=new ArrayList<>();
public List<String> SubJectList() {
//ArrayList<String> list = new ArrayList<>();
autoCompleteList.add("JAVA");
autoCompleteList.add("DOTNET");
autoCompleteList.add("COBOL");
autoCompleteList.add("AJAX");
autoCompleteList.add("JAVA SCRIPT");
return autoCompleteList;
}
public List<String> getAutoCompleteList() {
return autoCompleteList;
}
public void setAutoCompleteList(List<String> autoCompleteList) {
this.autoCompleteList = autoCompleteList;
}
}
上述檔案充當bean類，SubjectList()是實際將響應呈現給瀏覽器的方法。在<SuggestionBox>、<ComboBox>標籤中，我們需要實現偵聽器類，但是，在<autocomplete>標籤的情況下，偵聽器類的建立已經自動化，這對於開發人員來說更容易。以上程式碼將在瀏覽器中產生以下輸出。
<rich:inputNumberSlider>
這是一個非常簡單的標籤，可以幫助開發人員根據數字區間建立一個數字滑塊。建立“inputNumberSlider.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head></h:head>
<h:body>
<h:form>
<h:outputText value = "Slide Bar example"></h:outputText>
<rich:inputNumberSlider
minValue = "1"
maxValue = "10"
showArrows = "false"
showTooltip = "false"
step = "1">
</rich:inputNumberSlider>
</h:form>
</h:body>
</html>
在上面的例子中，屬性非常具有描述性。以上程式碼將在瀏覽器中產生以下輸出。
<rich:Calendar>
顧名思義，此標籤將幫助在瀏覽器中建立一個日曆。建立一個單獨的檔案並將其命名為“richCalendar.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head></h:head>
<h:body>
<h:form>
<h1>Calendar</h1>
<rich:calendar value = "#{calendarBean.selectedDate}"
locale = "#{calendarBean.locale}"
popup = "#{calendarBean.popup}"
datePattern = "#{calendar.pattern}"
style = "width:200px">
</rich:calendar>
</h:form>
</h:body>
</html>
我們需要建立另一個名為“calendarBean.java”的類來儲存所有日曆值，例如日期、區域設定、日期模式等。以下是“calendarBean.java”的程式碼。
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
import javax.faces.event.ValueChangeEvent;
public class CalendarBean {
private static final String[] WEEK_DAY_LABELS = new String[] {
"Sun *", "Mon +", "Tue +", "Wed +", "Thu +", "Fri +", "Sat *" };
private Locale locale;
private boolean popup;
private boolean readonly;
private boolean showInput;
private boolean enableManualInput;
private String pattern;
private Date currentDate;
private Date selectedDate;
private String jointPoint;
private String direction;
private String boundary;
private boolean useCustomDayLabels;
public Locale getLocale() {
return locale;
}
public void setLocale(Locale locale) {
this.locale = locale;
}
public boolean isPopup() {
return popup;
}
public void setPopup(boolean popup) {
this.popup = popup;
}
public String getPattern() {
return pattern;
}
public void setPattern(String pattern) {
this.pattern = pattern;
}
public CalendarBean() {
locale = Locale.US;
popup = true;
pattern = "MMM d, yyyy";
jointPoint = "bottomleft";
direction = "bottomright";
readonly = true;
enableManualInput = false;
showInput = true;
boundary = "inactive";
}
public boolean isShowInput() {
return showInput;
}
public void setShowInput(boolean showInput) {
this.showInput = showInput;
}
public boolean isEnableManualInput() {
return enableManualInput;
}
public void setEnableManualInput(boolean enableManualInput) {
this.enableManualInput = enableManualInput;
}
public boolean isReadonly() {
return readonly;
}
public void setReadonly(boolean readonly) {
this.readonly = readonly;
}
public void selectLocale(ValueChangeEvent event) {
String tLocale = (String) event.getNewValue();
if (tLocale != null) {
String lang = tLocale.substring(0, 2);
String country = tLocale.substring(3);
locale = new Locale(lang, country, "");
}
}
public boolean isUseCustomDayLabels() {
return useCustomDayLabels;
}
public void setUseCustomDayLabels(boolean useCustomDayLabels) {
this.useCustomDayLabels = useCustomDayLabels;
}
public Object getWeekDayLabelsShort() {
if (isUseCustomDayLabels()) {
return WEEK_DAY_LABELS;
} else {
return null;
}
}
public String getCurrentDateAsText() {
Date currentDate = getCurrentDate();
if (currentDate ! = null) {
return DateFormat.getDateInstance(DateFormat.FULL).format(currentDate);
}
return null;
}
public Date getCurrentDate() {
return currentDate;
}
public void setCurrentDate(Date currentDate) {
this.currentDate = currentDate;
}
public Date getSelectedDate() {
return selectedDate;
}
public void setSelectedDate(Date selectedDate) {
this.selectedDate = selectedDate;
}
public String getJointPoint() {
return jointPoint;
}
public void setJointPoint(String jointPoint) {
this.jointPoint = jointPoint;
}
public void selectJointPoint(ValueChangeEvent event) {
jointPoint = (String) event.getNewValue();
}
public String getDirection() {
return direction;
}
public void setDirection(String direction) {
this.direction = direction;
}
public void selectDirection(ValueChangeEvent event) {
direction = (String) event.getNewValue();
}
public String getBoundary() {
return boundary;
}
public void setBoundary(String boundary) {
this.boundary = boundary;
}
}
以上程式碼將在瀏覽器中生成以下輸出。
<rich:InputNumberSpinner>
此標籤幫助開發人員建立一個微調器來填充bean的例項。以下是一個示例，將幫助您詳細瞭解微調器標籤。請建立一個單獨的xhtml檔案，並將其命名為“InputNumberSpinner.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Number Slider Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value = "Select a Date"></h:outputText>
<br/>
<br/>
<rich:inputNumberSpinner
minValue = "1"
maxValue = "31"
step = "1">
</rich:inputNumberSpinner>
</h:form>
</h:body>
</html>
上面的程式碼段將在瀏覽器中產生以下輸出。
RichFaces - 輸出元件
在上一章中，我們學習了不同的輸入欄位或標籤，這些欄位或標籤可以幫助使用者透過瀏覽器提供輸入。在本章中，我們將學習RichFaces提供的不同輸出元件。
<rich:Panel>
在我們之前的某些示例中，我們已經遇到了panel標籤。<rich:panel>在網頁內建立一個矩形區域，其中可能包含任何資訊。您可以在一個面板內包含其他面板、影像和任何其他豐富的元件。
在下面的示例中，我們將根據選擇建立一個自定義面板，並將使用“header”屬性為面板提供標題。請建立一個xhtml檔案並將其命名為“richPanelExamlple.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Panel Example</title>
</h:head>
<h:body>
<rich:panel header = "RichFace Tutorials " style = "font-size: 500px;
align-items:center; background-color: activecaption">
RichFace Tutorials Presented by TutorialsPoint.com.
</rich:panel>
</h:body>
</html>
上面的程式碼段將在瀏覽器中產生以下輸出。
<rich:simpleTogglePanel>
simpleTogglePanel為開發人員提供了一個以動態方式更改面板內容的機會。但是，在RichFaces 4中，此標籤已被刪除。JBoss引入了高階標籤，如<rich:togglePanel>、<rich:tab>和<rich:tabPanel>。建議使用更新版本的RichFaces標籤以獲得更多功能。如果您仍然使用RichFaces 3，則可以使用以下標籤。
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<rich:simpleTogglePanel switchType = "client" label = "SimpleToggle">
The simple example of SimpleToggle tag
</rich:simpleTogglePanel>
</ui:composition>
<rich:tabPanel>
此標籤幫助開發人員在一個面板內建立不同的選項卡。我們在皮膚章節中使用了此標籤，我們在另一個面板內建立了兩個單獨的標籤。以下程式碼將描述我們如何使用<rich:tabPanel>。
<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition 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:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Tab Example</title>
</h:head>
<h:body>
<h:form>
<rich:panel style = "width:60%">
<rich:tabPanel switchType = "AJAX">
<rich:tab header = "Name">
Tutorials Point----This is Tab Number 1
</rich:tab>
<rich:tab header = "Features">
Best Place to learn -------This is Tab Number 2
</rich:tab>
</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>
在這個例子中，我們建立了兩個帶有不同標題的選項卡，分別稱為“名稱”和“功能”。這兩個標籤將在<rich:panel>內建立。以上程式碼將產生以下輸出。
<rich:panelBar>
與simpleToggleBar一樣，它允許開發人員根據某些JS事件實現垂直切換。此標籤在RichFaces 4中也被刪除。但是，如果您使用的是RichFaces 3.0，則可以使用它，如下所示。
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<rich:panelBar height = "400" width = "500">
<rich:panelBarItem label = "Toggle1”>
First vertical toggle
</rich:panelBarItem>
<rich:panelBarItem label = ”Toggle2”>
Second Vertical Toggle
</rich:panelBarItem>
</rich:panelBar >
</ ui:composition >
在RichFaces 4中，使用<rich:PanelMenu>標籤實現了相同的功能。
<rich:tab>
我們已經熟悉這個標籤了。在<rich:tabPanel>的示例中，我們使用此標籤建立了不同的選項卡。在下面的示例中，我們建立了兩個標籤。
<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition 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:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Tab Example</title>
</h:head>
<h:body>
<h:form>
<rich:panel style = "width:60%">
<rich:tabPanel switchType = "AJAX">
<rich:tab header = "Name">
Tutorials Point----This is Tab Number 1
</rich:tab>
<rich:tab header = "Features">
Best Place to learn -------This is Tab Number 2
</rich:tab>
</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>
以上程式碼將在瀏覽器中生成以下輸出。
<rich:panelMenu>
面板選單幫助開發人員在面板區域內建立一個垂直下拉切換。以下示例將幫助我們更好地理解此標籤。建立“richPanelMenu.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Panel Menu example</title>
</h:head>
<h:body>
<h:form id = "form">
<h:panelGrid columns = "2" columnClasses = "cols,cols" width = "400">
<rich:panelMenu style = "width:200px">
<rich:panelMenuGroup label = "Group 1">
<rich:panelMenuItem label = "Database" action = "#{managedBean.subjectList}">
<f:param name = "current" value = "DB"/>
</rich:panelMenuItem>
<rich:panelMenuItem label = "Oracle" action = "#{managedBean.subjectList}">
<f:param name = "current" value = "Oracle"/>
</rich:panelMenuItem>
<rich:panelMenuItem label = "JAVA" action = "#{managedBean.subjectList}">
<f:param name = "current" value = "JAVA"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
</rich:panelMenu>
</h:panelGrid>
</h:form>
</h:body>
</html>
如上例所示，panelMenu帶有一些其他關聯標籤，這些標籤以不同的方式提供幫助。<panelGrid>幫助在面板內建立一個網格。<panelMenuGroup>幫助對我們將要填充的不同元件進行分組。<panelMenuItem>是將呈現給瀏覽器的實際專案。使用“action”屬性，您可以根據所選專案呼叫不同的操作方法。“label”屬性用於在前端填充值，並且一旦呼叫指定的動作類，呈現的值將被處理到後端。
上面的程式碼段將在瀏覽器中產生以下輸出。
<rich:TogglePanel>
此標籤用於呈現不同的輸出，可以使用切換控制方法進行切換或切換。此切換控制方法可以實現或自定義。在下面的示例中，我們將實現此方法。
建立一個xhtml檔案並將其命名為“richTogglePanel.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Toggle Panel Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:form id = "form">
<rich:togglePanel id = "panel1" activeItem = "item1"
itemChangeListener = "#{panelMenuBean.updateCurrent}">
<rich:togglePanelItem name = "item1">
<p>Content of the toggle 1</p>
</rich0:togglePanelItem>
<rich:togglePanelItem name = "item2">
<p>Content of the toggle 2</p>
</rich:togglePanelItem>
</rich:togglePanel>
<a4j:outputPanel id = "tabs" layout = "block">
<a4j:outputPanel layout = "block" styleClass = "tabDiv">
<rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item1" />
<a4j:commandButton value = "Toggle1"/>
</a4j:outputPanel>
<a4j:outputPanel layout = "block" styleClass = "tabDiv">
<rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item2" />
<a4j:commandButton value = "Toggle2"/>
</a4j:outputPanel>
</a4j:outputPanel>
</h:form>
</h:body>
</html>
我們還需要建立一個bean類來控制網站的轉換。建立如下所示的“MenuBean.java”類。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.richfaces.event.ItemChangeEvent;
@ManagedBean
@ViewScoped
public class MenuBean {
private String current;
private boolean singleMode;
public boolean isSingleMode() {
return singleMode;
}
public void setSingleMode(boolean singleMode) {
this.singleMode = singleMode;
}
public String getCurrent() {
return this.current;
}
public void setCurrent(String current) {
this.current = current;
}
public void updateCurrent(ItemChangeEvent event) {
setCurrent(event.getNewItemName());
}
}
以上程式碼將在瀏覽器中產生以下輸出。
在上面的例子中，網頁的內容將根據使用者點選的按鈕而改變。“updateCurrent()”是處理JS事件內容並在執行中設定網站內容的方法。
<rich:toolBar>
toolBar用於在面板中建立一個水平條。它用於在網頁中建立頂級選單。在下面的例子中，我們將學習如何在網頁中使用這個標籤。建立一個“xhtml”檔案並將其命名為“toolbar.xhml”。將以下程式碼放入其中。
<?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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>ToolBar Example</title>
</h:head>
<h:body>
<rich:panel>
<rich:toolbar height = "26" itemSeparator = "grid">
<rich:toolbarGroup location = "left">
<h:commandButton styleClass = "barsearchbutton"
onclick = "return false;" value = "TAB" />
</rich:toolbarGroup>
<rich:toolbarGroup location = "left">
<h:commandButton styleClass = "barsearchbutton"
onclick = "return false;" value = "TAB2" />
</rich:toolbarGroup>
<rich:toolbarGroup location = "left">
<h:commandButton styleClass = "barsearchbutton"
onclick = "return false;" value = "TAB3" />
</rich:toolbarGroup>
</rich:toolbar>
</rich:panel>
</h:body>
</html>
以上程式碼將在瀏覽器中產生以下輸出。
在上面的例子中，<toolbarGroup>標籤用於對不同型別的工具進行分組。可以建立任意數量的組。Location提供網頁上按鈕將放置的位置。
<rich:separator>
顧名思義，它用於分隔網頁上的不同元件。此標籤在RichFaces 4中已被刪除，但是，如果您仍然使用RichFaces 3，則可以使用以下標籤。
<rich:separator lineType = "beveled" height = "8" width = "75%" align = "center"/> <p>Here is more examples of different line types:</p> <rich:separator height = "2" lineType = "dotted"/><br/> <rich:separator height = "2" lineType = "dashed"/><br/> <rich:separator height = "4" lineType = "double"/><br/> <rich:separator height = "2" lineType = "solid"/><br/>
在上面的例子中，LineType是幫助我們確定要使用的分隔符型別的屬性。所有這些分隔符名稱本質上都是不言自明的。
<rich:Spacer>
Spacer是一個自描述的標籤，可以幫助開發人員在兩個元件之間提供空間。此標籤也與其他標籤一起在RichFaces4中被刪除，但是，如果您使用的是RichFaces 3，則可以使用以下程式碼。
<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/>
<rich:modalPanel>
Modal Panel用於在執行時顯示彈出視窗。在RichFaces 4中，modal panel標籤已更改為**popupPanel**。在下面的例子中，我們將看到它是如何工作的。建立一個xhtml檔案並將其命名為“PopingUp.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>ModalPanel and popupPanel</title>
</h:head>
<h:body>
<h:form>
<h:commandButton value = "Click ME">
<rich:componentControl target = "popup" operation = "show" />
</h:commandButton>
<rich:popupPanel id = "popup" modal = "true" autosized = "false"
resizeable = "false">
Hey !!!
How are you?
</rich:popupPanel>
</h:form>
</h:body>
</html>
當單擊“ClickMe”按鈕時，上面的示例將生成以下輸出。
RichFaces - 迭代元件
在前面的章節中，我們學習了不同的輸入和輸出元件。在本章中，我們將學習如何在網站中迭代不同的資料結構。
<rich:dataTable>
此標籤用於在網站中呈現表格作為結果。在下面的例子中，我們將呈現一個科目表以及專業水平。
<?xml version = '1.0' encoding = 'UTF-8' ?>
<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:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value = "#{subject.subjectListObj}" var = "record" >
<f:facet name = "header">
<h:outputText value = "My Profile" />
</f:facet>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
</h:form>
</h:body>
</html>
我們需要相應地更改我們的subject.java以呈現列表。以下是一個subject.java的示例。
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Subject {
String SubjectName;
private String efficiency;
private List<Subject> subjectListObj=new ArrayList<>();
public Subject() {
}
public Subject(String SubjectName,String efficiency ) {
this.SubjectName = SubjectName;
this.efficiency= efficiency;
}
public String getSubjectName() {
return SubjectName;
}
public void setSubjectName(String SubjectName) {
this.SubjectName = SubjectName;
}
public List<Subject> getSubjectListObj() {
subjectListObj.add(new Subject("JAVA","Expert"));
subjectListObj.add(new Subject("DOTNET","NA"));
subjectListObj.add(new Subject("JAVA Script","Expert"));
subjectListObj.add(new Subject("Web Service","Expert"));
subjectListObj.add(new Subject("Consulting","Expert"));
return subjectListObj;
}
public void setSubjectListObj(List<Subject> subjectListObj) {
this.subjectListObj = subjectListObj;
}
public String getEfficiency() {
return efficiency;
}
public void setEfficiency(String efficiency) {
this.efficiency = efficiency;
}
}
上面的例子將在瀏覽器中生成以下輸出。
<rich: dataDefinitionList>
這是用於根據模型生成資料定義的標籤。自RichFaces 4發明以來，JBoss就不再支援此標籤。如果您仍然使用RichFaces 3，則可以按照以下方式使用此標籤。
<rich:dataDefinitionList var = "car" value = "#{dataTableScrollerBean.allCars}"
rows = "5" first = "4" title = "Cars">
<f:facet name = "term">
<h:outputText value = "#{car.make} #{car.model}"></h:outputText>
</f:facet>
<h:outputText value = "Price:" styleClass = "label"></h:outputText>
<h:outputText value = "#{car.price}" /><br/>
<h:outputText value = "Mileage:" styleClass = "label"></h:outputText>
<h:outputText value = "#{car.mileage}" /><br/>
</rich:dataDefinitionList>
在上面的例子中，“dataTableScrollerBean”是一個用於生成不同汽車值的Java類。這與我們使用<datatable>標籤填充一堆物件值的先前標籤類似。
<rich:dataOrderedList>
RichFaces 4 對 RichFaces 3 做了大量的修改。`
<rich:panel style = "width:500px">
<f:facet name = "header">
Using rich:dataOrderedList
</f:facet>
<rich:dataOrderedList value = "#{airlinesBean.airlines}" var = "air">
#{air.name}, #{air.code}
</rich:dataOrderedList>
</rich:panel>
在上面的示例中，“airlinesBean” 是一個 Java Bean 類，其中包含一個名為“airlinesBean()”的方法。此方法返回“air”型別的物件。稍後，我們可以使用此 air 物件以表格格式填充不同的屬性。
<rich:dataList>
顧名思義，此標籤用於將無序列表呈現到瀏覽器中。但是，與`
<a4j:repeat value = "#{managedBean.subjectList}" var = "sub">
<h:outputText value = "#{sub}"/>
</a4j:repeat>
在上面的示例中，我們正在呈現一個列表，該列表是名為“subjectList()”的方法的輸出。如果您的應用程式是在 RichFaces 3 中構建的，則可以按如下方式使用此標籤。
<rich:panel style = "width:500px">
<f:facet name = "header">
Using rich:dataList
</f:facet>
<rich:dataList value = "#{airlinesBean.airlines}" var = "air">
#{air.name}, #{air.code}
</rich:dataList>
</rich:panel>
<rich:dataGrid>
使用`
<?xml version = '1.0' encoding = 'UTF-8' ?>
<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:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:panel>
<rich:dataGrid value = "#{subject.subjectListObj}" var = "record"
columns = "2" elements = "4" first = "1" >
<f:facet name = "header">
<h:outputText value = "My Profile" />
</f:facet>
<rich:panel>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:panel>
</rich:dataGrid>
</rich:panel>
</h:form>
</h:body>
</html>
上面的程式碼段將在瀏覽器中產生以下輸出。
<rich:datascroller>
此標籤有助於在填充表格資料時建立捲軸。它與 JSF 的分頁功能非常相似。以以下方式修改前面的 dataTable 示例。
<?xml version = '1.0' encoding = 'UTF-8' ?>
<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:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value = "#{subject.subjectListObj}" var = "record"
rows = "3" id = "MyTable">
<f:facet name = "header">
<h:outputText value = "My Profile"/>
</f:facet>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
<rich:dataScroller for = "MyTable" maxPages = "3">
<f:facet name = "first">
<h:outputText value = "1" />
</f:facet>
<f:facet name = "last">
<h:outputText value = "eof" />
</f:facet>
</rich:dataScroller>
</h:form>
</h:body>
</html>
在上面的示例中，您可以新增您的樣式以獲得良好的外觀和感覺。我們已經使用不同的 facet 值實現了單獨的`
RichFaces - 選擇元件
在本節中，我們將學習 RichFaces 技術提供的不同選擇元件。
<rich:pickList>
使用此標籤，我們可以從填充的列表中選擇一個值。它還允許我們將列表元件新增到另一個列表中或從中移除。下面的示例演示了它的工作原理。繼續建立一個 xhtml 檔案，將其命名為“pickListExample.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>PickList Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value = "Pick List Example"/>
<br/>
<br/>
<rich:pickList value = "#{managedBean.subjectList}"
sourceCaption = "SubjectList"
targetCaption = "Selected Subject"
listWidth = "170px"
listHeight = "120px"
orderable = "true">
<f:selectItems value = "#{managedBean.subjectList}"
itemValue = "#{subject}" itemLabel = "#{subject.subjectName}"/>
</rich:pickList>
</h:form>
</h:body>
</html>
我們需要修改 managedBean.java 檔案以填充 xhtml 檔案中的列表元件。以下是我們修改後的 Java 檔案的快照。
import java.util.Arrays;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
String job;
private List<String> SubjectList = Arrays.asList(
"Richface","AJAX","JAVA","JSF","DOTNET","python");
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;
}
public List<String> getSubjectList() {
return SubjectList;
}
public void setSubjectList(List<String> SubjectList) {
this.SubjectList = SubjectList;
}
}
上面的程式碼段將在瀏覽器中產生以下輸出。“pickList”標籤的“value”屬性只不過是 bean 類的“getSubjectList()”。“itemValue”是物件類的縮寫，相應的“itemLabel”是例項變數名。在此示例中，我們的 pickList 標籤會自動建立兩個名為“sourceCaption”和“targetCaption”的單獨列表。“orderable”屬性用於維護目標列表中的選擇順序。
<rich:orderingList>
此標籤用於將列表整體呈現。`
<?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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>OrderingList Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value = "ordering List Example"/><br/><br/>
<rich:orderingList value = "#{managedBean.subjectList}"
itemValue = "#{subject}"
itemLabel = "#{subject.subjectName}" >
</rich:orderingList>
</h:form>
</h:body>
</html>
我們不需要更改 bean 類，因為我們正在使用不同的標籤以不同的表示形式再次填充相同的列表。與前面的示例一樣，這裡的 value 屬性也包含來自“getSubjectList()”的整個列表。“itemValue”和“itemLabel”分別儲存物件類和相應例項變數的值。
以上程式碼將在瀏覽器中產生以下輸出。
<rich:ListShuttle>
ListShuttle 標籤在 RichFaces 3 中可用。它有助於遍歷一個列表並將相同的值放入另一個列表中。在 RichFaces 4 中，此標籤已被取消，因為可以使用上面描述的另一個名為`
<rich:listShuttle sourceValue = "#{toolBar.freeItems}"
targetValue = "#{toolBar.items}" var = "items" listsHeight = "150"
sourceListWidth = "130" targetListWidth = "130"
sourceCaptionLabel = "Available Items"
targetCaptionLabel = "Currently Active Items"
converter = "listShuttleconverter">
<rich:column width = "18">
<h:graphicImage value = "#{items.iconURI}"></h:graphicImage>
</rich:column>
<rich:column>
<h:outputText value = "#{items.label}"></h:outputText>
</rich:column>
<a4j:support event = "onlistchanged" reRender = "toolBar" />
<a4j:support event = "onorderchanged" reRender = "toolBar" />
</rich:listShuttle>
使用 pickList 比使用此標籤更方便，因為只需編寫兩行程式碼即可使用 pickList 實現相同的功能。
RichFaces - 選單元件
RichFaces 提供了多種標籤，可用於建立選單型別的標記。在本節中，我們將學習一些新功能以及舊功能，使用這些功能我們可以輕鬆地在瀏覽器中呈現選單。
<rich:dropDownMenu>
使用此標籤，開發人員可以建立一個下拉選單。此標籤可用於建立網站的頁首。在下面的示例中，我們將學習如何在實際生活中使用此標籤。建立一個檔案，將其命名為“DropDownList.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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head></h:head>
<h:body>
<h:form>
<rich:toolbar>
<rich:dropDownMenu>
<f:facet name = "label">
<h:outputText value = "File" />
</f:facet>
<rich:menuItem label = "New" />
<rich:menuItem label = "Open File..." />
<rich:menuItem label = "Close" />
<rich:menuItem label = "Close All" />
</rich:dropDownMenu>
</rich:toolbar>
</h:form>
</h:body>
</html>
在上面的示例中，我們正在建立一個工具欄，並在該工具欄內建立一個下拉選單。可以建立任意數量的下拉選單。如果要插入任何基於操作的 JS 函式，則可以在`
<rich:contextMenu>
此標籤用於在客戶端生成基於事件的下拉選單。它不會自動工作。使用者需要建立 JS 事件，然後它才能相應地工作。在下面的示例中，我們將建立渲染影像，然後根據使用者的響應建立 JS 事件。以下是 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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>ContextMenu Example</title>
</h:head>
<h:body>
<h:form id = "form">
<h:outputScript>
//<![CDATA[
function resize(pic, coeff) {
var w = Math.round(pic.width * coeff);
var h = Math.round(pic.height * coeff);
if (w > 1 && h > 1 && h<1000 && w<1000) {
pic.width = w;
pic.heigth = h;
}
}
function enlarge(element){
resize(element, 1.1);
}
function decrease(element){
resize(element, 0.9);
}
//]]>
</h:outputScript>
<h:graphicImage value = "https://tutorialspoint.tw/images/jsf-minilogo.png"
id = "pic" style = "border : 5px solid #E4EAEF"/>
<rich:contextMenu target = "pic" mode = "client" showEvent = "click">
<rich:menuItem label = "Zoom In" onclick =
"enlarge(#{rich:element('pic')});" id = "zin"/>
<rich:menuItem label = "Zoom Out"
onclick = "decrease(#{rich:element('pic')});" id = "zout"/>
</rich:contextMenu>
</h:form>
</h:body>
</html>
執行上面的示例並選擇渲染的影像。“放大”和“縮小”選項將顯示出來。單擊相應的選項，將對影像應用所需的功能。上面的程式碼段將在瀏覽器中生成以下輸出。
<rich:Component Control>
當我們想要從 RichFaces 環境呼叫任何其他函式時，此元件非常使用者友好。此標籤用於呼叫基於 JavaScript 的操作類。下面的示例演示瞭如何使用此標籤。建立一個檔案，將其命名為“componentContent.xhtml”檔案。將以下程式碼段放入其中。
<?xml version = "1.0" encoding = "UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<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:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Component Control Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:commandButton value = "Call the popup">
<rich:componentControl target = "popup" operation = "show" />
</h:commandButton>
<rich:popupPanel id = "popup" modal = "false" autosized = "true" resizeable = "false">
<f:facet name = "header">
<h:outputText value = "Welcome mesage" />
</f:facet>
<f:facet name = "controls">
<h:outputLink value = "#"
onclick = "#{rich:component('popup')}.hide(); return false;"
style = "color: inherit">
X
</h:outputLink>
</f:facet>
<p>Welcome to RICH FACE tutorial at tutorialspoint.com</p>
</rich:popupPanel>
</h:body>
</html>
在上面的程式碼中，我們使用 id“popup”呼叫“onclick()”函式。執行後，它會顯示一個帶有“呼叫彈出視窗”的按鈕。單擊按鈕後，RichFaces會在內部呼叫 JS 函式，並在瀏覽器中提供以下輸出。
RichFaces - 富樹
在本節中，我們將學習 RichFaces 中的樹處理。RichFaces 提供建立和操作樹所需的所有元件。
<rich:treeNode>
此標籤用於建立分層樹。`
在下面的示例中，我們將使用後端中的`
<?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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>TreeNode Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:form>
<rich:tree value = "#{tree.populateNode}" var = "tree">
<rich:treeNode>
<rich:treeModelRecursiveAdaptor>
</rich:treeModelRecursiveAdaptor>
<h:outputText value = "#{tree.data}" />
</rich:treeNode>
</rich:tree>
</h:form>
</h:body>
</html>
以下是實現 **“TreeNodeImpl”** 介面的相關 Java 類。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.richfaces.model.TreeNodeImpl;
@ManagedBean
@RequestScoped
public class Tree extends TreeNodeImpl {
private Tree stationRoot;
private Tree populateNode;
private Object data;
public Tree() {
super();
}
public Tree(boolean leaf, Object data) {
super(leaf);
this.data = data;
}
public Object getData() {
return data;
}
public Tree getPopulateNode() {
if (populateNode == null) {
String[] List_OF_Node = {
"Frist Node", "Second Node", "Third Node", "Fourth Node", "Fifth Node"};
stationRoot = new Tree(false, "Example Of Tree");
for (int i = 0; i < List_OF_Node.length; i++) {
Tree child = new Tree(true, List_OF_Node[i]);
stationRoot.addChild(i, child);
}
populateNode = new Tree();
populateNode.addChild(0, stationRoot);
}
return populateNode;
}
}
以上程式碼將在瀏覽器中產生以下輸出。
<rich:treeModelAdaptor>
此元件將 Map 作為輸入，對其進行迭代，並在瀏覽器中生成所需的輸出。當我們需要填充遞迴 Map 時，可以使用另一個名為 **`
下面的示例顯示瞭如何在瀏覽器中渲染專案結構。在 RichFaces 3 中，這兩個標籤是`
<?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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Tree Model and Recursive Model Example</title>
</h:head>
<h:body>
<h:form id = "form">
<rich:tree toggleType = "AJAX" var = "item" style = "max-width: 400px">
<rich:treeModelRecursiveAdaptor roots = "#{fileSystemBean.sourceRoots}"
nodes = "#{item.directories}">
<rich:treeNode>
#{item.shortPath}
</rich:treeNode>
<rich:treeModelAdaptor nodes = "#{item.files}">
<rich:treeNode>#{item}</rich:treeNode>
</rich:treeModelAdaptor>
</rich:treeModelRecursiveAdaptor>
</rich:tree>
</h:form>
</h:body>
</html>
我們需要為此示例建立兩個新的 Java Bean。以下是 bean 類“FileSystemBean.java”的程式碼片段，它包含所需的資料夾名稱。
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class FileSystemBean {
private static final String SRC_PATH = "/WEB-INF";
private List<FileSystemNode> srcRoots;
public synchronized List<FileSystemNode> getSourceRoots() {
if (srcRoots == null) {
srcRoots = new FileSystemNode(SRC_PATH).getDirectories();
}
return srcRoots;
}
}
以下是 bean 類“FileSystemNode.java”的程式碼片段，它包含專案的所需葉節點。
import static com.google.common.base.Predicates.containsPattern;
import static com.google.common.base.Predicates.not;
import static com.google.common.collect.Iterables.filter;
import static com.google.common.collect.Iterables.transform;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Set;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import com.google.common.base.Function;
import com.google.common.collect.Iterables;
import com.google.common.collect.Lists;
public class FileSystemNode {
private static final Function<String, FileSystemNode>
FACTORY = new Function<String, FileSystemNode>() {
public FileSystemNode apply(String from) {
return new FileSystemNode(from.substring(0, from.length() - 1));
};
};
private static final Function<String, String>
TO_SHORT_PATH = new Function<String, String>() {
public String apply(String from) {
int idx = from.lastIndexOf('/');
if (idx < 0) {
return from;
}
return from.substring(idx + 1);
};
};
private String path;
private List<FileSystemNode> directories;
private List<String> files;
private String shortPath;
public FileSystemNode(String path) {
this.path = path;
int idx = path.lastIndexOf('/');
if (idx != -1) {
shortPath = path.substring(idx + 1);
} else {
shortPath = path;
}
}
public synchronized List<FileSystemNode> getDirectories() {
if (directories == null) {
directories = Lists.newArrayList();
Iterables.addAll(directories, transform(filter(
getResourcePaths(), containsPattern("/$")), FACTORY));
}
return directories;
}
public synchronized List<String> getFiles() {
if (files == null) {
files = new ArrayList<String>();
Iterables.addAll(files, transform(filter(
getResourcePaths(), not(containsPattern("/$"))), TO_SHORT_PATH));
}
return files;
}
private Iterable<String> getResourcePaths() {
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
Set<String> resourcePaths = externalContext.getResourcePaths(this.path);
if (resourcePaths == null) {
resourcePaths = Collections.emptySet();
}
return resourcePaths;
}
public String getShortPath() {
return shortPath;
}
}
上面的示例將在瀏覽器中產生以下輸出。
RichFaces - 錯誤處理
在本節中，我們將學習可以在 RichFaces 中實現的不同錯誤處理方法。
伺服器端和客戶端錯誤處理
我們需要遍歷相當舊的 Java 技術（try/catch）來處理基於操作類的異常。對於客戶端，我們可以新增一個額外的檔案，該檔案將在客戶端發生錯誤時顯示錯誤訊息。
為了處理客戶端的錯誤，可以在 web.xml 中新增以下程式碼片段。
<error-page> <exception-type>java.lang.Throwable</exception-type> <location>/error.xhtml</location> </error-page>
請注意，上面的異常只會提供靜態異常訊息，我們可能需要使用 JSF 的“ExceptionHandler”類來使用動態異常屬性。在執行時，RichFaces 提供了一些功能來驗證輸入欄位，這些功能可以用作應用程式中異常的主要構建塊。
建立一個新檔案並將以下程式碼放入其中。
<?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:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Error handling</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:form id = "form">
<rich:panel>
<f:facet name = "header">
<h:panelGroup>
<h:outputText value = "Student Registration" />
<a4j:status>
<f:facet name = "start">
<h:graphicImage value = "/images/ai.gif" style = "height:12px;width:12px;" alt = "ai" />
</f:facet>
</a4j:status>
</h:panelGroup>
</f:facet>
<h:panelGrid columns = "3">
<h:outputText value = "Name:" />
<h:inputText value = "#{student.name}" id = "name" label = "name">
<f:validateLength minimum = "3" maximum = "8" />
<f:validateRequired />
<rich:validator />
</h:inputText>
<rich:message for = "name" />
<h:outputText value = "Email" />
<h:inputText value = "#{student.email}" id = "email"
validatorMessage = "Ivalid email address">
<f:validateRegex
pattern =
"^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)
\.([a-zAZ]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)
@([a-zA-Z0-9_\-\.]+)\.([a-zAZ]{2,5}){1,25})+)*$" />
<rich:validator />
</h:inputText>
<rich:message for = "email" />
<h:outputText value = "Age" />
<h:inputText value = "#{student.age}" id = "age" label = "age">
<f:validateLongRange minimum = "18" maximum = "99" />
<rich:validator />
</h:inputText>
<rich:message for = "age" />
</h:panelGrid>
</rich:panel>
</h:form>
</h:body>
</html>
相應的 Java 類應該是像下面的普通 bean 類。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Student {
private String name;
private String email;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
每當`
資源載入
RichFaces 改善了 JSF 應用程式中的標準資源處理過程。這可以透過配置 ResourceServlet 或透過資源最佳化來實現。要配置 ResourceServlet，我們需要在 web.xml 中新增以下程式碼片段。
<servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/org.richfaces.resources/*</url-pattern> </servlet-mapping>
我們還可以啟用 JSF 應用程式中的最佳化，這將最佳化不同的 JavaScript 和 CSS 檔案。我們需要新增以下程式碼才能在應用程式中實現最佳化。
<context-param> <param-name>org.richfaces.resourceOptimization.enabled</param-name> <param-value>true</param-value> </context-param>