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:
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?