Ajax4Jsf 简单介绍

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 应用程序：

Ajax4jsf 框架并不在页面上追加或删除元素，它只会替换页面上的元素。要想在页面上追加代码，应该使用一个空元素标出它的位置。
应该只创建严格的符合标准的 HTML 和 XHTML 代码，不要省略任何必需的元素或属性，因为 Ajax 请求由 XMLHttpRequest 函数以 XML 格式创建。但是，这些请求的 XML 格式可能会避开浏览器中的大多数检验和任何纠正处理。
最后，大多数 Ajax4jsf 标记有一个属性，它指定在发出 Ajax 请求之后要处理的元素的 ID。这些元素的 ID 必须匹配在 Ajax4jsf 标记的属性中指定的 ID，只有这样更新才会成功。

既然已经了解了组件和使用 Ajax4jsf 的条件，就需要将这个库添加到 Eclipse 项目中，然后才能对 Developer Forum Signup 应用程序进行改进。

Ajax4Jsf 简单介绍的更多相关文章

[原创]关于mybatis中一级缓存和二级缓存的简单介绍
关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...
利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍
一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...
利用Python进行数据分析(4) NumPy基础: ndarray简单介绍
一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...
yii2的权限管理系统RBAC简单介绍
这里有几个概念权限: 指用户是否可以执行哪些操作,如:编辑.发布.查看回帖角色比如:VIP用户组, 高级会员组,中级会员组,初级会员组 VIP用户组:发帖.回帖.删帖.浏览权限高级会员组:发帖 ...
angular1.x的简单介绍(二)
首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...
Linux的简单介绍和常用命令的介绍
Linux的简单介绍和常用命令的介绍本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...
iOS-iOS开发简单介绍
概览终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...
iOS开发多线程篇—多线程简单介绍
iOS开发多线程篇—多线程简单介绍一.进程和线程 1.什么是进程进程是指在系统中正在运行的一个应用程序每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内比如同时打开QQ.Xcod ...
iOS开发UI篇—UITabBarController简单介绍
iOS开发UI篇—UITabBarController简单介绍一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...

随机推荐

23-Ubuntu-文件和目录命令-查看文件内容-more 和 cat
1. more---适合查看内容多的文件格式: more 文件名操作键功能空格键显示手册页下一屏 Enter键一次滚动手册页的一行 b 返回上一屏 f 前滚一屏 q 退出例: more ...
hashmap1.7的死锁模拟
package com.cxy.springdataredis.hashmap; import javax.lang.model.element.VariableElement; import jav ...
String 字符串对象
String是什么 String字符串,是一种引用数据类型,并不是基础数据类型. 对于基础数据类型和引用数据类型的区别: 基础数据类型,在创建时直接将值存放在栈内存中. 引用数据类型,在创建时栈内存中 ...
python日常使用
os.path.splitext('C:\py\wxPython.gif') 得到扩展名的函数 os.remove(删除文件) os.listdir(显示该目录下的文件) os.getcwd(获取当 ...
matlab 求已知概率密度函数的随机数生成
N=10000; %需要随机数的个数 a=zeros(N,1); %存放随机数的数列 n=0; f1=@(t) 1./(1.2*pi*(1+5*(t-7.3).^2)); f2=@(t) 1./(1. ...
Python学习笔记（六）——类和对象
1.self的用法全面理解self 2. 继承子类继承父类,自动拥有父类的全部方法 >>> class Animal: def run(self): print('Animal ...
JS函数进阶
函数的定义方式函数声明函数表达式 new Function 函数声明 function foo () { } 函数表达式 var foo = function () { } 函数声明与函数 ...
mysql的卸载重装+导入大量数据失败的解决方案+工具执行和项目执行结果不同
1.卸载 1>快捷键win+r输入regedit进入注册表找到3个文件夹,全部删除 . HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eve ...
P1922 女仆咖啡厅桌游吧
P1922 女仆咖啡厅桌游吧题目背景小v带萌萌的妹妹去玩,妹妹想去女仆咖啡馆,小v想去桌游吧. 妹妹:“我问你个问题,答不对你就做我一天的奴隶,答对了就今天我就全部听你的.” 小v:“全部都听!? ...
https://stackoverflow.com/与程序相关的IT技术问答网站
https://stackoverflow.com/ Stack Overflow是一个与程序相关的IT技术问答网站.用户可以在网站免费提交问题,浏览问题,索引相关内容,在创建主页的时候使用简单的HT ...

Ajax4Jsf 简单介绍

Ajax4Jsf 简单介绍的更多相关文章

随机推荐

热门专题