PrimeFaces Extensions Showcase

BlockUI

This example shows how to use "autoShow" mode activated by setting the attribute "autoShow" to true. Another feature is the "event" attribute which specifies which events should be listen. Skipping "event" means we are not interested in any events. That means all events of the source component cause a blocking of the target component(s). Only events specified by p:ajax are supported. PrimeFaces components can also send ajax requests without p:ajax, but such events are internal and not exposed. BlockUI don't support such events. The "target" attribute allows to specify several target components and HTML elements to be blocked. The syntax of the "target" attribute is the same as e.g. for "process" and "update" attributes in p:ajax.

Try to expand, select, unselect a tree node on the left side or click on any checkbox on the right side.

Source

XHTML page
Managed bean


<h:panelGroup id="viewArea" layout="block">
    <h:panelGrid columns="2" columnClasses="columnTop,columnTop">
        <h:panelGroup layout="block" styleClass="blockable" style="margin-right: 40px;">
            <p:tree id="fileSystem" value="#{fileSystemController.root}" var="node" dynamic="true"
                    cache="false" selectionMode="single" selection="#{fileSystemController.selectedNode}">
                <p:ajax event="expand" update=":mainForm:accessRightsGroup"
                        listener="#{fileSystemController.onNodeExpand}"/>
                <p:ajax event="select" update=":mainForm:accessRightsGroup"
                        listener="#{fileSystemController.onNodeSelect}"/>
                <p:ajax event="unselect" update=":mainForm:accessRightsGroup"
                        listener="#{fileSystemController.onNodeUnselect}"/>
                <p:treeNode>
                    <h:outputText value="#{node}"/>
                </p:treeNode>
            </p:tree>
        </h:panelGroup>

        <h:panelGroup layout="block" id="accessRightsGroup" styleClass="blockable" style="width: 250px;">
            <h:outputText value="Access rights for #{fileSystemController.selectedNode.data}"
                          rendered="#{not empty fileSystemController.selectedNode}"/>
            <h:outputText value="No tree node is selected" rendered="#{empty fileSystemController.selectedNode}"/>

            <h:selectManyCheckbox id="accessRights" value="#{accessRightsController.selectedAccessRights}"
                                  styleClass="checkBoxes" layout="pageDirection" style="margin-top: 10px;">
                <f:selectItems value="#{accessRightsController.accessRights}"/>
                <p:ajax process="@this"/>
            </h:selectManyCheckbox>

            <pe:blockUI source="accessRights" target="@(.blockable)" autoShow="true">
                <h:panelGrid columns="2">
                    <h:graphicImage library="images" name="ajax-loader1.gif"
                                    style="margin-right: 12px; vertical-align: middle;"/>
                    <h:outputText value="Checkbox clicked..." style="white-space: nowrap;"/>
                </h:panelGrid>
            </pe:blockUI>
        </h:panelGroup>
    </h:panelGrid>
</h:panelGroup>

<pe:blockUI source="fileSystem" target="viewArea" event="expand,select,unselect" autoShow="true">
    <h:panelGrid columns="2">
        <h:graphicImage library="images" name="ajax-loader1.gif"
                        style="margin-right: 12px; vertical-align: middle;"/>
        <h:outputText value="Tree event is running..." style="white-space: nowrap;"/>
    </h:panelGrid>
</pe:blockUI>


@Named
@ViewScoped
public class FileSystemController implements Serializable {

    private static final long serialVersionUID = 20111229L;

    private final TreeNode root;
    private TreeNode selectedNode;

    public FileSystemController() {
        root = new DefaultTreeNode("Root", null);

        final TreeNode node0 = new DefaultTreeNode("Folder 0", root);
        final TreeNode node1 = new DefaultTreeNode("Folder 1", root);
        final TreeNode node2 = new DefaultTreeNode("Folder 2", root);
        final TreeNode node00 = new DefaultTreeNode("Folder 0.0", node0);
        final TreeNode node01 = new DefaultTreeNode("Folder 0.1", node0);
        final TreeNode node10 = new DefaultTreeNode("Folder 1.0", node1);
        new DefaultTreeNode("File 1.1", node1);
        new DefaultTreeNode("File 2.0", node2);
        new DefaultTreeNode("File 0.0.0", node00);
        new DefaultTreeNode("File 0.0.1", node00);
        new DefaultTreeNode("File 0.1.0", node01);
        new DefaultTreeNode("File 1.0.0", node10);
    }

    public TreeNode getRoot() {
        return root;
    }

    public TreeNode getSelectedNode() {
        return selectedNode;
    }

    public void setSelectedNode(final TreeNode selectedNode) {
        this.selectedNode = selectedNode;
    }

    public void onNodeExpand(final NodeExpandEvent event) {
        doSomething();
    }

    public void onNodeSelect(final NodeSelectEvent event) {
        selectedNode = event.getTreeNode();
        doSomething();
    }

    public void onNodeUnselect(final NodeUnselectEvent event) {
        selectedNode = null;
        doSomething();
    }

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

@Named
@ViewScoped
public class AccessRightsController implements Serializable {

    private static final long serialVersionUID = 20111229L;

    private List<SelectItem> accessRights = new ArrayList<>();
    private List<SelectItem> selectedAccessRights = new ArrayList<>();

    public AccessRightsController() {
        accessRights.add(new SelectItem("View", "View"));
        accessRights.add(new SelectItem("Read", "Read"));
        accessRights.add(new SelectItem("Write", "Write"));
        accessRights.add(new SelectItem("Execute", "Execute"));
        accessRights.add(new SelectItem("Delete", "Delete"));
        accessRights.add(new SelectItem("Full", "Full"));
    }

    public List<SelectItem> getAccessRights() {
        return accessRights;
    }

    public void setAccessRights(List<SelectItem> accessRights) {
        this.accessRights = accessRights;
    }

    public List<SelectItem> getSelectedAccessRights() {
        try {
            // simulate a long running request
            Thread.sleep(1200);
        }
        catch (Exception e) {
            // Restore interrupted state...
            Thread.currentThread().interrupt();
        }

        return selectedAccessRights;
    }

    public void setSelectedAccessRights(List<SelectItem> selectedAccessRights) {
        this.selectedAccessRights = selectedAccessRights;
    }
}