首页 文章

PrimeFaces p:blockUI动态阻塞某个组件(在JSF EL条件下)?

提问于
浏览
5

你如何使PrimeFaces p:blockUI动态地阻止某个组件,即EL条件?

使用案例:

手头的条件基本上是用户可以在页面上的模式:如果有任何超出的冲突,并且当前在用户请求中显示它们,则阻止导航树(显示超出冲突模式,阻止导航树),否则我们处于常规视图中,导航树应该被解锁(显示常规碰撞模式,导航树解锁) .

当前的问题是,当在"exceeded mode"中,当状态更改对话框将状态更改为未超过时,页面将正确呈现/更新回正常模式, but the shadow on the navigation tree is still there . 由于我们现在处于常规模式,如果没有更多的冲突,我需要一些方法来解锁 .

懂了吗? :-)

好的,首先是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;
}

1st try:

查看VDL文档http://www.primefaces.org/docs/vdl/3.4/primefaces-p/blockUI.html显示了一些阻止属性 .

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

但上述情况绝对没有 .

2nd try:

看着展示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>

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

我尝试了两种基本变体:

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

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

状态更改对话框一直处于关闭状态,但上面的逻辑并没有开始 .

我必须在这里做一些内在错误的事情 . 我怀疑OK按钮的完整EL表达式在被点击时不会被重新评估 . 将@this添加到更新列表不会改变任何内容 .

update="@this :explorer-form:tree :collision-form:period-grid :collision-form:list :collision-form:growl"
  • 我的问题如何最好地解决,其中“最佳”是首先是JSF,然后是PrimeFaces特定的(理想情况下,这是记录在哪里!) .

  • 是否可以在EL中使用blockUI blocked =“#{?}”属性?

谢谢

1 回答

  • 3

    一种方法是从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>
    

相关问题