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 ...

随机推荐

史上最全Redis面试题及答案。
花了大量时间整理了这套Redis面试题首发50题,绝无仅有,从入门到精通从基础,高级知识点,再到集群,运维,方案- 弄明白了这些题可以说可以成为面霸了面试官都得折服,Redis学得怎么样,都来检 ...
21-Ubuntu-文件和目录命令-复制文件和目录-cp
cp 将给出的文件或目录复制到另一个文件或目录,相当于DOS下的copy命令选项含义 -f 已经存在的目标文件直接覆盖,不提示 -i 覆盖文件前提示 -r 若给出的源文件是目录文件,则cp将递归复 ...
SqlMapClient operation; bad SQL grammar []; nested exception is com.ibatis.common.jdbc.exception.NestedSQLException: InlineParameterMap
<select id="getResByName" resultClass="Resources" parameterClass="java.l ...
网页开发人员收藏的16款HTML5工具
本文收集的20款优秀的 HTML5 Web 应用程序,值得添加到您的 HTML5 的工具箱中,他们能够帮助你开发前端项目更快.更容易. Initializr Initializr 是一个可以让你创建 ...
在线文库解决方案Jacob+SwfTools+FlexPaper
课程作业,准备做一个类似于豆丁之类的在线文库,解决方案也就是将文档(doc ppt xls)等转换成pdf,然后转成swf展示在页面中,今天下午经过研究,参考其他人的博客,实现了这个主要功能,这里也做 ...
mysql连接数问题备份
一. max_connections 这是是查询数据库当前设置的最大连接数 mysql> show variables like '%max_connections%';+----------- ...
mysql 存储过程学习汇总
存储过程框架 DEMILITER $$ -- 重定义符 DROP PROCEDURE IF EXISTS store_procedure$$ -- 如果存在此名的存储过程,先删除 CREATE PRO ...
thinkphp 系统流程
用户URL请求调用应用入口文件(通常是网站的index.php) 载入框架入口文件(ThinkPHP.php) 记录初始运行时间和内存开销系统常量判断及定义载入框架引导类(Think\Think ...
数据提取--JSON
什么是数据提取? 简单的来说,数据提取就是从响应中获取我们想要的数据的过程非结构化的数据:html等结构化数据:json,xml等处理方法:正则表达式.xpath 处理方法:转化为python数 ...
牛客多校第六场 A Garbage 模拟/签到
题意: 给你一个字符串,代表一个垃圾都有哪些物质组成,再给你一个字符串,代表a-z代表的物质分别是有害物质,干物质还是湿物质,根据题目的定义,回答是什么垃圾. 题解: 根据题意模拟即可. #inclu ...

Ajax4Jsf 简单介绍

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

随机推荐

热门专题