PrimeFaces p: blockUI blocks a specific component dynamically (in JSF EL state)?

How do you do PrimeFaces p: blockUI blocks a specific component dynamically, i.e. in an EL state?

USE CASE:

The condition is basically the mode in which the user can be on the page: if there are any exceeded collisions, and they are currently displayed in the user’s request, they block the navigation tree (show the excess of the collision mode, blocking the navigation tree), otherwise in the case we are in normal mode, and the navigation tree should be unlocked (show the mode of normal collisions, the navigation tree is unlocked).

Currently, the problem is that when in the β€œexcess mode”, when the status changes to not exceeded in the status change dialog box, the page correctly displays / updates it in normal mode , but the shadow in the navigation tree is still there . Since we are now in normal mode, I need to somehow unlock if there were no more collision excesses.

Got it ?:-)

OK, here is the bean property first:

/*
 * 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;
}

First try:

A look at the VDL docs http://www.primefaces.org/docs/vdl/3.4/primefaces-p/blockUI.html showed some blocked attribute.

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

The above, however, does absolutely nothing.

Second attempt:

Looking at the http://www.primefaces.org/showcase/ui/blockUI.jsf storefront , the client API seemed more appropriate.

show() hide() ValueExpression OK :

    <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 oncomplete EL . @this .

                 update="@this :explorer-form:tree :collision-form:period-grid :collision-form:list :collision-form:growl"
  • , " " - JSF, PrimeFaces-specific ( , !).

  • blockUI blocked = "# {?}" EL?

+5
1

- hide() show() BlockUI Managed Bean.
RequestContext:

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

- JavaScript, Javascript .

onClick="func(#{elvariable})"

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

All Articles