• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

PrimeFaces BlockUI + Client Side API Example

April 15, 2014 //  by Amr Mohammed//  Leave a Comment

BlockUI Primefaces component provides you the ability control the component from a pre defined Client Side API that could be invoked through using of JavaScript code. For enabling the call of client side API, you have to define the WidgetVar for the BlockUI component.

1. The View

index.xhtml

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

			function unBlock(){
				blockVar.hide();
			}
		</script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BlockUI + Client Side API</h2>
			<p:panel id="block" columns="1" header="Login Panel" style="width:272px;">
				<h:outputText  value="Enter Username:"/>
				<p:inputText value="#{blockUI.username}"></p:inputText>
				<h:outputText  value="Enter Password:"/>
				<p:inputText value="#{blockUI.password}"></p:inputText>
				<f:facet name="footer">
					<p:commandButton id="trigger"
						value="Login" action="#{blockUI.login}"></p:commandButton>
				</f:facet>
			</p:panel>
			<p:blockUI widgetVar="blockVar" trigger="trigger" block="block">
				<p:graphicImage value="#{resource['images:ajax-loader.gif']}"></p:graphicImage>
			</p:blockUI>
			<h:panelGrid columns="2">
				<f:facet name="header">
					<h:outputText value="JavaScript Client Side API"/>
				</f:facet>
				<h:outputText value="Block: "/>
				<h:commandLink value="Block" onclick="block();return false;"/>
				<h:outputText value="UnBlock: "/>
				<h:commandLink value="UnBlock" onclick="unBlock();return false;"/>
			</h:panelGrid>
		</h:form>
	</f:view>
</html>

2. Managed Bean

BlockUI.java

package net.javabeat.primefaces;

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

@ManagedBean
@SessionScoped
public class BlockUI {
	private String username;
	private String password;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String login() throws Exception{
		// Assumed business could too long
		Thread.sleep(5000);
		return "";
	}
}

3. Primefaces BlockUI + Client Side API Demo

The below snapshots show you the different API that could be invoked for achieving the different behaviors of BlockUI functions.

Primefaces BlockUI Example 1

  • By clicking on the Block link, the block component will do its blocking behavior.

Primefaces BlockUI Example 2

  • By clicking the UnBlock link, the interactive jsf blocked area will be unblocked.
[wpdm_file id=69]

Category: JSFTag: PrimeFaces

About Amr Mohammed

Previous Post: « PrimeFaces BlockUI Example
Next Post: How To Check Plug-In Support In Browser using JavaScript »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact