关于 RichFaces 4 概述
本系列文章旨在为您简要概述我们为扩展 JSF 2 并添加高级功能和组件所做的工作。
核心 Ajax 组件
RichFaces 组件迁移过程的第一部分主要包含 a4j 库的核心组件,这些组件提供了 增强的 Ajax 功能。我相信社区中的大多数人很熟悉基本的 RichFaces Ajax 组件,并且已经使用了很长时间。所以在这个领域没有太多可说的。它们应该可以像在 RichFaces 3.3.x 中一样轻松使用,但考虑到 JSF 2 Ajax 定义标准。第一篇文章旨在提供它们的使用概述,并描述 RichFaces 4 Ajax 请求排队机制,该机制旨在简化您的页面/服务器事务优化。
为什么需要它们?
让我们从开始讲起。为什么在 JSF 2 世界中,Ajax 已标准化并且作为标准功能提供的情况下,我们还需要我们的 Ajax 组件?答案很简单:JSF 是一个开放标准,它提供了基本功能,但为定制和扩展留下了很大空间。它们从 RichFaces 3.x 和其他框架中吸取了许多实现想法,并将共同的基本功能添加到 JSF 2 标准中。然而,仍然有许多用例需要 JSF 2 开发者进行额外的工作。RichFaces 的目的是提供扩展,这些扩展将涵盖 JSF 中缺少但现实世界 Web 应用程序所需的几乎所有功能。
简单的 Ajax 使用
让我们从最简单的 Ajax 重复器示例开始,以便介绍排队功能。
<h:inputText id="myinput" value="#{queueBean.text}"> <a4j:ajax event="keyup" render="outtext"/> </h:inputText> <h:outputText value="#{queueBean.text}" id="outtext"/>
在这个示例中,正如您从片段中看到的,对于输入文本中的每个keyup事件,都会生成一个Ajax请求,并将''outtext''更新为新值。如果您快速输入并查看firebug控制台,例如,您会发现在每次输入字母时都会有大量的请求生成。
好消息:JSF 2自带Ajax请求队列!所以频繁的请求不会成为并发,而是逐个发送并按正确顺序处理。
但是,我仍然需要减少请求的数量。为了做到这一点,我仍然需要手动使用定时器,并像这篇文章中所示使用Ajax API发送请求。
再一次好消息:RichFaces Ajax请求队列解决了这个问题,您只需要通过页面标签声明性地指定请求组合规则和预发送等待时间。
让我们排队
以下代码片段定义了表单或视图(根据定义的位置)的队列。
<a4j:queue requestDelay="1500"/>
requestDelay指定在发送下一个请求到服务器之前的时间间隔(以毫秒为单位)。
因此,现在如果我们不延迟(或延迟小于1.5秒)输入并检查请求控制台,我们会看到只有一个包含最新信息的请求被发送。RichFaces Ajax请求通过使用requestGroupingId选项进行分组,该选项等于发起请求的组件的客户ID(默认情况下)。这很简单,但对于这种情况非常有用。
更复杂的情况。如何从不同的来源分组请求?
现在让我们想象一个注册表单,它包含一些输入,这些输入在更改后立即通过Ajax进行验证。使用上面所示的队列,每个输入都会出现一个请求。但是,如果我不希望在用户输入信息时发送它们,而仅在用户停止输入以检查结果时验证表单,该怎么办?这仍然很简单。我们只需要向队列添加带有传递给队列的附加参数的attachQueue。
<h:form> <a4j:queue requestDelay="1500"/> <h:inputText id="myinput" value="#{queueBean.text}"> <a4j:ajax event="keyup" render="fooMessages" execute="@form"> <a4j:attachQueue requestGroupingId=”registrationForm”/> </a4j:ajax> </h:inputText> <h:inputText id="myinput2" value="#{queueBean.text2}"> <a4j:ajax event="keyup" render="fooMessages" execute="@form"> <a4j:attachQueue requestGroupingId="registrationForm"/> </a4j:ajax> </h:inputText> </h:form>
注意:在RichFaces 4中,我们将所有与队列相关的属性(requestDelay、requestGroupingId、ignoredupResponse等)移动到特殊的attachQueue标签中,以使组件本身更干净。
前面的代码可以重写为更简单,因为我们可以使用包装行为而不是嵌套。
<h:form> <a4j:queue requestDelay="1500"/> <a4j:ajax event="keyup" render="fooId1" execute="@form"> <a4j:attachQueue requestGroupingId="registrationForm"/> <h:inputText id="myinput" value="#{queueBean.text}"/> <h:inputText id="myinput2" value="#{queueBean.text2}"/> </a4j:ajax </h:form>
就是这样。现在这些输入的请求从RichFaces队列的角度来看是相似的。如果用户在不同输入之间快速输入,那么在1.5秒的无操作后,只会为表单触发一个验证请求。因此,现在优化发送到服务器的请求变得像定义它们一样简单!
下一步是什么?
在未来的版本中,我们计划添加对命名队列的完全支持以及3.3.x ignoreDupResponces功能的可能实现(目前尚未准备好,因为我们依赖于JSF脚本在更新期间,并且目前不能跳过更新)。我们还将讨论逻辑队列可能的益处和实现方式——它不仅将请求传递到带有附加参数的通用队列,而是在本地逻辑队列中预先处理它们。
获取更多信息并在自己的环境中尝试使用