Theme
BlockUI
This example shows how to use widget's JavaScript methods block() / unblock(). They are normally used as onstart / oncomplete callbacks in ajaxified components. Try to switch the current page, sort a table column or try to add a new message.
Subject *
Text *
SubjectText
subject 0text 0
subject 1text 1
subject 2text 2
subject 3text 3
subject 4text 4
Source

<p:messages id="messages"/>

<h:panelGrid columns="2">
    <h:panelGroup id="messageDetailGroup" layout="block" style="margin-right: 20px;">
        <h:panelGrid id="messageDetail" columns="1" columnClasses="formColumn">
            <h:outputText value="Subject *"/>
            <h:inputText value="#{dataTableController.newSubject}" required="true" label="Subject"/>
            <h:outputText value="Text *"/>
            <h:inputText value="#{dataTableController.newText}" required="true" label="Text"/>
        </h:panelGrid>

        <p:commandButton id="addMsgButton" value="Add message" action="#{dataTableController.addMessage}"
                         process="messageDetailGroup" update="messageDetail dataTable messages"
                         style="margin-top: 20px;" icon="pi pi-plus"
                         onstart="PF('blockUIWidget1').block()" oncomplete="PF('blockUIWidget1').unblock()"/>
    </h:panelGroup>

    <p:dataTable id="dataTable" var="message" value="#{dataTableController.messages}" paginator="true"
                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rows="5" rowsPerPageTemplate="5,10,15" paginatorPosition="bottom">
        <p:ajax event="page" listener="#{dataTableController.doSomething}" update=":mainForm:messages"
                onstart="PF('blockUIWidget2').block()" oncomplete="PF('blockUIWidget2').unblock()"/>
        <p:ajax event="sort" listener="#{dataTableController.doSomething}" update=":mainForm:messages"
                onstart="PF('blockUIWidget2').block()" oncomplete="PF('blockUIWidget2').unblock()"/>
        <p:column sortBy="#{message.subject}" headerText="Subject">
            <h:outputText value="#{message.subject}"/>
        </p:column>
        <p:column sortBy="#{message.text}" headerText="Text">
            <h:outputText value="#{message.text}"/>
        </p:column>
    </p:dataTable>
</h:panelGrid>

<pe:blockUI target="messageDetailGroup" widgetVar="blockUIWidget1">
    <h:panelGrid columns="2">
        <h:graphicImage library="images" name="ajax-loader1.gif"
                        style="margin-right: 12px; vertical-align: middle;"/>
        <h:outputText value="Adding message..." style="white-space: nowrap;"/>
    </h:panelGrid>
</pe:blockUI>

<pe:blockUI target="dataTable" content="blockUIContent" widgetVar="blockUIWidget2"/>

<h:panelGrid id="blockUIContent" columns="2" style="display:none;table-layout:auto;">
    <h:graphicImage library="images" name="ajax-loader1.gif"
                    style="margin-right: 12px; vertical-align: middle;"/>
    <h:outputText value="Please wait, data is being processed..." style="white-space: nowrap;"/>
</h:panelGrid>
    
<h:outputStylesheet id="blockUICSS">
    #blockUIContent td {
        border: none !important;
        padding: 0 !important;
    }
</h:outputStylesheet>
            
Components and more
Documentation pe:blockUI
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
css Styles for the message when blocking. Styles should be defined as JSON object, e.g. {backgroundColor: 'fff', width: 30%}.
cssOverlay Styles for the overlay. Styles should be defined as JSON object, e.g. {opacity: 0.4, backgroundColor: 'red'}
source Specifies component(s) which send(s) an ajax request and triggers blocking. If nothing specified, the parent component is used.
target Specifies component(s) or HTML element(s) to be blocked. If the target is null or not defined, the entire page is blocked.
content Id of the component in terms of findComponent to be used as content shown during blocking. If nothing specified, the content of blockUI component is used.
event Name(s) of one or several accepted events. Several events should be defined as space or comma separated list.
autoShow Flag whether the blocking is shown automatically without the need to use JavaScript widget. Default value is false.
timeout Time in millis to wait before auto-unblocking. Don't define it or set to 0 to disable auto-unblock. Default value is 0.
centerX Set this attribute to true to have the message automatically centered along the X axis. Note: it only effects element blocking (page blocking controlled by CSS via the css attribute). Default value is true.
centerY Set this attribute to true to have the message automatically centered along the Y axis. Default value is true.
fadeIn Fade In time in millis; set to 0 to disable fadeIn on block.
fadeOut Fade Out time in millis; set to 0 to disable fadeOut on unblock.
showOverlay Disable if you do not want to show the overlay. Default value is true.
focusInput Focus will be placed in the first available input field when page blocking. Default value is true.
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.0,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-12-10 14:32
occured!