`
biaoming
  • 浏览: 266514 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

A4J 用户指南

    博客分类:
  • java
阅读更多

序言:



Ajax4JSF是一个很容易使用的框架.

有什么问题可以在
JSF中文论坛 讨论.

Chapter 1. 介绍

这里是一些介绍a4j的内容,暂时先不翻译了,等有时间再补充上.

Ajax4jsf 是一个添加Ajax功能到JSF项目中的开源框架,使用该框架不用写JS代码.

Ajax4jsf 充分利用了JSF框架的优点,如: 生命周期, 验证, 转换的灵活性和受管理的静态和动态资源. 使用Ajax4jsf, 具有Ajax支持的富组件和高度可自定义的外观感觉可以很容易的与JSF结合起来.

Ajax4JSF 被设计用来:

在使用Ajax时充分显示JSF的优点. Ajax4jsf 完全被结合到 JSF 生命周期中. 当其他框架仅仅给你访问Managed Bean的便利时,Ajax4JSF带给你 Action 和 Value Change 监听器,激活服务端验证,在Ajax请求-响应周期中的转化 这些功能.

添加 AJAX 功能到已经存在的 JSF 项目.  该框架被实现为使用一个组件库来添加ajax功能到你的页 面中,而不要写js代码或者使用新的Ajax装饰器替换你已经做好的JSF组件. Ajax4jsf 具有页面范围(page-wide)的Ajax支持,而不是传统的组件范围(component-wide)的ajax支持.  这意味着你可以在页面中定义一个激活Ajax请求的事件,和当根据客户端事件触发Ajax请求来改变服务器端数据后 如何使用JSF组件树来同步显示JSF页面.

使用内建的Ajax支持写自定义富组件.  将来, 我们将有一个完全的组件开发包(CDK)来支持AJax4JSF. CDK 将包含代码生成工具和一个使用类似JSP语法的模版工具.这些功能将去除一些创建组件的一个例行工作.使用这个喝满油的组件工厂机器来创建一个带有 Ajax功能的富组件将比使用传统的编码过程创建一个简单的组件还要简单.

项目的Java类与资源包.  除了核心的 AJAX 功能外, Ajax4jsf 也有管理资源的高级支持,例如:图片,JS代码和CSS样式表单,资源框架使 简单的打包这些资源到你自定义组件的Jar文件中成为可能.

动态(on-the-fly)将非常容易.  作为另外一种附加的功能, 资源框架有一个动态产生图片的工具. 使用这个特性,你可以使用类似于使用Java Graphic2D库的方法来创建图片.

使用基于皮肤的技术来创建一个现代富用户界面的外观感觉(look-and-feel).  Ajax4jsf 提供一个换肤特性 . 该特性允许通过命名的皮肤参数来简单的定义和管理不同颜色模式与其他UI特性. 你可以从JSP代码和Java代码(例如:基于UI的文本来产生动态的图片)来访问这些皮肤参数 . 注意:, 虽然换肤功能不是完全的替代传统的CSS,但是它还是值得称赞的.

测试components, actions, listeners, 和 pages 就像你在创建他们一样容易.  一个制动测试工具正在开发中 .它将在你开发组件使为你的组件产生测试案例. 该测试框架不仅仅测试组件,也测试服务端和客户端的功能包括JS代码 .作为附加的有用工具,你不需要单独的部署测试程序到Servlet容器中 就可以做到这些了.

 Ajax4JSF 组件已经可以使用了, 因此开发者可以立即使用这种省时的具有高级特性的工具来创建提供了更快更可靠的用户体验的Web程序了.

让我们来看一个简单的JSF项目. 我们仅仅需要一个JSP页面,里面包含一个Form和一些JSF标签: <h:inputText> 和 <h:outputText>.

我们这个简单的程序应该可以让我们输入一些文字到<h:inputText>中, 然后发送数据到Server,并在 <h:outputText>中显示Server的响应(给我们一个Echo信息).

下面的图片展示了Ajax4jsf 框架的一些重要的元素

Ajax 过滤器(Filter).  为了得到应用 Ajax4jsf 的好处 你必须在在 web.xml 文件中注册一个Ajax Filter.该过滤器有一些职责. Ajax Filter 可以识别多种ajax请求种类. 图片3的序列图展示了在处理常规页面和AJAX请求页面的不同之处.在开始的情况下,所有的JSF树将被编码(encoded). 在第二种情况下依据AJAX 区域(region) (你可以通过使用<a4j:region> tag来定义AJAX region  )的大小(size). 就如你看到的,第二种情况下 过滤器将解析AJAX响应的内容,在它被发送到客户端以前, 查看下面的图片来理解这两种方式:

在这两种情况下, 你的程序所需要的静态或者动态资源的信息将被注册到ResourseBuilder 类中.当请求一个资源时(图片4),AJAX filter 检查资源缓存(Resource Cache)看看这个资源是否存在,如果存在该资源将被送到客户端.否则过滤器将在ResourceBuilder中搜索注册的资源. 如果该资源被注册了,AJAX filter将发送一个请求到 ResourceBuilder来创建[create (deliver)]该资源.下面的图片显示了请求资源的处理过程.

Ajax动作组件(Action Components).  有3个Ajax动作组件 : AjaxCommandButton, AjaxCommandLink 和 AjaxSupport. 你可以使用他们从客户端发送AJAX请求.

Ajax容器 (Containers).  AjaxContainer 是一个接口,该接口描述了在Ajax请求中应该被解码(decoded)的JSF页面中的一个区域.AjaxViewRoot 和 AjaxRegion 实现了该接口.

JavaScript引擎 (Engine).  Ajax4jsf JavaScript 引擎 在客户端运行. 它知道如何根据来自于Ajax响应的信息来更新你JSF页面上的不同的区域. 程序开发者不需要直接使用这里的JavaScript代码.它自动的下载到客户端.

从JSF页面发送ajax请求有不同的方法. 你可以使用 <a4j:commandButton>, <a4j:commandLink> 或者 <a4j:support> tags.

所有的这些标签隐藏了在创建一个XMHttpRequest 对象和发送ajax请求所需要的JavaScript 活动.并且, 他们允许你选择页面中那个JSF组件被重新渲染(re-rendered) 来表现Ajax响应的结果 (你可以列出他们的 IDs 在“reRender” 属性中).

<a4j:commandButton> 和 <a4j:commandLink> tags 用来在 “onclick” JavaScript 事件中发送Ajax请求.

在你选择JS事件(“onkeyup”, “onmouseover”, etc)时, <a4j:support> tag 允许你在普通的JSF组件中添加Ajax 功能和发送ajax请求.

提供Ajax请求功能的大部分重要的属性如下:

  • reRender 属性 - 就如我们前面提到过的,在一个Ajax响应到来时重新渲染(reRendered)组件.

  • RequestDelay 属性 – 用来调节请求的频率.

        <h:inputText size="50" value="#{bean.text}">
        <a4j:support event="onkeyup" RequestDelay=”3”/>
        </h:inputText>
        

    因此每一个来自于键盘事件的请求将会延迟3 ms ,来减少请求的次数.

  • EventsQueue – 储存下一个请求的队列的名字. 队列帮助阻止下一个请求知道当前的处理完.

  • LimitToList 用来控制更新的区域. 设置为true – 将更新仅在reRender list中的区域, 如果为false,将更新所有Output Panels区域.

  • ajaxSingle 如果设置为false用来指定发送请求的区域  – 如果为true则发送整个区域 - only control caused event.(attributes specify regions to be sent with request if false – it’ll be full region in other case - only control caused event.)

该组件呈现一个完全的HTML页面结构.它必须是view root (JSP <f:view> tag)的第一个(并且是仅有的一个)子组件. 没有Html代码可以在该组件的外面. 它也支持在Ajax请求中处理子组件,就和<a4j:region>一样.对于一个普通的请求,它将把结果呈现为在客户端页 面<head>元素中的<script>元素.如果该组件包含一个"head" facet, 该facet的内容也呈现在<head>中.对于一个Ajax请求,在整个结构中仅仅涉及到的组件被呈现.下面是个在JSP (jspx version)中使用它的例子:

<jsp:root xmlns:....

    <f:view>

        <a4j:page>

        <f:facet name="head">

        ...

        </f:facet>

<!-- page content here -->

        </a4j:page>

        </f:view>

</jsp:root>


        <a4j:page>
<f:facet name=”head”>
…
</f:facet>
…
<a4j:page>

上面的示例结构将被呈现为:

        <HTML>
<HEAD>
…
</HEAD>
<body >
…
</body>
</HTML>

在 UIComponent-based组件上添加ajax功能,使他们有JavaScript事件属性. 在解码期间:如果一个请求为Ajax-performed, 从ExternalContext 中的requestParameterMap属性中得到Map,如果该Map中"clientId" key对应的值非空,在组件上创建一个 javax.faces.event.ActionEvent, 并且传递该事件到该组件的queueEvent()中,然后把他的reReander区域中的组件id添加到reReander属性中.在编码过程中.不 编码一个组件. 相反的,在父组件上添加一个与事件属性的值相同的值绑定(Instead, it adds ValueBinding for a property of the parent component with the name as a value of its "event" property).结果,当呈现时,父组件创建一个在提交一个ajax请求时用到的JS代码.如果该组件有子UIParameter组件,添加他的 name/value作为附加的请求参数.如果父组件是一个UIInput的实例,并且ajaxType属性是input, 则也提交input 域中的值. 在这种情况下,你可以在UIForm外面提交一个单一的input域. (As a result, when rendered, the parent component builds JavaScript code for submitting an AJAX request on this event. If the component has child UIParameter components, appends it's name/value as additional request parameters. If a parent component is an instance of UIInput and the ajaxType property is "input", submits the value of the input field, also. In this case, you can submit a single input field outside of UIForm.)

Table 4.4. a4j:support 属性

actionListener 方法绑定,当该组件被ajax请求激活时,将调用该监听器方法处理该事件.该方法必须为public的并且接受一个 AjaxEvent 参数,返回void.
parentProperties parentProperties
action 方法绑定到要被激活的程序动作方法, 如果该 UIComponent 被用户激活, 根据immediate属性的值,方法在 请求处理生命周期中的Apply Request Values 或者 Invoke Application 阶段 被调用.
oncomplete  在客户端请求完成时调用的js代码
rendered 如果为false,该组件将不会被显示.
status Request status 组件的id(在 UIComopnent.findComponent()中使用)
reRender 该组件调用Ajax请求后重新渲染的组件的ID(在 UIComopnent.findComponent()中使用),可以使一个id,也可以使逗号分开的很多id,或者是数据or集合的EL表达式
targetId reRender的别名 : 该组件调用Ajax请求后重新渲染的组件的ID(在 UIComopnent.findComponent()中使用),可以使一个id,也可以使逗号分开的很多id,或者是数据or集合的EL表达式
id 每个组件都应该有个唯一的id. 如果没有指定的话,将会自动产生.
disableDefault 使目标事件的动作不可用 ( 在javascript代码中添加 "return false;" )
requestDelay 在JS事件上延迟 ( 单位 ms. )发送Ajax请求.与事件队列公共工作可以减少键盘或者鼠标移动触发请求的次数
eventsQueue 用来避免在同一个事件上的重复请求的队列的名字.可以用来减少周期事件(如:按键,鼠标移动)请求的次数.
bypassUpdates 如果使true,在处理验证阶段后跳过更新模型值阶段到呈现阶段.可以用来验证组件的输入值.
immediate 如果该组件被Ajax请求激活的话,标记该组件应该立即(在应用请求值阶段)被感兴趣的监听器和动作处理,而不是等到调用应用程序阶段.(译者注:该标记和JSF中的immediate标记所代表的意思差不多,跳过验证阶段到呈现响应阶段)
limitToList 如果为true,仅仅更新'reRender'属性中指定的组件,否则(默认值)更新所有Ajax Region中的组件
ajaxSingle 如果为 true , 仅仅提交一个field/link,而不是整个form中的内容.
event  父组件的JS事件属性的名称 ( onclick , onchange, etc. ) , for which we will build AJAX submission code.
binding 组件绑定.

 

所有你需要指定的东西 - 父组件用来触发ajax请求的事件 和被reRender的区域 , 和处理事件的Java bean方法 .

    <a4j:region selfRendered="true">
…
<h:selectBooleanCheckbox value="#{pizza.tip}">
<a4j:support event="change" reRender="#{partsId.list}"
action="#{Some.show_hide}"

/>
</h:selectBooleanCheckbox>
…
</a4j:region>

因此,在上面的例子中,checkbox状态的改变将提交当前的区域. 'show_hide'动作将被调用,并且 'list'中的id所指定的组件将被更新.

呈现一个Html <a> 元素,当点击时的动作就象一个form提交一样.

在解码的过程中:

     从ExternalContext的属性requestParameterMap中得到一个Map,如果该Map中包含"clientId" key的非空值, 在组件上创建一个 javax.faces.event.ActionEvent 事件,并且传递该事件给组件的queueEvent() 方法.如果该请求是Ajax-performed,把reRander属性中的IDs值添加到嵌套的AjaxContainer的 rendered areas list中 ,在解码的过程中也添加组件的参数(PARAM_NAME 和 PARAM_VALUE 是任何嵌套的子UIParameter的names 和 values .) names 和 values必须是被URLEncoded处理过的.如果styleClass属性被指定了,呈现它的值为html中的class属性的值. 呈现任何non-UIParameter子组件为<a>的相应的子组件. 这些看起来就像一个Link文本.

Table 4.5. a4j:commandLink attributes

actionListener 方法绑定,当该组件被ajax请求激活时,将调用该监听器方法处理该事件.该方法必须为public的并且接受一个 AjaxEvent 参数,返回void.
title 该组件产生的标记元素的提示文字(当鼠标移动到该组件上面出现的提示文字)
oncomplete 在客户端请求完成时调用的js代码
shape default|rect|circle|poly [CI] 该属性指定一个区域的形状.可能的取值: * default: 指定整个区域. * rect:指定一个矩形区域. * circle: 定义一个圆形区域. * poly: 定义一个多边形区域.
target  
rendered 如果为false,该组件将不会被显示.
charset 该属性指定了通过链接指派的资源的字符编码.
reRender 该组件调用Ajax请求后重新渲染的组件的ID(在 UIComopnent.findComponent()中使用),可以使一个id,也可以使逗号分开的很多id,或者是数据or集合的EL表达式
targetId Alias for reRender : 该组件调用Ajax请求后重新渲染的组件的ID(在 UIComopnent.findComponent()中使用),可以使一个id,也可以使逗号分开的很多id,或者是数据or集合的EL表达式
id 每个组件都应该有个唯一的id. 如果没有指定的话,将会自动产生.
dir 文本方向.
rev 该属性用来描述从通过 href 属性指定的锚点到当前文档的反向链接。该属性值是通过空格分隔的 link 类型(值)的列表。
 
bypassUpdates 如果使true,在处理验证阶段后跳过更新模型值阶段到呈现阶段.可以用来验证组件的输入值.
styleClass 和HTML的class属性一样.
accesskey 触发该组件的快捷键
limitToList 如果为true,仅仅更新'reRender'属性中指定的组件,否则(默认值)更新所有Ajax Region中的组件
onkeypress 键盘事件,键被按下和松开
ajaxSingle 如果使true,仅仅提交一个field/link,而不是所有被控制的
ondblclick HTML: 双击事件
style HTML: 应用在该组件上的CSS.
onblur 当元素失去焦点时发生的事件
onmouseover 当滑鼠移动到组件上方时
 
onkeyup 当使用者按下并放开按键
value 该组件的当前值
action 方法绑定到要被激活的程序动作方法, 如果该 UIComponent 被用户激活, 根据immediate属性的值,方法在 请求处理生命周期中的Apply Request Values 或者 Invoke Application 阶段 被调用.
tabindex 设置不同元素之间获得焦点的顺序
hreflang 该属性指定了通过 href 指派的资源的基本语言,并且仅在 href 被指定的情况下使用(也就是说如果 A 中没有指定 href 属性,就不应该出现 hreflang 属性)。
type 该属性指定链接资源所采用的内容类型。(译者注:例如网页通常为 text/html)
lang 产生该组件标记所使用的语言
onclick 当鼠标点击时发生的事件
 
status 请求状态组件的ID(在UIComopnent.findComponent()中使用)
onmouseout 鼠标光标移开元素时发生的事件
onkeydown 键按下时发生的事件
onmousedown 按下鼠标按键时发生的事件
requestDelay 在JS事件上延迟 ( 单位 ms. )发送Ajax请求.与事件队列公共工作可以减少键盘或者鼠标移动触发请求的次数
eventsQueue 用来避免在同一个事件上的重复请求的队列的名字.可以用来减少周期事件(如:按键,鼠标移动)请求的次数.
rel 该属性描述了从当前文档到通过 href 属性定义的锚点之间的关系。该属性值是通过空格分隔的 link 类型(值)的列表(译者注:在 Web 标准开发中,这个通常用来代替 target 属性,配合脚本,用来表示目的窗口)。
immediate 如果该组件被Ajax请求激活的话,标记该组件应该立即(在应用请求值阶段)被感兴趣的监听器和动作处理,而不是等到调用应用程序阶段.(译者注:该标记和JSF中的immediate标记所代表的意思差不多,跳过验证阶段到呈现响应阶段)
onfocus 使用在表单元素中,当元素获得焦点时发生的事件
onmouseup 当释放鼠标按键时发生的事件
binding 组件绑定.
onmousemove 鼠标光标在元素上移动时发生的事件
coords 定义区域 -- coords
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

通常a4j:commandLink 是一个 具有AJAX 支持的HTML <input> 元素. 包含所有的a4j:support的主要功能, 还有它自己的onclick事件的Ajax请求和所有与a4j:Support组合的CommandLink特性.

呈现一个HTML "input" 元素.

在解码的过程中:

         从ExternalContext的属性requestParameterMap中得到一个Map,如果该Map中包含"clientId" key的非空值, 在组件上创建一个 javax.faces.event.ActionEvent 事件,并且传递该事件给组件的queueEvent() 方法.如果该请求是Ajax-performed,把reRander属性中的IDs值添加到嵌套的AjaxContainer的 rendered areas list中 .

在编码的过程中:

        为onclick事件创建一个AJAX.Submit JavaScript调用.呈现组件的clientId 为name属性的值.呈现组件的当前值为value属性的值.

如果styleClass属性被指定了,呈现它的值为class属性的值.  呈现 HTML "input"元素的子元素.

Table 4.6. a4j:commandButton attributes

actionListener 方法绑定,当该组件被ajax请求激活时,将调用该监听器方法处理该事件.该方法必须为public的并且接受一个 AjaxEvent 参数,返回void.
title 该组件产生的标记元素的提示文字(当鼠标移动到该组件上面出现的提示文字)
oncomplete 在客户端请求完成时调用的js代码
rendered 如果为false,该组件将不会被显示.
reRender 该组件调用Ajax请求后重新渲染的组件的ID(在 UIComopnent.findComponent()中使用),可以使一个id,也可以使逗号分开的很多id,或者是数据or集合的EL表达式
targetId Alias for reRender : 该组件调用Ajax请求后重新渲染的组件的ID(在 UIComopnent.findComponent()中使用),可以使一个id,也可以使逗号分开的很多id,或者是数据or集合的EL表达式
onchange 使用在表单元素中,当某些东西改变时发生的事件
dir 文本方向.
id 每个组件都应该有个唯一的id. 如果没有指定的话,将会自动产生.
bypassUpdates 如果使true,在处理验证阶段后跳过更新模型值阶段到呈现阶段.可以用来验证组件的输入值.
styleClass 和HTML的class属性一样.
accesskey 触发该组件的快捷键
limitToList 如果为true,仅仅更新'reRender'属性中指定的组件,否则(默认值)更新所有Ajax Region中的组件
onkeypress 键盘事件,键被按下和松开
ajaxSingle 如果使true,仅仅提交一个field/link,而不是所有被控制的
ondblclick HTML: 双击事件
image 在 这个button中要显示的图片的绝对或者相对URL 如果指定了该 "input" 元素将为"image"类型. 否则, it will be of the type specified by the "type" property with a label specified by the "value" property.
style HTML: 应用在该组件上的CSS.
size 定义组件显示的尺度
onblur 当失去焦点时发生的事件
onmouseover 当滑鼠移动到组件上方时
 
value 该组件的当前值
action 方法绑定到要被激活的程序动作方法, 如果该 UIComponent 被用户激活, 根据immediate属性的值,方法在 请求处理生命周期中的Apply Request Values 或者 Invoke Application 阶段 被调用.
onkeyup</t>
评论

相关推荐

Global site tag (gtag.js) - Google Analytics