了解PrimeFaces进程/更新和JSF f:ajax执行/呈现属性

Question

究竟是什么process,并update在PrimeFaces p:commandXxx组件和execute和render的f:ajax标签？

哪个在验证时有效？什么是update属性做,而不是更新的值从后端组件？不要process属性绑定值模型？究竟是什么@this,@parent,@all并@form在这两个属性？

下面的例子工作正常,但我对基本概念有点困惑.

<p:commandButton process="@parent"
                 update="@form"
                 action="#{bean.submit}" 
                 value="Submit" />

Answer 1

<p:commandXxx process> <p:ajax process> <f:ajax execute>

该process属性是服务器端,只能影响UIComponent实现EditableValueHolder(输入字段)或ActionSource(命令字段).该process属性告诉JSF,使用以空格分隔的客户端ID列表,在(部分)表单提交时,必须通过整个JSF生命周期处理哪些组件.

然后,JSF将应用请求值(根据组件自己的客户端ID查找HTTP请求参数,然后在EditableValueHolder组件情况下将其设置为提交值,或者ActionEvent在ActionSource组件情况下将新值排队),执行转换,验证和更新模型值(EditableValueHolder仅限组件)并最终调用排队ActionEvent(ActionSource仅限组件).JSF将跳过处理process属性未涵盖的所有其他组件.此外,作为防止篡改请求的一部分,还将跳过在应用请求值阶段期间rendered属性求false值的组件.

请注意,在ActionSource组件(例如<p:commandButton>)非常重要的情况下,您还要在组件中包含组件本身process,特别是如果您打算调用与组件关联的操作.所以下面的例子打算在调用某个命令组件时只处理某些输入组件是不行的:

<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="foo" action="#{bean.action}" />

它只会处理#{bean.foo}而不是处理#{bean.action}.您还需要包含命令组件本身:

<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="@this foo" action="#{bean.action}" />

或者,正如您明显发现的那样,使用@parent它们恰好是具有共同父级的唯一组件:

<p:panel><!-- Type doesn't matter, as long as it's a common parent. -->
    <p:inputText id="foo" value="#{bean.foo}" />
    <p:commandButton process="@parent" action="#{bean.action}" />
</p:panel>

或者,如果它们碰巧是父UIForm组件的唯一组件,那么您还可以使用@form:

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" />
    <p:commandButton process="@form" action="#{bean.action}" />
</h:form>

如果表单包含您希望在处理过程中跳过的更多输入组件,有时会出现这种情况,这通常比您希望根据当前输入组件更新其他输入组件或某些UI部分更常见.一个ajax监听器方法.您不希望其他输入组件上的验证错误阻止执行ajax侦听器方法.

那就是了@all.这在process属性中没有特殊效果,但仅在update属性中有效.A process="@all"表现完全相同process="@form".HTML不支持同时提交多个表单.

这里顺便也一个很@none可能是在情况下,你完全不需要处理任何有用的东西,但只是想更新通过一些特定的部位update,特别是那些部分,其内容不依赖于提交的值或动作监听器.

注意应该是该process属性对HTTP请求有效负载(请求参数的数量)没有影响.这意味着,发送HTML表示中包含的"所有内容"的默认HTML行为<h:form>将不会受到影响.如果您有一个大型表单,并且希望将HTTP请求有效负载减少到只有处理中绝对必要的那些,即只有process属性覆盖的那些,那么您可以partialSubmit在<p:commandXxx ... partialSubmit="true">或中设置PrimeFaces Ajax组件中的属性<p:ajax ... partialSubmit="true">.或者,您也可以使用<o:form>默认为此行为的OmniFaces 3.0+.

JSF的同等标准的PrimeFaces具体process是execute从<f:ajax execute>.它的行为完全相同,只是它不支持逗号分隔的字符串而PrimeFaces字符串(虽然我个人建议只是坚持空格分隔的约定),也不支持@parent关键字.此外,知道<p:commandXxx process>默认为@formwhile <p:ajax process>和<f:ajax execute>默认值可能很有用@this.最后,了解process支持所谓的"PrimeFaces选择器" 也很有用,另请参阅更新="@(.myClass)"中的PrimeFaces选择器如何工作？

<p:commandXxx update> <p:ajax update> <f:ajax render>

该update属性是客户端,可以影响所有UIComponents 的HTML表示.该update属性告诉JavaScript(负责处理ajax请求/响应的人),使用空格分隔的客户端ID列表,HTML DOM树中的哪些部分需要更新为对表单提交的响应.

然后,JSF将为此准备正确的ajax响应,仅包含要更新的请求部分.JSF将跳过updateajax响应中属性未涵盖的所有其他组件,从而保持响应有效负载较小.此外,将跳过在呈现响应阶段期间rendered属性求值的组件false.请注意,即使它会返回true,但如果最初是JavaScript,则无法在HTML DOM树中更新它false.您需要将其换行或更新其父级.另请参见Ajax update/render不适用于具有呈现属性的组件.

通常,您只想在(部分)表单提交时更新客户端中真正需要"刷新" 的组件.以下示例通过以下方式更新整个父表单@form:

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" required="true" />
    <p:message id="foo_m" for="foo" />
    <p:inputText id="bar" value="#{bean.bar}" required="true" />
    <p:message id="bar_m" for="bar" />
    <p:commandButton action="#{bean.action}" update="@form" />
</h:form>

(注意,process省略属性,因为默认属性@form)

虽然这可能工作正常,但输入和命令组件的更新在此特定示例中是不必要的.除非您更改模型值foo和bar内部action方法(在UX透视图中反过来又不直观),否则无法更新它们.消息组件是唯一真正需要更新的组件:

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" required="true" />
    <p:message id="foo_m" for="foo" />
    <p:inputText id="bar" value="#{bean.bar}" required="true" />
    <p:message id="bar_m" for="bar" />
    <p:commandButton action="#{bean.action}" update="foo_m bar_m" />
</h:form>

然而,当你有很多这样的时候,这会变得乏味.这就是PrimeFaces选择器存在的原因之一.这些消息组件在生成的HTML输出中有一个共同的样式类ui-message,因此以下内容也应如下:

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" required="true" />
    <p:message id="foo_m" for="foo" />
    <p:inputText id="bar" value="#{bean.bar}" required="true" />
    <p:message id="bar_m" for="bar" />
    <p:commandButton action="#{bean.action}" update="@(.ui-message)" />
</h:form>

(请注意,您应该在消息组件上保留ID,否则@(...)将无法工作!再次,请参阅如何更新PrimeFaces选择器="@(.myClass)"工作？了解详细信息)

该@parent更新只父组件,因此其覆盖电流分量和所有的兄弟姐妹和他们的孩子.如果您将表单中的表单与每个自己的职责分开,这将更有用.该@this更新,显然,只有电流分量.通常,仅当您需要在操作方法中更改组件自己的HTML属性之一时,才需要这样做.例如

<p:commandButton action="#{bean.action}" update="@this" 
    oncomplete="doSomething('#{bean.value}')" />

想象一下,如果组件没有更新,那么oncomplete需要使用value更改的组件action,那么这个构造就不会有效,原因oncomplete很简单,因为它是生成的HTML输出的一部分(因此评估了所有EL表达式)在渲染响应期间).

该@all更新整个文档,应小心使用.通常,您希望使用真正的GET请求,而不是通过普通链接(<a>或<h:link>)或重定向后POST ?faces-redirect=true或ExternalContext#redirect().在效果中,process="@form" update="@all"与非ajax(非部分)提交具有完全相同的效果.在我的整个JSF职业生涯中,我遇到的唯一明智的用例@all是在ajax请求期间发生异常时完整显示错误页面.另请参阅处理AJAXified组件的JSF 2.0异常的正确方法是什么？

JSF的同等标准的PrimeFaces具体update是render从<f:ajax render>.它的行为完全相同,只是它不支持逗号分隔的字符串而PrimeFaces字符串(虽然我个人建议只是坚持空格分隔的约定),也不支持@parent关键字.双方update并render默认为@none(这是"无").

也可以看看:

• 如何找到ajax update/render组件的客户端ID？找不到带有"bar"引用的表达式"foo"的组件
• 按PrimeFaces p:commandButton时事件的执行顺序
• 如何在例如p:dataTable分页期间减少p:ajax的请求有效载荷
• 如何在ap:对话框中显示p:dataTable中当前行的详细信息,并在保存后更新
• 如何在JSF页面中使用<h:form>？单一形式？多种形式？嵌套表格？

Answer 2

如果你很难记住默认值(我知道我有...)这里是BalusC答案的简短摘录:

Component    | Submit          | Refresh
------------ | --------------- | --------------
f:ajax       | execute="@this" | render="@none"
p:ajax       | process="@this" | update="@none"
p:commandXXX | process="@form" | update="@none"

Answer 3

通过进程(在JSF规范中称为execute),您告诉JSF将处理限制为指定的组件,其他任何东西都被忽略.

update指示当服务器响应您的请求时将更新哪个元素.

@all:处理/渲染每个组件.

@this:处理/呈现具有execute属性的请求组件.

@form:处理/呈现包含请求组件的表单.

@parent:处理/呈现包含请求组件的父级.

使用Primefaces,您甚至可以使用JQuery选择器,请查看此博客:http://blog.primefaces.org/？p = 1867

Answer 4

JSF 2.0+ 关键字

• @this 当前组件。
• @all 全视图。
• @form 当前组件的最近祖先形式。
• @none 没有组件。

JSF 2.3+ 关键字

• @child(n) 第 n 个孩子。
• @composite 最近的复合组件祖先。
• @id(id) 用于通过组件 id 搜索组件，忽略组件树结构和命名容器。
• @namingcontainer 当前组件的最近祖先命名容器。
• @parent 当前组件的父级。
• @previous 上一个兄弟。
• @next 下一个兄弟。
• @root 视图的 UIViewRoot 实例，可用于从根而不是当前组件开始搜索。

PrimeFaces 特定关键字

• @row(n) 第 n 行。
• @widgetVar(name) 具有给定 widgetVar 的组件。

您甚至可以使用名为“PrimeFaces Selectors”的东西，它允许您使用 jQuery Selector API。例如，使用 CSS 类处理元素中的所有输入myClass：

process="@(.myClass :input)"

看：

• https://primefaces.github.io/primefaces/10_0_0/#/core/searchexpression

PrimeFaces 10+ 观察者/事件

这允许您根据@obs(event)关键字设置的自定义事件名称更新组件。例如：

process="@(.myClass :input)"

看：

• https://www.primefaces.org/showcase/ui/ajax/observer.xhtml