版權說明：本文書寫過程中參照了紅帽的技術文檔；本系列文章中的部分測試代碼爲紅帽公司版權所有，因此不能提供源碼文件。
- 本文的內容僅限於技術探討，不能作爲指導生產環境的素材；
- 本文分爲系列文章，將會有多篇，初步預計將有多篇。
- 筆者鼓勵讀者購買紅帽培訓獲得更多系統性的培訓。
一、Rich Web應用
富Web應用程序是具有以下特徵的應用程序：
- 豐富的用戶界面組件
- 無需頁面重新加載
- 動態頁面更新以響應事件
- 單頁工作單位
豐富的頁面組件，是具有標準安裝軟件外觀的用戶界面元素。例如，單擊按鈕可創建彈出模式對話框以處理信息。豐富的組件使用<script>標記寫入頁面中包含的非常複雜的Javascript庫中。今天有許多優秀的開源組件庫。在本課程中，我們將使用RichFaces組件。
豐富的應用程序的標誌之一是缺少頁面重新加載和減少頁面導航。例如，您在表單上輸入數據，然後單擊“提交”按鈕。沒有明顯的等待響應。這是因爲是使用了Ajax技術將數據傳輸到服務器並在後臺接收響應。
鑑於Ajax和豐富的UI組件的組合，我們看到單個工作單元在一個頁面上完成。這大大減少了Web應用程序中的頁面數量，但代價是單個頁面內的複雜性增加。工作單元可以是發票輸入，其中發票輸入的所有功能在一個頁面上可用：創建，更新，刪除和查詢。我們將看到RichFaces如何能夠大大降低複雜性並加速此類豐富應用程序的開發。
二、Ajax簡介
Ajax是Asynchronous Javascript和XML的縮寫。現代瀏覽器配備了Javascript語言可用的對象，允許將數據異步發佈到服務器並接收響應。該對象與強大的基於對象的語言模型相結合，並且訪問HTML（DOM）的對象模型用於創建非常令人滿意的用戶體驗。應用程序的響應性通常達到已安裝軟件的響應性。沒有更多的等待瀏覽器刷新進入工作單元的下一步。
JSF2生命週期本機處理Ajax處理。可以在執行和呈現階段部分更新組件樹。使用facelets標記在頁面上對組件進行分組，以指示要處理和呈現的組件。
雖然有內置的JSF標記可以管理Ajax事務，但我們將把注意力集中在這個單元中的RichFaces標記庫上。
三、Ajax表單提交
我們將看到的第一個特性，是能夠提交表單數據並僅在頁面的該部分調用JSF生命週期而無需重新加載頁面。 以下是聲明註冊表單的頁面部分（簡化以供討論）：
繁重的工作由<a4j：commandButton>標籤完成。 這類似於<h：commandButton>標記，但有兩個屬性：
- execute
此屬性設置爲對要提交的組件進行分組的面板的id。 在此示例中，將更新新成員bean的名稱、電子郵件和電話號碼。
- render
此屬性設置爲面板的id，該面板對操作完成後要呈現的組件進行分組（執行和呈現階段）。
action屬性就像常規facelets命令按鈕一樣，屬性將在EL引用的bean和在託管bean上調用的方法中更新，也由EL引用。
在許多a4j標籤上都可以找到execute和render屬性。 這些屬性不僅接受要呈現的組件的id。 他們可以接受：
要渲染的空格分隔的組件列表
@form - 提交在其嵌入的表單中定義的所有字段
@this - 組件本身內聲明的區域或組件
@none - 不渲染頁面的任何部分
@all - 渲染頁面上的所有組件
要使用RichFaces標記，需要聲明其命名空間，如下所示：
xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
四、RichFaces組件
快速入門展示了許多RichFaces組件，包括：
- <rich:panel> The registration form is surrounded by a rich panel. The panel includes a header area and borders that define the region.
- <rich:validator>, <rich:message>, <rich:messages> The validator works with any of the validator mechanisms. The validation is activated on form submission or when the user tabs out of the field. Each of the form fields in the quickstart is using a validator and message component based on JSR-303 bean validation. The messages tag displays global messages beside the register button. Using Ajax messages are updated dynamically when the validation event occurs.
- <rich:collapsiblePanel> The members table is surrounded by a collapsible panel.
- <rich:dataTable> The members table is produced using a rich data table. In its simplest use, it looks very much like a facelets data table. However, this rich component and related table components can produce some very sophisticated tables including collapsible sub tables, sorting, and filtering.
- <a4j:commandLink> The Ajax command link works the same as the Ajax command button. It appears as a link instead of a button.
- <rich:popupPanel> The popup panel, as its name implies, produces floating panels that are optionally modal. In this quickstart, a popup is used to display the member's details based on clicking the "view" link in a given row of the member table.
我們訪問RichFaces組件的展示：http://showcase.richfaces.org找到所有組件的演示以及每個演示的源代碼。
RichFaces庫引入了流行的jQuery庫。 快速入門演示了使用jQuery在註冊新成員時顯示消息。
如何在頁面上放置一個組件，例如列出當前庫存的表格，並在庫存發生變化時自動更新，即使庫存交易不是來自你？ 使用RichFaces推送。 RichFaces推送組件適用於基於JMS或CDI事件的數據源。 頁面上的RichFaces組件充當服務器上發生的事件的偵聽器。 我們將審查基於CDI事件的組件版本。
首先，必須從某個託管bean發佈事件。 要啓用推送功能，只需將註釋@Push添加到事件的注入站點即可。 其他一切都是一樣的：調用Event <T> .fire（T）來發布事件。 以下是RichFaces快速入門的示例：
接下來，我們必須爲這些事件設置訂閱者。 這是通過RichFaces <a4j：push>標記完成的：
有關上面代碼段的注意事項：
- 使用一些jQuery邏輯輸出Javascript，以根據事件的內容顯示消息。 觸發pushEvent時，您可以看到在MemberRegistration.register（）方法中格式化的消息。
- 顯示數據庫中所有成員的數據表已在可摺疊面板中聲明，其id爲“memberList”
現在讓我們看一下Ajax連接。 <a4j：push>標記表示它通過在MemberRegistration中將@Push註釋中的主題設置爲相同主題值的地址屬性來偵聽的主題。 Javascript回調函數ondataavailable執行包含jQuery邏輯的代碼。 在push標籤內，我們有一個<a4j：ajax>標籤。 此標記聲明每當調用dataavailable回調時，都會呈現包含成員列表數據表的可摺疊面板。
四、客戶端驗證
我們可以使用RichFaces使用Ajax支持的字段驗證。 每當用戶選中一個字段時，就會進行驗證，並顯示任何消息，其中<rich：message>標籤與具有for屬性的字段相關。 如果字段參與Ajax表單提交，則也會進行驗證。
快速入門使用客戶端驗證，使用JSF頁面中的<rich：validator>標記和相應成員實體bean屬性上的JSR-303 bean驗證註釋。 以下是顯示驗證註釋的Member類的一部分：
以下是使用<rich：validator>和<rich：message>標記實現客戶端驗證的JSF頁面的一部分：
五、對象驗證
有時需要應用涉及對象中多個字段的驗證邏輯。 需要能夠在JSF生命週期中的某個點應用驗證，我們知道所有屬性值已成功存儲在支持頁面的託管bean中。 可以使用RichFaces圖驗證器。 使用圖形驗證器分爲兩步。 首先，必須將<rich：graphValidator>標記放在必須在對象驗證開始之前更新的字段周圍。 這是一個例子：
<rich：graphValidator>標記指向要使用EL驗證的對象。 在這種情況下，將處理Invoice對象。 請注意，正在處理的對象通常是其數據屬性由其正文中的UI組件更新的對象。
請注意，圖驗證器的id是“gv”。 這個名字並不重要; 它可以是任何名字。 該ID用於<rich：messages>標記，位於其下方几行。 這告訴Faces將爲組件“gv”生成的消息放在這裏。 這就是我們與facelets的關係。
現在，我們需要向Invoice添加對象驗證方法。 使用@AssertTrue註釋對象驗證方法。 您可以擁有任意數量的驗證方法。 在撰寫本文時，方法名稱必須以“是”開頭。 請務必在@AssertTrue註釋中指定驗證消息。 以下是對象驗證方法的示例：
六、實驗驗證：將應用程序轉換爲富應用程序
本應用要展示的效果是：從前臺插入一個發票信息以後，信息會被存儲到數據庫中；同事，前臺觸發查詢，這時候新插入的發票信息可以被push到前臺顯示。
首先通過JBDS導入maven項目。
查看依賴：
運行應用：
UI界面：
輸入信息，點擊提交查詢：
可以查到剛剛插入的信息（從數據庫推到前臺）
源碼分析
打開index.xhtml文件。
請注意爲rich和a4j標記庫添加了名稱空間聲明：
發票輸入表單周圍添加了<rich：panel>。 刪除了兩個<ui：fragment>組件，因爲頁面的上半部分將與頁面底部交互而不提交整個頁面。
探索Ajax表單提交
<h：commandButton>已替換爲其Ajax等效項。 完成命令按鈕操作後，將呈現包含表單的<rich：panel>：
<rich:panel id="invoiceEntry" header="Invoice Entry">
<h:form id="invoice">
...
<a4j:commandButton execute="@form" action="#{orderEntry.create}"
render="invoiceEntry" />
...
</h:form>
</rich:panel>探索客戶端驗證
- 我們爲表單中的每個輸入組件添加了豐富的驗證器（包括單選按鈕等）。
- 我們將<h：message>標記轉換爲其RichFaces等效標記，僅顯示詳細消息。
- 我們刪除了<h：messages>組件，並在面板頂部顯示了RichFaces全局消息顯示。
- 我們在Invoice類中添加了適當的bean驗證註釋：
- 公司名稱，聯繫人姓名和電子郵件不能爲空 - 我們使用@NotEmpty
- 電子郵件必須採用有效格式 - 我們使用@Email
探索對象驗證
接下來，我們添加了一個涉及多個bean的編輯。 我們使用了RichFaces對象驗證功能<rich：graphValidator>。
驗證將驗證稅收類型是否在發票應納稅時設置爲值。
驗證方法已添加到Invoice類中。 只要以“is”開頭，可以將此方法命名爲您喜歡的任何方法。 我們應用了@AssertTrue驗證註釋，以便圖形驗證器將找到此方法並在對象驗證階段調用它：
接下來，我們將圖形驗證器添加到JSF頁面。 我們確保設置適當的屬性，以便驗證Invoice對象：
我們確保對象驗證消息將與其他全局消息一起顯示在面板頂部：
<rich:messages for="gv"/>
gv“匹配<rich：graphValidator>的id。
探索推送功能
我們在OrderEntry類中添加了一個類型爲Invoice的推送事件。 我們在create（）方法中放置邏輯來觸發事件，在將發票插入數據庫後傳遞它：
我們在JSF頁面中添加了<a4j：push>和相關標籤。 我們確保主題地址屬性與@Push註釋中設置的主題一致。 當新數據可用時，將顯示“invoiceTable”面板。
我們必須確保以下內容位於<a4j：push>標記中：
ondataavailable=""
在此步驟中，我們將探索一個工具提示，該工具提示將在鼠標懸停在發票編號列上時顯示發票詳細信息。
在第一列的定義（<rich：column>）的末尾添加了以下代碼：
效果：
