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 简单介绍的更多相关文章

  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. java 与日期转换相关的方法（java.util.date类型和java.sql.date类型互相转换）、随机字符串生成方法、UUID生产随机字符串

    package com.oop.util; import java.text.*; import java.util.UUID; import org.junit.Test; /* * 与日期相关的工 ...

  2. PKPM快捷键

    e删除sc删除节点hq绘制直线墙lbz布置梁zz楼层组装bsc板生成bxg板修改门窗洞dbz(洞布置)全房间洞(fd)正交轴网zww拉伸s

  3. JS对象 提取指定数目的字符substr() substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。

    提取指定数目的字符substr() substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串. 语法: stringObject.substr(startPos,length ...

  4. c_ 数据结构_图_邻接矩阵

    程序主要实现了图的深度遍历和广度遍历. #include <stdio.h> #include <stdlib.h> #include <string.h> #de ...

  5. es 3.0 、es 5.0 、es 6.0

    es 5.0 的严格模式 “use strict” /在页面最顶端写启动全局 es 5.0 严格模式 为什么使用字符串可以 向下兼容 ,,不会报错 可以写在局部方法中,推荐使用 (例如 不再兼容es ...

  6. python 封装一个取符串长度的函数

    def getStrLen(str): return len(str) print(getStrLen("dsa456das4dasdas21"))

  7. Java 虚拟机 - 2.3 HotSpot虚拟机对象

    对象的创建 Step1 类加载检查 当发现一条new指令时,检查: 该指令的参数是否能在常量池中定位到一个类的符号引用: 并且检查这个符号引用代表的类是否已经被加载.解析和初始化过.如果没有,那必须先 ...

  8. csps模拟92数列，数对，最小距离题解

    题面:https://www.cnblogs.com/Juve/articles/11767225.html 数列: 简化题意:已知a,b,c,求满足$a*x+b*y=c$的$x+y$最小值 然后ex ...

  9. nodejs与websocket模拟简单的聊天室

    nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...

  10. java模拟页面表单登录

    简单的通过表单的post请求提交到后台 package testpostlogin; import java.io.BufferedReader; import java.io.File; impor ...