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.
- By clicking on the Block link, the block component will do its blocking behavior.
- By clicking the UnBlock link, the interactive jsf blocked area will be unblocked.
PrimeFaces BlockUI Example