Primefaces BlockUI Component Example Tutorial

Primefaces BlockUI is used to block interactivity of JSF components with optional ajax integration.

Primefaces BlockUI

Tag BlockUI
Component Class org.primefaces.component.blockui.BlockUI
Component Type org.primefaces.component.BlockUI
Component Family org.primefaces.component
Renderer Type org.primefaces.component.BlockUIRenderer
Renderer Class org.primefaces.component.blockui.BlockUIRenderer

Primefaces BlockUI Attributes

Name Default Type Description
id null String Unique identifier of the component.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar null String Name of the client side widget.
trigger null String Identifier of the component(s) to bind.
block null String Identifier of the component to block.
blocked false Boolean Blocks the UI by default when enabled.
rendered true Boolean Boolean value to specify the rendering of the component

Getting Started With Primefaces BlockUI

BlockUI component integrates with the ajax behavior without need for associating the p:ajax component as usual. By providing a trigger attribute you are defining those sources that would be used for initiating the blockUI component once they are activated, defining a block attribute will be determined to which component you want to get blocked. As it’s appeared in the attributes, trigger attribute can be associated with multiple sources rather block attribute which identified by using one component only.

Let’s see below a very basic sample that provides you an action source that would initiate the BlockUI component once it’s invoked. By its turn, BlockUI component will get the identified component blocked.

Here is the detailed explanation for the above example:

  1. We’ve defined panel that contains a message component.
  2. The command action is responsible of triggering the blockUI component.
  3. Panel component messagePanel will be blocked once action source is activated.
  4. The command action will get delayed for 4 seconds that makes the blockUI component visible for acceptable period of time to be noticed.

Result of executing code above will be like below:


The message shown above isn’t blocked and so it’s selectable and readable.


Once the block messages action get activated the panel component will be blocked.


Panel component above isn’t selectable now and you are about learning how do you make it invisible.

Primefaces BlockUI Multiple Sources

As we saw, a blockUI component has been used for blocking already rendered component within your view by activating certain action source. Now, it’s time for achieving the same principle but this time using two different action sources.

Here is a detailed explanation for the code listed above:

  1. Index view has defined two actions, one of them is listed inside the panel which is the target of the blockUI component, while second one is outside of the panel. Both actions will cause the panel to be blocked, but this time the inside action will also get blocked when the outside action has fired. Action blocking means the action no longer used, that is the user won’t be able of doing clicks.
  2. For long time period of blocking we’ve added Thread.currentThread().sleep(4000).

The result of executing the above code is like below:



As you’ve noticed, the internal action source isn’t activated until the blockUI has disappeared. If you are activated the internal action the same blockUI will get displayed as well.

Primefaces BlockUI Custom Content

As we’ve promised you, it’s also applicable for you to display some custom content when the BlockUI component gets displayed. Custom content like loading image may cause the content of the blocked component to be invisible.

By associating the BlockUI component with any components you desire like graphicImage, you are about getting custom content displayed when the BlockUI get shown. In the below sample we will use an image like ajax loader as custom content for hiding the content of the blocked component.

And the result of execution is like below:



As you’ve noticed:

  1. Ajax loader image added into project for being used in conjunction with the BlockUI component.
  2. Once the block message action has been activated, the BlockUI component get displayed with the associated Ajax loader image that cause the content of the panel to be unseen.
  3. We’ve used the resource concept that already implemented by the jsf 2 framework. Resource variable is referring the resources folder that located underneath webapp folder. Below, the directory structure of the developed project.
  4. BlockUI-Developed-Project

Primefaces BlockUI Client Side API

Primefaces provides you the ability to manipulate and control the components of your view using the client side API. Defining widgetVar attribute will help you controlling the component and consequently invoking all of those behaviors that the controlled component provide. BlockUI component provides you two client side methods might be invoked by the JavaScript code. Show() & hide() are mainly the only methods available for BlockUI that get it blocked and unblocked respectively. Below sample shows you the mechanism of how can you control the BlockUI component using two JavaScript functions.

The result of executing the above code it will be:


The panel component will get blocked once the ShowBlockUI HTML input has activated where the HideBlockUIwill cause the panel to get unblocked.

Primefaces BlockUI Blocked Attribute

One remaining attribute needs to be mentioned as well. Blocked attribute makes the blocking behavior happened intuitively. It’s defaulted to false in order to make the blocking behavior conditionally. At all cases, if you would to make your component blocked instantly, once the view get displayed, just set this attribute to true.  Following sample below show you the impact of set this attribute to true.


Primefaces BlockUI Summary

Primefaces BlockUI is a Primefaces component used for blocking component or set of components. This tutorial provides you complete samples that discusses the different business scenarios in which the BlockUI are used. You can download the sample project from below link.

By admin

Leave a Reply

%d bloggers like this: