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 时必须记住的条件。

例子

  1. <%@ taglib uri="/WEB-INF/ajax4jsf.tld" prefix="a4j"%>
  2. <html>
  3. <a4j:loadBundle basename="com.jci.fi.application.cbs.resources.cbsLiteResources" var="rb" />
  4. <head>
  5. 	<h:form id="childContractForm">
  6. 				<h:panelGrid columns="2" columnClasses="widthCol200px,widthCol200px">
  7. 					<h:outputText value="#{rb['label.branch']}" styleClass="setLabel" />
  8. 					<h:panelGroup id="childBranch">
  9. 						<a4j:region>
  10. 							<h:panelGroup id="branchInp1" style="display:table-cell;vertical-align:middle;">
  11. 						 	<h:inputText id="branch" styleClass="setText branch" value="#{prebookFacesBean.currentChildContract.jciBranchNumber}" size="3" maxlength="3" onblur="handleBranchChange();"></h:inputText>
  12. 							<h:inputHidden id ="branchOrgid" value ="#{prebookFacesBean.dataBean.executingBranch.orgId}"></h:inputHidden>
  13. 							<!--end Willie 7/12/2017 2:13  -->
  14.  
  15. 							<rich:suggestionbox id="suggestionBoxBranchNbr" styleClass="suggestionBoxBranchNbr" for="branch" suggestionAction="#{areaBean.autocompleteBranchForPreBookingChildContract}"
  16. 							    var="branch" fetchValue="#{branch.branchNumber}" minChars="1" status="waitStatusNoBlock" eventsQueue="queueBranch" ignoreDupResponses="true"
  17. 							    onselect="refreshChildLob();"
  18. 							     shadowOpacity="4" border="1" width="300" height="150" shadowDepth="4" cellpadding="2"
  19. 								nothingLabel="#{rb['message.noBranch']}">
  20. 								<h:column>
  21. 									<h:outputText value="#{branch.branchNumber}" />
  22. 								</h:column>
  23. 								<h:column>
  24. 									<h:outputText value="#{branch.branchName}" style="font-style:italic" />
  25. 								</h:column>
  26. 								<h:column>
  27. 									<h:outputText value=" (#{rb['label.region']}: #{branch.areaNumber})" style="font-style:italic" />
  28. 								</h:column>
  29. 							</rich:suggestionbox>
  30. 							</h:panelGroup>
  31. 							<h:panelGroup id="branchInp2" style="display:table-cell;vertical-align:middle;">
  32. 								<h:graphicImage id="branchLookUp" style="cursor: pointer;margin-left: 3px;" value="/images/lookup.gif" alt="#{rb['label.lookUp']}" onclick="javascript:launchABWindow('child');"/>
  33. 							</h:panelGroup>
  34. 							<h:panelGroup id="branchInp3" style="display:table-cell;vertical-align:middle;">
  35. 								<h:outputText value="Invalid Branch" style="color:red;margin-left:5px;" rendered="#{prebookFacesBean.branchNotFound}"></h:outputText>
  36. 							</h:panelGroup>
  37. 						</a4j:region>
  38. 					</h:panelGroup>
  39. 					<h:outputText value="#{rb['label.lineOfBusiness']}" styleClass="setLabel" />
  40. 					<h:selectOneMenu id="childLob" styleClass="setText lob" value="#{prebookFacesBean.currentChildContract.jciLineOfBusiness.lob}">
  41. 						<f:selectItems value="#{prebookFacesBean.lobsListSelectItems}" />
  42. 					</h:selectOneMenu>
  43. 					<h:outputText value="#{rb['label.contractTypeBL']}" styleClass="setLabel" />
  44. 					<h:selectOneMenu id="childtype" styleClass="setText type" value="#{prebookFacesBean.currentChildContract.contractType.contractType}">
  45. 						<f:selectItems value="#{prebookFacesBean.childContractTypesListSelectItems}" />
  46. 						<a4j:support event="onchange" action="#{prebookFacesBean.changeChildContractType}" ajaxSingle="true" reRender="preenter"></a4j:support>
  47. 					</h:selectOneMenu>
  48. 					<h:outputText value="#{rb['label.contractName']}" styleClass="setLabel" />
  49. 					<h:inputText id="name" styleClass="setText name" value="#{prebookFacesBean.currentChildContract.contractName}" maxlength="27"></h:inputText>
  50. 					<h:outputText value="#{rb['label.preEnterOpenForCost']}?" styleClass="setLabel" />
  51. 					<h:selectBooleanCheckbox id="preenter" value="#{prebookFacesBean.currentChildContract.preEnter}" disabled="#{prebookFacesBean.childContractPreenterDisabled}" rendered="#{prebookFacesBean.userCanPreenter}" onclick="isPreenterdChild(this.checked);"></h:selectBooleanCheckbox>
  52. 					<h:outputText value="#{rb['label.no']}" rendered="#{!prebookFacesBean.userCanPreenter}"></h:outputText>
  53. 				</h:panelGrid>
  54.  
  55. 			<rich:panel id="butnsPn" style="border-width: 0px; margin: 0px; text-align: center; width: 99%;">
  56. 				<a4j:commandButton id="save" status="waitStatus" type="button" styleClass="button" action="#{prebookFacesBean.saveChildContract}"
  57. 					onclick="if(!validateChildContractPopup()) return false;"
  58. 					value="#{rb['button.save']}" reRender="childList,ds" oncomplete="Richfaces.hideModalPanel('childContractMP');"></a4j:commandButton>
  59. 					<h:outputText value=" " escape="false"></h:outputText>
  60. 				<a4j:commandButton id="cancel" type="button" styleClass="button"
  61. 					value="#{rb['button.cancel']}" onclick="Richfaces.hideModalPanel('childContractMP');return false;"></a4j:commandButton>
  62. 			</rich:panel>
  63. 			<a4j:jsFunction ajaxSingle="true" name="refreshChildLob" reRender="childLob, childBranch"
  64. 				action="#{prebookFacesBean.populateLobs}" process="branch"></a4j:jsFunction>
  65. 		</h:form>	
  1. 	<a4j:region>
  2. 					<h:panelGroup id="branchInp1" style="display:table-cell;vertical-align:middle;">
  3.  
  4. 						<h:inputText id="branch1" styleClass="setText branch" value="#{prebookFacesBean.contractNumber}" size="3" ></h:inputText>
  5. 						<h:inputText id="branch2" styleClass="setText branch" value="#{prebookFacesBean.contractName}" size="3" ></h:inputText>
  6.  
  7. 						<h:inputText id="branch" styleClass="setText branch" value="#{prebookFacesBean.psaBranchNumber}" size="3" maxlength="3"></h:inputText>
  8. 						<h:inputHidden id ="branchOrgid" value ="#{prebookFacesBean.dataBean.executingBranch.orgId}"></h:inputHidden>
  9. 						<%--
  10. 						<h:inputText id="branch1" styleClass="setText branch" value="" size="3" maxlength="3"></h:inputText>
  11. 						<h:inputHidden id ="branchOrgid1" value ="#{prebookFacesBean.dataBean.executingBranch.orgId}"></h:inputHidden> --%>		
  12.  
  13. 						<rich:suggestionbox id="suggestionBoxBranchNbr2" for="branch" suggestionAction="#{areaBean.autocompleteBranchForPreBookingPSAContract}"
  14. 						    var="branch" fetchValue="#{branch.branchNumber}" minChars="1" status="waitStatusNoBlock" eventsQueue="queueBranch" ignoreDupResponses="true"
  15. 						    shadowOpacity="4" border="1" width="300" height="150" shadowDepth="4" cellpadding="2"
  16. 							nothingLabel="#{rb['message.noBranch']}">
  17. 							<h:column>
  18. 								<h:outputText value="#{branch.branchNumber}" />
  19. 							</h:column>
  20. 							<h:column>
  21. 								<h:outputText value="#{branch.branchName}" style="font-style:italic" />
  22. 							</h:column>
  23. 							<h:column>
  24. 								<h:outputText value=" (#{rb['label.region']}: #{branch.areaNumber})" style="font-style:italic" />
  25. 							</h:column>
  26. 						</rich:suggestionbox>			
  27.  
  28. 					</h:panelGroup>
  29. 					<h:panelGroup id="branchInp2" style="display:table-cell;vertical-align:middle;">
  30. 						<h:graphicImage id="branchLookUp" style="cursor: pointer;margin-left: 3px;" value="/images/lookup.gif" alt="#{rb['label.lookUp']}" onclick="javascript:launchABWindow('psa');"/>
  31. 					</h:panelGroup>
  32. 					<h:panelGroup id="branchInp3" style="display:table-cell;vertical-align:middle;">
  33.  
  34. 						<a4j:commandButton id="getPSA" action="#{prebookFacesBean.lookupPSAContracts}" reRender="availablePSARes,availablePSANoRes" status="waitStatus" value="#{rb['label.submit']}" style="margin-left: 10px;" type="button" styleClass="button">
  35. 						</a4j:commandButton>
  36.  
  37. 					</h:panelGroup>
  38. 				</a4j:region>

条件

根据 Ajax4jsf 文档所述，开发人员必须记住某些限制才能创建正确的 Ajax 和 JSF 应用程序：

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

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

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

  1. [原创]关于mybatis中一级缓存和二级缓存的简单介绍

    关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...

  2. 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍

    一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...

  3. 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍

    一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...

  4. yii2的权限管理系统RBAC简单介绍

    这里有几个概念 权限: 指用户是否可以执行哪些操作,如:编辑.发布.查看回帖 角色 比如:VIP用户组, 高级会员组,中级会员组,初级会员组 VIP用户组:发帖.回帖.删帖.浏览权限 高级会员组:发帖 ...

  5. angular1.x的简单介绍(二)

    首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...

  6. Linux的简单介绍和常用命令的介绍

    Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...

  7. iOS-iOS开发简单介绍

    概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...

  8. iOS开发多线程篇—多线程简单介绍

    iOS开发多线程篇—多线程简单介绍 一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcod ...

  9. iOS开发UI篇—UITabBarController简单介绍

    iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...

随机推荐

  1. sklearn参数优化

    学习器模型中一般有两个参数:一类参数可以从数据中学习估计得到,还有一类参数无法从数据中估计,只能靠人的经验进行指定,后一类参数就叫超参数 比如,支持向量机里的C,Kernel,gama,朴素贝叶斯里的 ...

  2. 1-MySQL高级-视图

    视图 1. 问题 对于复杂的查询,往往是有多个数据表进行关联查询而得到,如果数据库因为需求等原因发生了改变,为了保证查询出来的数据与之前相同,则需要在多个地方进行修改,维护起来非常麻烦 解决办法:定义 ...

  3. 12-FileZilla-响应：550 Permission denied

    window系统安装FileZilla与虚拟机上的Ubuntu传输文件: 状态:连接正常 问题:传输文件失败 报错:550 Permission denied 解决方法: 这是由于ftp服务器配置的问 ...

  4. 【牛客挑战赛32E】树上逆序对

    题目 数据范围非常奇怪,询问的逆序对个数\(k\leq 30000\),我们应该可以把所有的情况都求出来 发现对于树上两点\(x,y\),如果\(x\)是\(y\)的祖先,那么绝对值较大的点的符号决定 ...

  5. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  6. ES6 学习 -- Generator函数

    (1)语法说明:Generator函数其实是一个普通函数,其有两个特点,一是,function关键字与函数名之间有一个星号(*):二是Generator函数内部使用yield表达式,定义不同的状态,然 ...

  7. MySQL 11章_索引、触发器

    一. 索引: . 为什么要使用索引: 一本书需要目录能快速定位到寻找的内容,同理,数据表中的数据很多时候也可以为他们创建相应的“目录”,称为索引,当创建索引后查询数据也会更加高效 . Mysql中的索 ...

  8. vue v-show指令

    demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. php 垃圾回收机制 转载

    PHP的基本GC概念PHP语言同其他语言一样,具有垃圾回收机制.那么今天我们要为大家讲解的内容就是关于PHP垃圾回收机制的相关问题.希望对大家有所帮助.PHP strtotime应用经验之谈PHP m ...

  10. xml 单例类

    MD5JSON.h #pragma once #include "include/json/json.h" #include "include/md5/md5.h&quo ...