PrimeFaces Extensions Showcase

BlockUI

This example shows how to block the entire page. The entire page can be blocked if you don't define the "target" attribute.

Source

XHTML page
Managed bean


<p:commandButton value="Block this page!" action="#{blockUIController.doSomething}" update="@none"
                 onstart="PF('blockUIWidget').block()" oncomplete="PF('blockUIWidget').unblock()"/>

<pe:blockUI widgetVar="blockUIWidget" cssOverlay="{opacity:0.5}">
    <h:panelGrid columns="2">
        <h:graphicImage library="images" name="ajax-loader1.gif"
                        style="margin-right: 12px; vertical-align: middle;"/>
        <h:outputText value="Please wait..." style="white-space: nowrap;"/>
    </h:panelGrid>
</pe:blockUI>


@Named
@ViewScoped
public class BlockUIController implements Serializable {

    private static final long serialVersionUID = 20130903L;

    public void doSomething() {
        try {
            // simulate a long running request
            Thread.sleep(1200);
        }
        catch (final Exception e) {
            // Restore interrupted state...
            Thread.currentThread().interrupt();
        }
    }
}

Use Cases

Documentation pe:blockUI

Attributes (move mouse over the names to see data types)

Name	Description
autoShow	When true, the block is shown automatically when source triggers.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
centerX	Whether to center the block message horizontally.Default is true.
centerY	Whether to center the block message vertically.Default is true.
content	Search expression for the component whose markup is used as blocking content.
css	CSS to be applied to the blocking overlay.
cssOverlay	CSS to be applied to the overlay element.
event	Comma-separated list of event names that trigger the block. If empty, all events from source are accepted.
fadeIn	Fade-in duration in milliseconds.Default is 200.
fadeOut	Fade-out duration in milliseconds.Default is 400.
focusInput	Whether to focus the first input in the block content.Default is true.
id	Unique identifier of the component in a namingContainer.Default is generated.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showOverlay	Whether to show the overlay.Default is true.
source	Search expression for the component(s) to block.Default is parent.
target	Search expression for the element to use as the blocking container.
timeout	Timeout in milliseconds to automatically unblock. 0 means no timeout.Default is 0.
widgetVar	Name of the client side widget.