本系列 的三篇文章演示了一個(gè)獨立的 Web 應用程序，每篇文章都對其添加一些增強。本節將對這個(gè)示例應用程序進(jìn)行簡(jiǎn)要回顧。
第 1 部分 首先給出一個(gè)典型的 JSF 表單 SupportForm.jsp 并提供一組可重用的 JavaScript 功能，可以通過(guò) Ajax 獲取、編碼和提交表單數據，從而使您能夠自動(dòng)、定期并透明地保存用戶(hù)輸入。您可以從示例應用程序的 AutoSaveScript.js 文件獲得 JavaScript 函數的源代碼。第 1 部分還解釋了如何構建一個(gè) JSF 階段偵聽(tīng)器 AutoSaveListener 來(lái)處理 Ajax 請求。第 2 部分對偵聽(tīng)器類(lèi)進(jìn)行了修改。
在 第 2 部分 中，您了解了如何將當前 JSF 視圖數據保存到數據存儲庫中。DataMapRepository 類(lèi)是一個(gè)包含數據地圖的 Map。每個(gè)數據地圖保存單個(gè)表單實(shí)例的用戶(hù)輸入。對數據存儲庫的所有訪(fǎng)問(wèn)都是通過(guò)一個(gè)名為 RepositoryWrapper 的線(xiàn)程安全類(lèi)實(shí)現的。servlet 上下文偵聽(tīng)器名為 DataMapPersistence，用于在停機之前將存儲庫序列化到文件中，并在啟動(dòng)后恢復存儲庫狀態(tài)。第 2 部分還提供了一個(gè) servlet 過(guò)濾器 BrowserIdFilter，用于識別跨瀏覽器會(huì )話(huà)的匿名用戶(hù)。
請訪(fǎng)問(wèn) Ajax 資源中心，這里幾乎囊括了關(guān)于 Ajax 編程模型的所有信息，包括各種文章、教程、論壇、博客、wikis、活動(dòng)和新聞。
本文（本系列的第三篇也是最后一篇）將對 SupportForm.jsp 頁(yè)面進(jìn)行修改，以便在用戶(hù)關(guān)閉和重新打開(kāi)瀏覽器后能夠重新恢復頁(yè)面數據。ViewRestorer 類(lèi)提供 JSF 偵聽(tīng)器方法來(lái)處理恢復請求。如果您對 JSF 請求處理生命周期并不熟悉，那么就不容易理解第 3 部分中的示例代碼。第 1 部分 對這種 JSF 機制進(jìn)行了簡(jiǎn)要的概述，并且本系列的所有文章盡可能詳細地描述了所使用的 JSF 特性。您也可通過(guò) JSF 規范獲得對請求處理生命周期的完整說(shuō)明。
本節將提供用于恢復 JSF 表單數據的 Java 方法。這些方法將與一些 JavaScript 功能和 JSF 組件相結合，本文稍后會(huì )介紹這些內容。
第 2 部分 展示了如何通過(guò)遍歷 JSF 組件樹(shù)并獲取輸入組件的值來(lái)保存當前視圖的表單數據。這個(gè)操作是在 DataMapRepository 類(lèi)的 saveValues() 方法中執行的，這個(gè)類(lèi)還包含了一個(gè)可以恢復輸入組件值的方法。對于實(shí)現 EditableValueHolder 界面的每個(gè)組件，restoreValues() 方法（如清單 1 所示）將從提供的數據地圖中獲得之前保存的值，設置 JSF 組件的 value 屬性，并清除 submittedValue 屬性：
package autosave;...import javax.faces.component.EditableValueHolder;import javax.faces.component.UIComponent;...public class DataMapRepository ... { ... public static void restoreValues(UIComponent comp, Map<String, Object> dataMap) { if (comp == null || dataMap == null) return; if (comp instanceof EditableValueHolder) { // Input component. Get its value from the data map // and clear any submitted value EditableValueHolder evh = (EditableValueHolder) comp; evh.setValue(dataMap.get(comp.getId())); evh.setSubmittedValue(null); } // Iterate over the children of the current component Iterator children = comp.getChildren().iterator(); while (children.hasNext()) { UIComponent child = (UIComponent) children.next(); // Recursive call restoreValues(child, dataMap); } }}第 2 部分 還演示了 AutoSaveListener 類(lèi)的 saveCurrentView() 方法，它用于處理表單自動(dòng)保存請求。本節將討論示例應用程序的 ViewRestorer 類(lèi)，該類(lèi)提供了一個(gè) restoreCurrentView() 方法和兩個(gè) JSF 事件偵聽(tīng)器，可處理恢復當前 JSF 視圖數據的請求，簡(jiǎn)稱(chēng)為恢復請求。
清單 2 展示了 restoreCurrentView() 方法，它通過(guò)包裝器 bean 訪(fǎng)問(wèn)存儲庫，以獲取當前用戶(hù)/視圖組合的數據地圖。然后，它將調用 restoreValues() 方法恢復輸入組件的值。之后，restoreCurrentView() 調用 faces 上下文的 renderResponse() 方法，通知 JSF 框架實(shí)現 Render Response 階段。在后文中您將看到，renderResponse() 調用將與 immediate 屬性結合使用。
package autosave;import java.util.Map;...import javax.faces.component.UIViewRoot;import javax.faces.context.FacesContext;public class ViewRestorer implements java.io.Serializable { public void restoreCurrentView() { // Get the faces context of the current request. FacesContext ctx = FacesContext.getCurrentInstance(); // Get the root component of the current view. UIViewRoot root = ctx.getViewRoot(); // Get the managed bean instance wrapping the data repository. RepositoryWrapper wrapper = RepositoryWrapper.getManagedBean(ctx); // Get the data map for the current context. Map<String, Object> dataMap = wrapper.getDataMap(ctx); // Use the data map to restore the values of the JSF components. DataMapRepository.restoreValues(root, dataMap); // Signal the JSF framework to go to the Render Response phase. ctx.renderResponse(); } ...}ViewRestorer 的 actionListener() 和 valueChangeListener() 方法（如 清單 3 所示）可在 JSF 組件的 actionListener 和 valueChangeListener 屬性?xún)仁褂?，可觸發(fā)對當前視圖進(jìn)行恢復。下一節將演示如何使用這些偵聽(tīng)器方法。
package autosave;...import javax.faces.event.ActionEvent;import javax.faces.event.ValueChangeEvent;public class ViewRestorer implements java.io.Serializable { ... public void actionListener(ActionEvent e) { restoreCurrentView(); } public void valueChangeListener(ValueChangeEvent e) { restoreCurrentView(); } ...}如果存儲庫包含當前視圖和當前用戶(hù)的數據地圖，isCurrentViewRestorable() 方法將返回 true（如 清單 4 所示）：
package autosave;...public class ViewRestorer implements java.io.Serializable { ... public boolean isCurrentViewRestorable() { FacesContext ctx = FacesContext.getCurrentInstance(); RepositoryWrapper wrapper = RepositoryWrapper.getManagedBean(ctx); return wrapper.hasDataMap(ctx); } }清單 5 演示如何將 ViewRestorer 類(lèi)配置為 faces-config.xml 中的托管 bean，以便使 SupportForm.jsp 頁(yè)面的 JSF 組件可以使用偵聽(tīng)器方法：
<faces-config> ... <managed-bean> <managed-bean-name>viewRestorer</managed-bean-name> <managed-bean-class>autosave.ViewRestorer</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> ...</faces-config>
SupportForm.jsp 頁(yè)面使用 AutoSaveScript.js 文件的 setAutoSaving() 函數激活表單自動(dòng)保存功能，該文件在 第 1 部分 中提到過(guò)。本節將演示如何修改 JSF 頁(yè)面從而保存當前視圖的數據。
對 ViewRestorer bean 的 valueChangeListener() 方法觸發(fā) ValueChangeEvent 的最簡(jiǎn)單的方法就是向 SupportForm.jsp 頁(yè)面添加一個(gè)隱藏的元素。清單 6 演示了必須添加到 JSF 頁(yè)面的代碼：
<h:form id="supportForm"> <h:inputHidden id="restoreTrigger" value="default" valueChangeListener="#{viewRestorer.valueChangeListener}" immediate="true"/> ...</h:form>您可能想知道我們?yōu)槭裁词褂秒[藏的組件觸發(fā)表單恢復。為什么不在呈現時(shí)直接恢復表單？要理解這些問(wèn)題的答案，您必須了解 JSF 框架構建組件樹(shù)的方式，這些組件樹(shù)的值必須進(jìn)行恢復。請記住，用戶(hù)曾經(jīng)離開(kāi)了應用程序（或者瀏覽器崩潰），現在用戶(hù)使用一個(gè) GET 請求返回到表單頁(yè)面。
在上面描述的場(chǎng)景中處理 GET 請求時(shí)，JSF 框架很可能不能在請求處理生命周期的第 1 階段（Restore View）恢復 JSF 組件樹(shù)。即使 JSF 實(shí)現可以這樣做，請求將不具備參數，因為用戶(hù)剛剛返回到應用程序中。
根據 JSF 規范，如果視圖不能被恢復或者請求沒(méi)有包含查詢(xún)參數或 POST 數據，JSF 實(shí)現必須在 Restore View 階段調用 faces 上下文的 renderResponse() 方法。因此，請求處理將跳至最后一個(gè)階段（Render Response），該階段將生成 HTML 輸出并同時(shí)構建組件樹(shù)，因為之前沒(méi)有恢復樹(shù)。這意味著(zhù)應用程序在處理 GET 請求的過(guò)程中沒(méi)有機會(huì )處理組件樹(shù)，而且輸出已經(jīng)被發(fā)送給用戶(hù)瀏覽器。
上述問(wèn)題的解決方法就是讓 JSF 框架處理 GET 請求并隨后發(fā)送新的 POST 請求，這將允許應用程序處理 JSF 組件樹(shù)，恢復組件值。POST 請求可通過(guò)表單對象的 JavaScript submit() 方法發(fā)送。這一次不能使用 XMLHttpRequest，因為您需要在發(fā)出 POST 請求后刷新頁(yè)面。
如果查看表單頁(yè)面的 HTML 輸出，您將注意到 JSF 為隱藏的元素生成了 supportForm:restoreTrigger ID。因此，您需要使用像 getFormElement() 這樣的 JavaScript 函數（如 清單 7 所示）在 Web 頁(yè)面中查找表單元素對象：
function getFormElement(formId, elemId) { return document.getElementById(formId + ":" + elemId);}清單 8 展示了另一個(gè) JavaScript 函數，它將發(fā)送恢復表單數據的請求。在調用 supportForm 對象的 submit() 方法之前，submitRestoreRequest() 函數將修改隱藏元素的值，以在服務(wù)器端處理請求時(shí)觸發(fā) ViewRestorer bean 的 valueChangeListener() 方法。您可以在 SupportForm.jsp 文件中找到 submitRestoreRequest() 函數。
function submitRestoreRequest() { var restoreTrigger = getFormElement("supportForm", "restoreTrigger"); restoreTrigger.value = "restore"; var supportForm = document.getElementById("supportForm"); supportForm.submit();}使用 submitRestoreRequest() 發(fā)送到服務(wù)器的恢復請求將使用 POST 方法，因為這是所有 JSF 表單指定的 HTML 方法。要避免發(fā)生無(wú)限循環(huán)，只有在響應 GET 請求而生成當前頁(yè)面時(shí)發(fā)送恢復請求。此外，存儲庫必須包含當前用戶(hù)/表單組合的保存數據。isRestorable() 函數將檢驗這兩個(gè)條件，它將對一個(gè)客戶(hù)端 JavaScript 表達式求值，該表達式將包含兩個(gè)在服務(wù)器端計算的 JSP/JSF EL 表達式的值（參見(jiàn) 清單 9）：
function isRestorable() { return "${pageContext.request.method}".toUpperCase() == "GET" && <h:outputText value="#{viewRestorer.currentViewRestorable}"/>;}假設在發(fā)送 GET 請求后生成了頁(yè)面，并且 ViewRestorer bean 的 isCurrentViewRestorable() 方法在服務(wù)器端返回了 true，生成的 JavaScript 函數的表達式的值為 true（參見(jiàn) 清單 10）：
function isRestorable() { return "GET".toUpperCase() == "GET" && true;}如果使用 submitRestoreRequest() 發(fā)送恢復請求或者用戶(hù)單擊 Submit 按鈕，服務(wù)器將收到一個(gè) POST 請求并且 isRestorable() 將返回 false，如 清單 11所示：
function isRestorable() { return "POST".toUpperCase() == "GET" && true;}本節將解釋 immediate 屬性的作用以及如何使用示例應用程序的 ViewRestorer 類(lèi)的 restoreCurrentView() 方法的 renderResponse() 調用。
前面一節中使用的 <h:inputHidden> 組件將其 immediate 屬性設置為 true，因此可以在 JSF 請求處理生命周期的早期調用偵聽(tīng)器方法。更準確地說(shuō)，調用將發(fā)生在 Apply Request Values 階段。也可針對一些命令按鈕將 immediate 屬性設為 true，這些命令按鈕的操作方法應該在 Apply Request Values 階段調用而不是等到 Invoke Application 階段調用。如果需要向 JSF 表單添加一個(gè) Restore 按鈕，您可以使用一個(gè) <h:commandButton> 標記，其 immediate 屬性為 true（請參見(jiàn) 清單 12）：
<h:form id="supportForm"> ... <h:commandButton id="restoreButton" value="Restore" actionListener="#{viewRestorer.actionListener}" immediate="true"/> ...</h:form>最后，將在 Apply Request Values 階段調用 ViewRestorer bean 的 valueChangeListener() 和 actionListener() 方法，因為 SupportForm.jsp 頁(yè)面的 restoreTrigger 和 restoreButton 組件將 immediate 屬性設置為 true。
前面一節討論的 renderResponse() 調用與本節討論的 renderResponse() 調用沒(méi)有任何關(guān)系。JSF 框架在 Restore View 階段執行前一個(gè)調用。而示例應用程序代碼在 JSF 請求處理生命周期的 Apply Request Values 階段執行后一種調用。
ViewRestorer 類(lèi)的兩個(gè)偵聽(tīng)器方法調用同一個(gè)類(lèi)的 restoreCurrentView() 方法，而后者將調用 faces 上下文的 renderResponse() 方法。因此，請求處理將從 Apply Request Values 階段直接跳躍到 Render Response 階段，跳過(guò)了 Process Validations、Update Model Values 和 Invoke Application 階段。
讓我們分析一下 ViewRestorer 類(lèi)的 restoreCurrentView() 方法的 renderResponse() 調用。首先，當使用 submitRestoreRequest() 函數提交表單以觸發(fā) ViewRestorer 的 valueChangeListener() 時(shí)，應用程序必須忽略所有已提交的數據。這就是 DataMapRepository 類(lèi)的 restoreValues() 方法清除每個(gè)輸入組件 submittedValue 屬性的原因。丟失值一般會(huì )引起很多驗證錯誤，但是不會(huì )出現在示例應用程序中，因為由于 renderResponse() 調用，沒(méi)有對恢復請求執行 Process Validations 階段。
使用 renderResponse() 跳過(guò) Process Validations、Update Model Values 和 Invoke Application 階段意味著(zhù)您不用擔心恢復請求的任何副作用。因此，在驗證階段后偵聽(tīng)階段事件的 AutoSaveListener 類(lèi)不會(huì )受到這些請求的影響，因此無(wú)需改變該類(lèi)。此外，執行恢復請求后，將不會(huì )更新應用程序的數據模型并且也不會(huì )調用操作方法。如您所見(jiàn)，對恢復和自動(dòng)保存請求應用了相同的規則，這些請求可以透明地進(jìn)行處理，而不會(huì )打斷應用程序的邏輯。
隱藏的 restoreTrigger 組件和 submitRestoreRequest() JavaScript 函數提供了觸發(fā)表單恢復的方法。服務(wù)器端代碼執行其余的任務(wù)，生成一個(gè)包含自動(dòng)保存數據的恢復過(guò)的表單。然而，還可以添加一些按鈕，以便用戶(hù)可以控制保存或恢復表單的時(shí)機。在真實(shí)的應用程序中，如果希望保持用戶(hù)界面簡(jiǎn)潔并能夠透明、自動(dòng)地保存和恢復表單，則不需要添加這些按鈕。
然而，您可能希望對真實(shí)的應用程序擴展自動(dòng)保存功能，以便您的用戶(hù)可以像桌面程序保存/加載文檔一樣保存/加載 Web 表單。在本例中，用戶(hù)可以恢復 Web 表單、修改一些數據并重新向 Web 服務(wù)器提交表單。假設您擁有一個(gè)可以提交每月發(fā)票的表單。其中一些輸入 — 例如發(fā)票日期、發(fā)票額以及發(fā)票行 — 每月都會(huì )改變，但是可以重用輸入的供應商和購買(mǎi)者信息，從而減少輸入表單數據所需的時(shí)間。
通過(guò)上節的介紹，您已經(jīng)了解了如何添加 Restore 按鈕。表單還可以包含一個(gè) Save 按鈕，其代碼如 清單 13 所示。Save 按鈕不是通過(guò) action 或 actionListener 屬性指定服務(wù)器端方法，而是在用戶(hù)單擊按鈕時(shí)使用 onclick 屬性調用 submitSaveRequest() JavaScript 函數。
<h:form id="supportForm"> ... <h:commandButton id="saveButton" value="Save" onclick="return submitSaveRequest()"/> ...</h:form>
清單 14 展示了 SupportForm.jsp 頁(yè)面的 submitSaveRequest() 函數。這個(gè) JavaScript 函數可以借助 AutoSaveScript.js 文件的 submitAllForms() 函數向服務(wù)器發(fā)送表單數據。本系列的 第 1 部分 提供了 AutoSaveScript.js 文件的代碼。然后，submitSaveRequest() 將返回 false，這樣 Save 按鈕的 onclick 表達式將返回 false，這說(shuō)明 Web 瀏覽器不能向服務(wù)器提交表單。
function submitSaveRequest() { submitAllForms(); return false;}如果從 onclick 屬性刪除 return 關(guān)鍵字，或者返回的是 true 而不是 false，表單數據將被提交兩次，第一次由 submitAllForms() 函數使用 Ajax 提交，而第二次由 Web 瀏覽器提交，它將 Save 按鈕作為普通的 Submit 按鈕處理。瀏覽器的提交將導致頁(yè)面刷新并且很可能出現驗證錯誤。通過(guò)返回 onclick 屬性為 false，Web 瀏覽器將不再提交表單數據并且只通過(guò) submitAllForms() 函數保存用戶(hù)輸入，而不需要重新刷新頁(yè)面。
表單頁(yè)面還可以包含一個(gè)復選框，它允許用戶(hù)對當前頁(yè)面啟用或禁用自動(dòng)保存功能（參見(jiàn) 清單 15）。setAutoSaving() 函數將在 Auto-Save Form 復選框的 onclick 屬性?xún)冗M(jìn)行調用。該復選框是在 SupportForm.jsp 文件中由 <h:selectBooleanCheckbox> 創(chuàng )建。AutoSaveScript.js 文件的 setAutoSaving() 函數使用 JavaScript API 的 setInterval() 函數指示 Web 瀏覽器，要求它在每次超過(guò)指定的微秒數時(shí)調用 submitAllForms()。如果 0 被傳遞給 setAutoSaving() 函數，那么將禁用自動(dòng)保存功能。
<h:form id="supportForm"> ... <h:selectBooleanCheckbox id="autoSaveCheckbox" onclick="setAutoSaving(this.checked ? autoSaveInterval : 0)"/> <h:outputLabel value="Auto-Save Form" for="autoSaveCheckbox"/> ...</h:form>
autoSaveInterval 變量在 SupportForm.jsp 中被設置為 10000。
在 Web 瀏覽器加載頁(yè)面后，SupportForm.jsp 的 <body> 標記使用 onload 屬性調用 init() 函數（如 清單 16 所示）。這個(gè)函數將檢查表單數據是否可恢復，然后要求用戶(hù)確認是否希望恢復自動(dòng)保存的表單。如果用戶(hù)單擊確認對話(huà)框的 OK 按鈕，init() 將調用 submitRestoreRequest()。否則，如果選擇了 autoSaveCheckbox，init() 將調用 setAutoSaving() 函數。
var autoSaveInterval = 10000; function init() { if (isRestorable()) if (confirm("Do you want to restore the auto-saved form?")) { submitRestoreRequest(); return; } var autoSaveCheckbox = getFormElement("supportForm", "autoSaveCheckbox"); if (autoSaveCheckbox.checked) setAutoSaving(autoSaveInterval);}在這份 共分三部分的系列文章 中，您完成了以下功能：
您學(xué)習了大量 JavaScript 和 JSF 技巧，比如：
XMLHttpRequest 對象以避免 Web 瀏覽器發(fā)生內存泄漏。immediate 和 onclick 屬性。renderResponse() 和 responseComplete() 方法。如果您希望實(shí)現表單自動(dòng)保存功能或類(lèi)似功能，盡可在您自己的 Ajax/JSF 應用程序中重用本系列附帶的示例代碼。
| 描述 | 名字 | 大小 |
|---|---|---|
| 本文的示例程序 | wa-aj-jsf3.zip | 9KB |
聯(lián)系客服
