Share on WhatsAppShare on RedditShare on LinkedIn

Primefaces BlockUI Component Example Tutorial

1 Comments
Filed Under: PrimeFaces

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

Primefaces BlockUI

TagBlockUI
Component Classorg.primefaces.component.blockui.BlockUI
Component Typeorg.primefaces.component.BlockUI
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.BlockUIRenderer
Renderer Classorg.primefaces.component.blockui.BlockUIRenderer

Primefaces BlockUI Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
widgetVarnullStringName of the client side widget.
triggernullStringIdentifier of the component(s) to bind.
blocknullStringIdentifier of the component to block.
blockedfalseBooleanBlocks the UI by default when enabled.
renderedtrueBooleanBoolean 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.


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<title>BlocuUI</title>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<div style="width: 30%">
		<p:panel id="messagePanel">
			<h:outputText value="JouranlDev Message Blocked !!"></h:outputText>
		</p:panel>
		#{' '}
		<p:commandButton id="action" value="Block Message"
			action="#{blockUIManagedBean.someAction}"></p:commandButton>
		<p:blockUI trigger="action" block="messagePanel"></p:blockUI>
	</div>
</h:form>
</html>


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class BlockUIManagedBean {
	public String someAction() throws InterruptedException{
		Thread.currentThread().sleep(4000);
		return "";
	}
}

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:

Primefaces BlockUI - Before Source Activation

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

Primefaces BlockUI - Before Source Activation - Message Selectable

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

Primefaces BlockUI - After Source Activation

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.


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<title>BlocuUI</title>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<div style="width: 30%">
		<p:panel id="messagePanel">
			<h:outputText value="JouranlDev Message Blocked !!"></h:outputText>
			<p:commandButton id="action2" value="Panel Block Message Action"
				action="#{blockUIManagedBean.someAction}"></p:commandButton>
		</p:panel>
		#{' '}
		<p:commandButton id="action1" value="Block Message Action"
			action="#{blockUIManagedBean.someAction}"></p:commandButton>
		<p:blockUI trigger="action1 action2" block="messagePanel"></p:blockUI>
	</div>
</h:form>
</html>


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class BlockUIManagedBean {
	public String someAction() throws InterruptedException{
		Thread.currentThread().sleep(4000);
		return "";
	}
}

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:

Primefaces BlockUI - Before Source Activation - Actions And Message Are Enabled

Primefaces BlockUI - After Source Activation - Action Outside Panel Is Enabled

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.


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<title>BlocuUI</title>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<div style="width: 30%">
		<p:panel id="messagePanel">
			<h:outputText value="JouranlDev Message Blocked !!"></h:outputText>
		</p:panel>
		#{' '}
		<p:commandButton id="action" value="Block Message"
			action="#{blockUIManagedBean.someAction}"></p:commandButton>
		<p:blockUI trigger="action" block="messagePanel">
			<p:graphicImage value="#{resource['images/ajax-loader.gif']}"></p:graphicImage>
		</p:blockUI>
	</div>
</h:form>
</html>


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class BlockUIManagedBean {
	public String someAction() throws InterruptedException{
		Thread.currentThread().sleep(4000);
		return "";
	}
}

And the result of execution is like below:

Primefaces BlockUI - Before Source Activation - Everything Is Visible

Primefaces BlockUI - After Source Activation - Panel Component Is Invisible

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.

Primefaces 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.


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<title>BlocuUI</title>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function show(){
			PF('blockUI').show();
		}

		function hide(){
			PF('blockUI').hide();
		}
	</script>
</h:head>
<h:form>
	<div style="width: 30%">
		<p:panel id="messagePanel">
			<h:outputText value="JouranlDev Message Blocked !!"></h:outputText>
		</p:panel>
		#{' '}
		<p:blockUI widgetVar="blockUI" block="messagePanel">
			<p:graphicImage value="#{resource['images/ajax-loader.gif']}"></p:graphicImage>
		</p:blockUI>
		<br/>
		<input type="button" onclick="show();" value="Show BlockUI"/>
		<input type="button" onclick="hide();" value="Hide BlockUI"/>
	</div>
</h:form>
</html>


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class BlockUIManagedBean {
	public String someAction() throws InterruptedException{
		Thread.currentThread().sleep(4000);
		return "";
	}
}

The result of executing the above code it will be:

Primefaces BlockUI - Normal View

Primefaces BlockUI - Blocking Panel
The panel component will get blocked once the Show BlockUI HTML input has activated where the Hide BlockUI will 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.


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<title>BlocuUI</title>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<div style="width: 30%">
		<p:panel id="messagePanel">
			<h:outputText value="JouranlDev Message Blocked By Default !!"></h:outputText>
		</p:panel>
		#{' '}
		<p:blockUI blocked="true" block="messagePanel"></p:blockUI>
	</div>
</h:form>
</html>


package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class BlockUIManagedBean {
	public String someAction() throws InterruptedException{
		Thread.currentThread().sleep(4000);
		return "";
	}
}

Primefaces BlockUI - Blocking Panel By Default

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.

Download PrimeFaces BlockUI Project
Share on WhatsAppShare on RedditShare on LinkedIn

Comments

  1. Jatin says:
    August 7, 2018 at 6:24 am

    Great explanation with very good examples. Thankyou it helped me .

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content