PrimeFaces p:blockUI 动态阻止某个组件（在 JSF EL 条件下）？答案

【问题标题】：PrimeFaces p:blockUI blocking a certain component dynamically (on JSF EL condition)?PrimeFaces p:blockUI 动态阻止某个组件（在 JSF EL 条件下）？
【发布时间】：2013-02-18 14:42:55
【问题描述】：

如何让 PrimeFaces p:blockUI 动态阻止某个组件，即在 EL 条件下？

用例：

手头的情况基本上是用户可以在页面上的一种模式：如果有任何超出的冲突并且它们当前应用户请求显示，则阻止导航树（显示超出冲突模式，导航树被阻止)，否则我们在常规视图中，导航树应该是畅通的（显示常规碰撞模式，导航树畅通）。

目前的问题是，当处于“超出模式”时，当状态更改对话框将状态更改为未超出时，页面会正确呈现/更新回常规模式，但导航上的阴影树还在。由于我们现在处于常规模式，如果没有更多超出的碰撞，我需要一些方法来解除阻塞。

明白了吗？ :-)

好的，这里首先是 bean 属性：

/*
 * The logic of this method ensures that after status update the
 * mode is automatically put back into regular view if no followup
 * date exceeded collisions exist.
 */
public boolean isFollowupExceededCollisionsShown()
{
    return getFollowupExceededCount() > 0 ? this.followupExceededCollisionsShown : false;
}

第一次尝试：

查看 VDL 文档 http://www.primefaces.org/docs/vdl/3.4/primefaces-p/blockUI.html 揭示一些被屏蔽的属性。

    <p:blockUI widgetVar="explorerBlocker"
               block=":explorer-form"
               blocked="#{collisionManager.followupExceededCollisionsShown}" />

然而，上面的内容完全没有任何作用。

第二次尝试：

看了http://www.primefaces.org/showcase/ui/blockUI.jsf的陈列柜，客户端API似乎更够用了。

这个想法是在状态更改对话框上按 OK 时根据 ValueExpression 调用 show() 或 hide()：

    <p:dialog id="state-change-dialog"
              widgetVar="stateChangeDialog"
              modal="true"
              appendToBody="true">

        <h:form>

            <ui:include src="/view/collisionmgmt/collisionStatusChangeGrid.xhtml" />

            <h:panelGroup layout="block" styleClass="center-button-panel">
                <p:commandButton id="save-button"
                                 icon="ui-icon ui-icon-disk"
                                 value="OK"
                                 action="#{collisionManager.performStatusChange}"
                                 process="@form"
                                 update=":explorer-form:tree :collision-form:period-grid :collision-form:list :collision-form:growl"
                                 oncomplete="stateChangeDialog.hide();" />
                <p:commandButton icon="ui-icon ui-icon-close"
                                 value="Cancel"
                                 update=":collision-form:list"
                                 onclick="stateChangeDialog.hide();"
                                 immediate="true" />
            </h:panelGroup>
        </h:form>

    </p:dialog>

想法是通过调用explorerBlocker.show(); 或explorerBlocker.hide(); 以某种方式扩展OK 按钮的oncomplete=""，具体取决于EL #{collisionManager.followupExceededCollisionsShown} 的新值。

我尝试了两种基本变体：

oncomplete="stateChangeDialog.hide(); #{collisionManager.followupExceededCollisionsShown ? 'explorerBlocker.show();' : 'explorerBlocker.hide();' }"

oncomplete="stateChangeDialog.hide(); if ( #{collisionManager.followupExceededCollisionsShown} ){ explorerBlocker.show(); } else { explorerBlocker.hide(); }"

状态更改对话框一直关闭，但上面的逻辑没有启动。

我一定是在这里犯了一些本质上的错误。我怀疑 OK 按钮的 oncomplete EL 表达式在被单击时没有得到重新评估。将@this 添加到更新列表不会改变任何内容。

                 update="@this :explorer-form:tree :collision-form:period-grid :collision-form:list :collision-form:growl"

如何最好地解决我的问题，其中“最佳”首先是 JSF-only，然后是 PrimeFaces-specific（理想情况下，这是记录在案的地方！）。
是否可以在 EL 中使用 blockUI blocked="#{?}" 属性？

谢谢

【问题讨论】：

标签： javascript ajax jsf primefaces el

【解决方案1】：

一种方法是从 Managed Bean 调用 BlockUI 的 hide() 和 show() 方法。
您可以通过使用 RequestContext 来做到这一点：

RequestContext.getCurrentInstance().execute("widgetVar.show()");

另一个是您可以将变量传递给 JavaScript 函数，然后让 Javascript 函数为您处理。

onClick="func(#{elvariable})"

<script type="text/javascript">
 function func(value)
 {
 if(value==something){
 widgetVar.show();
 }else{
 widgetVar.hide();
 }
 }
</script>

【讨论】：