標籤：esc cell blank 代碼 san script ttext htm developer
Ajax4jsf 允許開發人員將 Ajax 功能添加到 JSF 應用程式中，而不需要 JavaScript 或用 Ajax 圖形組件替換現有的組件。這個包還允許在使用 Java 2D 庫時動態地產生映像。Ajax 是一種編程技術，它處理只有頁面的一部分需要處理而不需要重新裝載整個頁面的情況。這種方式的好處包括減少伺服器上的處理時間以及加快用戶端的響應速度。
與 Tomahawk 相似，Ajax4jsf 提供了一套可以很容易地與 JSF 標記一起使用的標記。在本教程後面對 Developer Forum Signup 應用程式範例進行改進時，將討論這些標記的樣本以及如何將 Ajax4jsf 與 Eclipse 進行整合。接下來，將學習組成這個庫的每個組件、在使用它時必須記住的限制以及如何在 Eclipse 項目中添加 Ajax4jsf。
組件
Ajax4jsf 組件被設計成可以輕鬆地與現有的 JSF 應用程式進行整合，同時提供了改進效能的 Ajax 功能。表 1 中描述了 Ajax4jsf 庫中包含的所有標記。
表 1. Ajax4jsf 庫標記
| Ajax4jsf 組件 | 描述 |
|---|---|
<a4j:actionListener> |
其效果類似於 JSF 中的 <f:actionListener> 或 <f:valueChangeListener> 標記，但是它用於 Ajax 容器。 |
<a4j:actionparam> |
結合了 <f:actionListener> 和 <f:param> JSF 標記的功能。 |
<a4j:commandButton> |
效果類似於被點擊時的表單 Submit 按鈕，但是呈現為 HTML <input> 標記。 |
<a4j:commandLink> |
效果類似於被點擊時的表單 Submit 按鈕，但是呈現為 HTML <a> 錨標記。 |
<a4j:loadBundle> |
裝載當前視圖的本地化資源束。 |
<a4j:mediaOutput> |
允許建立動態產生的內容。 |
<a4j:outputPanel> |
在頁面上建立一個啟用 Ajax 的部分，允許這個地區中的內容重新呈現（即使導致 Ajax 請求的組件沒有專門提到這個地區）。 |
<a4j:page> |
呈現完整的 HTML 頁面結構。但是，它必須是 JSF <f:view> 標記的第一個和惟一的子項目，在它外邊不能有 HTML 程式碼。 |
<a4j:region> |
決定 JSF <f:view> 的哪個部分將通過為相關聯的 Ajax 請求提供內容來處理。這會只更新頁面中需要更新的部分，從而改進效能。 |
<a4j:status> |
通過指出請求何時開始或結束，提供關於指定地區的 Ajax 請求的用戶端狀態。 |
<a4j:support> |
將 Ajax 功能添加到與 JSF 相關的組件中。這個標記可能是最常用的。 |
根據情境，某些組件會比其他組件更常用。接下來，將學習在使用 Ajax4jsf 時必須記住的條件。
例子
<%@ taglib uri="/WEB-INF/ajax4jsf.tld" prefix="a4j"%><html><a4j:loadBundle basename="com.jci.fi.application.cbs.resources.cbsLiteResources" var="rb" /><head><h:form id="childContractForm"><h:panelGrid columns="2" columnClasses="widthCol200px,widthCol200px"><h:outputText value="#{rb[‘label.branch‘]}" styleClass="setLabel" /><h:panelGroup id="childBranch"><a4j:region><h:panelGroup id="branchInp1" style="display:table-cell;vertical-align:middle;"> <h:inputText id="branch" styleClass="setText branch" value="#{prebookFacesBean.currentChildContract.jciBranchNumber}" size="3" maxlength="3" onblur="handleBranchChange();"></h:inputText><h:inputHidden id ="branchOrgid" value ="#{prebookFacesBean.dataBean.executingBranch.orgId}"></h:inputHidden> <!--end Willie 7/12/2017 2:13 --><rich:suggestionbox id="suggestionBoxBranchNbr" styleClass="suggestionBoxBranchNbr" for="branch" suggestionAction="#{areaBean.autocompleteBranchForPreBookingChildContract}" var="branch" fetchValue="#{branch.branchNumber}" minChars="1" status="waitStatusNoBlock" eventsQueue="queueBranch" ignoreDupResponses="true" onselect="refreshChildLob();" shadowOpacity="4" border="1" width="300" height="150" shadowDepth="4" cellpadding="2"nothingLabel="#{rb[‘message.noBranch‘]}"><h:column><h:outputText value="#{branch.branchNumber}" /></h:column><h:column><h:outputText value="#{branch.branchName}" style="font-style:italic" /></h:column><h:column><h:outputText value=" (#{rb[‘label.region‘]}: #{branch.areaNumber})" style="font-style:italic" /></h:column></rich:suggestionbox></h:panelGroup><h:panelGroup id="branchInp2" style="display:table-cell;vertical-align:middle;"><h:graphicImage id="branchLookUp" style="cursor: pointer;margin-left: 3px;" value="/images/lookup.gif" alt="#{rb[‘label.lookUp‘]}" onclick="javascript:launchABWindow(‘child‘);"/></h:panelGroup><h:panelGroup id="branchInp3" style="display:table-cell;vertical-align:middle;"><h:outputText value="Invalid Branch" style="color:red;margin-left:5px;" rendered="#{prebookFacesBean.branchNotFound}"></h:outputText></h:panelGroup></a4j:region></h:panelGroup><h:outputText value="#{rb[‘label.lineOfBusiness‘]}" styleClass="setLabel" /><h:selectOneMenu id="childLob" styleClass="setText lob" value="#{prebookFacesBean.currentChildContract.jciLineOfBusiness.lob}"><f:selectItems value="#{prebookFacesBean.lobsListSelectItems}" /></h:selectOneMenu><h:outputText value="#{rb[‘label.contractTypeBL‘]}" styleClass="setLabel" /><h:selectOneMenu id="childtype" styleClass="setText type" value="#{prebookFacesBean.currentChildContract.contractType.contractType}"><f:selectItems value="#{prebookFacesBean.childContractTypesListSelectItems}" /><a4j:support event="onchange" action="#{prebookFacesBean.changeChildContractType}" ajaxSingle="true" reRender="preenter"></a4j:support></h:selectOneMenu><h:outputText value="#{rb[‘label.contractName‘]}" styleClass="setLabel" /><h:inputText id="name" styleClass="setText name" value="#{prebookFacesBean.currentChildContract.contractName}" maxlength="27"></h:inputText><h:outputText value="#{rb[‘label.preEnterOpenForCost‘]}?" styleClass="setLabel" /><h:selectBooleanCheckbox id="preenter" value="#{prebookFacesBean.currentChildContract.preEnter}" disabled="#{prebookFacesBean.childContractPreenterDisabled}" rendered="#{prebookFacesBean.userCanPreenter}" onclick="isPreenterdChild(this.checked);"></h:selectBooleanCheckbox><h:outputText value="#{rb[‘label.no‘]}" rendered="#{!prebookFacesBean.userCanPreenter}"></h:outputText></h:panelGrid> <rich:panel id="butnsPn" style="border-width: 0px; margin: 0px; text-align: center; width: 99%;"><a4j:commandButton id="save" status="waitStatus" type="button" styleClass="button" action="#{prebookFacesBean.saveChildContract}" onclick="if(!validateChildContractPopup()) return false;"value="#{rb[‘button.save‘]}" reRender="childList,ds" oncomplete="Richfaces.hideModalPanel(‘childContractMP‘);"></a4j:commandButton><h:outputText value=" " escape="false"></h:outputText><a4j:commandButton id="cancel" type="button" styleClass="button" value="#{rb[‘button.cancel‘]}" onclick="Richfaces.hideModalPanel(‘childContractMP‘);return false;"></a4j:commandButton></rich:panel><a4j:jsFunction ajaxSingle="true" name="refreshChildLob" reRender="childLob, childBranch" action="#{prebookFacesBean.populateLobs}" process="branch"></a4j:jsFunction></h:form>
<a4j:region><h:panelGroup id="branchInp1" style="display:table-cell;vertical-align:middle;"><h:inputText id="branch1" styleClass="setText branch" value="#{prebookFacesBean.contractNumber}" size="3" ></h:inputText><h:inputText id="branch2" styleClass="setText branch" value="#{prebookFacesBean.contractName}" size="3" ></h:inputText><h:inputText id="branch" styleClass="setText branch" value="#{prebookFacesBean.psaBranchNumber}" size="3" maxlength="3"></h:inputText><h:inputHidden id ="branchOrgid" value ="#{prebookFacesBean.dataBean.executingBranch.orgId}"></h:inputHidden><%-- <h:inputText id="branch1" styleClass="setText branch" value="" size="3" maxlength="3"></h:inputText><h:inputHidden id ="branchOrgid1" value ="#{prebookFacesBean.dataBean.executingBranch.orgId}"></h:inputHidden> --%><rich:suggestionbox id="suggestionBoxBranchNbr2" for="branch" suggestionAction="#{areaBean.autocompleteBranchForPreBookingPSAContract}" var="branch" fetchValue="#{branch.branchNumber}" minChars="1" status="waitStatusNoBlock" eventsQueue="queueBranch" ignoreDupResponses="true" shadowOpacity="4" border="1" width="300" height="150" shadowDepth="4" cellpadding="2"nothingLabel="#{rb[‘message.noBranch‘]}"><h:column><h:outputText value="#{branch.branchNumber}" /></h:column><h:column><h:outputText value="#{branch.branchName}" style="font-style:italic" /></h:column><h:column><h:outputText value=" (#{rb[‘label.region‘]}: #{branch.areaNumber})" style="font-style:italic" /></h:column></rich:suggestionbox></h:panelGroup><h:panelGroup id="branchInp2" style="display:table-cell;vertical-align:middle;"><h:graphicImage id="branchLookUp" style="cursor: pointer;margin-left: 3px;" value="/images/lookup.gif" alt="#{rb[‘label.lookUp‘]}" onclick="javascript:launchABWindow(‘psa‘);"/></h:panelGroup><h:panelGroup id="branchInp3" style="display:table-cell;vertical-align:middle;"><a4j:commandButton id="getPSA" action="#{prebookFacesBean.lookupPSAContracts}" reRender="availablePSARes,availablePSANoRes" status="waitStatus" value="#{rb[‘label.submit‘]}" style="margin-left: 10px;" type="button" styleClass="button"></a4j:commandButton></h:panelGroup></a4j:region>
條件
根據 Ajax4jsf 文檔所述，開發人員必須記住某些限制才能建立正確的 Ajax 和 JSF 應用程式：
XMLHttpRequest 函數以 XML 格式建立。但是，這些請求的 XML 格式可能會避開瀏覽器中的大多數檢驗和任何糾正處理。既然已經瞭解了組件和使用 Ajax4jsf 的條件，就需要將這個庫添加到 Eclipse 項目中，然後才能對 Developer Forum Signup 應用程式進行改進。
Ajax4Jsf 簡單介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
