PrimeFaces - BlockUI component example

This example shows how to use Primefaces blockUI component to block user interface during some processing.

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>PrimeFaces - BlockUI Example</h2>
    <h:form id="registrationForm">
        <p:inputText id="nameId"
                     value="#{handlerBean.name}"
                     required="true"
                     label="Name"/>
        <p:commandButton id="saveBtn" value="Save" actionListener="#{handlerBean.save}" update="result"/>
        <br />
        <p:blockUI block="registrationForm" trigger="saveBtn" >
            <p:graphicImage name="/progress.gif"/>
        </p:blockUI>
        <br />
        <h:outputText id="result" value="#{handlerBean.name}" />
    </h:form>


</h:body>

Note that p:commandButton's 'actionListener' and 'update' params, and nested tag graphicImage of blockUI are optional for blockUI to work.

Managed Bean

@ManagedBean
@ViewScoped
public class HandlerBean {
  private String name;

  public String getName() {
      return name;
  }

  public void setName(String name) {
      this.name = name;
  }

  public void save() {
      System.out.println("saving name: " + name);
      try {
          //simulating some delay during processing
          TimeUnit.SECONDS.sleep(3);
      } catch (InterruptedException e) {
          e.printStackTrace();
      }
  }
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• JDK 1.8
• Maven 3.3.9