Primefaces Utilities, RequestContext, EL Functions, Dialog Framework & Search Expression Framework

Filed Under: PrimeFaces

Primefaces is a leading JSF library, it provides vast amount of components and facilitates so many kind of utilities and frameworks. This tutorial will highlight the most beneficial utilities and frameworks as well as explain how can we make use all of them more effective in development process.

Primefaces RequestContext

RequestContext is a simple utility that can be obtained similarly like FacesContext and can be used for:

  • Adding parameters to ajax callback functions.
  • Help make Runtime update.
  • Execute JavaScript.

Let’s first look at the RequestContext API before getting started exploring it.

Method Description
isAjaxRequest() Returns a boolean value if current request is a PrimeFaces ajax request.
addCallBackParam(String name, Object value) Adds parameters to ajax callbacks like oncomplete.
update(String clientId); Specifies component(s) to update at runtime.
execute(String script) Executes script after ajax request completes or on page load.
scrollTo(String clientId) Scrolls to the component with given clientId after ajax request completes.

Primefaces RequestContext – Callback Parameters

Sometimes you’ve faced cases where you need some values from backing beans in ajax callbacks. Callback parameters are serialized to JSON and provided as an argument in ajax callback for such that access.

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 handleComplete(xhr,status,args){
				var isValid = args.isValid;
				alert("isValid RequestContext Parameter Passed Is :: "+isValid);
			}
		</script>
	</h:head>
	<h:form>
		<p:commandButton value="Validate" action="#{utilitiesManagedBean.validate}"
			oncomplete="handleComplete(xhr,status,args)"></p:commandButton>
	</h:form>
	</html>

UtilitiesManagedBean.java


package com.journaldev.prime.faces.beans;

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

import org.primefaces.context.RequestContext;

@ManagedBean
@SessionScoped
public class UtilitiesManagedBean {
	public String validate(){
		// Acquire Request Context instance
		RequestContext context = RequestContext.getCurrentInstance();
		// Add isValid parameter
		context.addCallbackParam("isValid", true);
		return "";
	}
}

Primefaces Utilities - Send Parameter

You can send so many parameters as you want, each of yours would be serialized into JSON format. As such, you have the opportunity to send an instance of any type you wish like Person and access its fields like args.person.firstname and so on.

By default validationFailed callback parameter is added implicitly if validation cycle fails.

Primefaces RequestContext – Runtime Updates

By using RequestContext instance you have the ability to update page’s components conditionally. You can’t update your components in a conditional manner using of command’s update attribute. By using RequestContext’s update method you’re now gladly can do that.

index2.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>
</h:head>
<h:form id="form" prependId="false">
	<p:growl id="acceptedMessage"></p:growl>
	<p:growl id="refusedMessage"></p:growl>
	<p:commandButton value="Validate"
		action="#{utilitiesManagedBean.validate}"></p:commandButton>
</h:form>
</html>

UtilitiesManagedBean.java



package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.context.RequestContext;

@ManagedBean
@SessionScoped
public class UtilitiesManagedBean {
	public String validate(){
		// Initial value for valid boolean
		boolean valid = false;
		// Do some computation
		if(Math.floor(Math.random()*10) % 2 == 0){
			valid = true;
		}
		// Acquire Request Context instance
		RequestContext context = RequestContext.getCurrentInstance();
		// Add isValid parameter
		context.addCallbackParam("isValid", valid);
		// If valid equal true, render accepted message
		if(valid){
			// Add message into your FacesContext
			FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your request is accepeted ! Congrats"));
			// Acquire RequestContext singleton and update desired components
			RequestContext.getCurrentInstance().update("acceptedMessage");
		}
		// else If valid equal false, render refused message
		if(!valid){
			// Add message into your FacesContext
			FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your request is refused ! Sorry"));
			// Acquire RequestContext singleton and update desired components
			RequestContext.getCurrentInstance().update("refusedMessage");
		}
		return "";
	}
}

Primefaces Utilities - Update Components Conditionally - II

Primefaces Utilities - Update Components Conditionally - I

Primefaces RequestContext – Execute JavaScript

RequestContext is also provides you a way to execute a JavaScript when the ajax request completes. It’s easier compared to passing callback parameters and execute conditional JavaScript.

index3.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>
</h:head>
<h:form prependId="false">
	<p:commandButton value="Execute JavaScript"
		action="#{utilitiesManagedBean.executeJavaScript}"></p:commandButton>
	<p:dialog widgetVar="acceptedDialog">
		<p:outputLabel value="Accepted"></p:outputLabel>
	</p:dialog>
	<p:dialog widgetVar="refusedDialog">
		<p:outputLabel value="Refused"></p:outputLabel>
	</p:dialog>
</h:form>
</html>

UtilitiesManagedBean.java



package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.context.RequestContext;

@ManagedBean
@SessionScoped
public class UtilitiesManagedBean {
	public String validate(){
		// Initial value for valid boolean
		boolean valid = false;
		// Do some computation
		if(Math.floor(Math.random()*10) % 2 == 0){
			valid = true;
		}
		// Acquire Request Context instance
		RequestContext context = RequestContext.getCurrentInstance();
		// Add isValid parameter
		context.addCallbackParam("isValid", valid);
		// If valid equal true, render accepted message
		if(valid){
			// Add message into your FacesContext
			FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your request is accepeted ! Congrats"));
			// Acquire RequestContext singleton and update desired components
			RequestContext.getCurrentInstance().update("acceptedMessage");
		}
		// else If valid equal false, render refused message
		if(!valid){
			// Add message into your FacesContext
			FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your request is refused ! Sorry"));
			// Acquire RequestContext singleton and update desired components
			RequestContext.getCurrentInstance().update("refusedMessage");
		}
		return "";
	}

	public String executeJavaScript(){
		// Initial value for valid boolean
		boolean valid = false;
		// Do some computation
		if(Math.floor(Math.random()*10) % 2 == 0){
			valid = true;
		}
		// Hide all of dialogs
		RequestContext.getCurrentInstance().execute("PF('acceptedDialog').hide()");
		RequestContext.getCurrentInstance().execute("PF('refusedDialog').hide()");
		// If valid equal true, render accepted message
		if(valid){
			// Acquire RequestContext singleton and execute wanted JavaScript
			RequestContext.getCurrentInstance().execute("PF('acceptedDialog').show()");
		}
		// else If valid equal false, render refused message
		if(!valid){
			// Acquire RequestContext singleton and execute wanted JavaScript
			RequestContext.getCurrentInstance().execute("PF('refusedDialog').show()");
		}
		return "";
	}
}

Primefaces Utilities - Execute JavaScript Conditionally - II

Primefaces Utilities - Execute JavaScript Conditionally - I

Primefaces EL Functions

Primefaces provides a built-in EL expressions that are very helpful in so many cases. Before getting started using EL functions, let’s see the EL functions’ API.

Function Description
component(‘id’) Returns clientId of the component with provided server id parameter. This function is useful if you need to work with javascript.
widgetVar(‘id’) Provides the widgetVar of a component in PF(”) format.

Primefaces EL Functions – Component & WidgetVar

Primefaces provides you so easy way for locating components either by using their identifiers or their WidgetVars.

index4.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>
</h:head>
<h:form id="form">
	<p:outputLabel id="text" value="This component accessed by EL function and it's ID is: #{p:component('text')}"></p:outputLabel>
	<p:dialog id="dlg">
		<p:outputLabel value="Dialog Component"></p:outputLabel>
	</p:dialog>
	<p:separator/>
	<p:commandButton id="action2" value="Show Dialog" type="button" onclick="#{p:widgetVar('form:dlg')}.show()"></p:commandButton>
</h:form>
</html>

Primefaces Utilities - EL Function - Get Components Using EL Functions Component and WidgetVar

Primefaces Exception Handler

We’ve clarified Exception Handler intensively in Ajax Behavior Tutorial.

Primefaces Locales

We’ve clarified Primefaces Locales intensively in Calendar Component Tutorial.

Primefaces Dialog Framework

Dialog framework (DF) is used to open an external XHTML page in a dialog that’s generated dynamically at Runtime. This is little bit different from old fashion we are used to show a dialog. Old way requires defining a p:dialog inside an XHTML page and make use of show/hide for getting dialog controlled (Shown/hidden). This time we will use a DF API that in which a programmatic API will be used for creating and destroying the dialogs instantly and at Runtime. Following simple example that shows you dialog created and destroyed programmatically.

faces-config.xml


<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	version="2.2">
	<application>
		<action-listener>org.primefaces.application.DialogActionListener</action-listener>
		<navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
		<view-handler>org.primefaces.application.DialogViewHandler</view-handler>
	</application>
</faces-config>

dialogInitiator.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>
</h:head>
<h:form id="form">
	<p:commandButton value="Show Dialog" action="#{dialogFrameworkManagedBean.showDialog}"></p:commandButton>
</h:form>
</html>

externalXHTML.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>
</h:head>
<h:form id="form">
	<p:outputLabel value="This XHTML page will be dispalyed/hidden via using of DF API"></p:outputLabel>
</h:form>
</html>

DialogFrameworkManagedBean.java


package com.journaldev.prime.faces.beans;

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

import org.primefaces.context.RequestContext;

@ManagedBean
@SessionScoped
public class DialogFrameworkManagedBean {

	public String showDialog(){
		RequestContext.getCurrentInstance().openDialog("externalXHTML");
		return "";
	}
}

DF API - Initial View DF API - Dialog Displayed

As you can provide an Optional arguments that help you make additional control for your dialog properties. Following sample shows you how can you provide such that arguments and a figured Table for the properties that may be controlled.

dialogInitiator.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>
</h:head>
<h:form id="form">
	<p:commandButton value="Show Dialog - Basic" action="#{dialogFrameworkManagedBean.showDialog}"></p:commandButton>
	<p:commandButton value="Show Dialog - Additional Properties" action="#{dialogFrameworkManagedBean.showDialogWithAdditionalArg}"></p:commandButton>
</h:form>
</html>

externalXHTML.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>
</h:head>
<h:form id="form">
	<p:outputLabel value="This XHTML page will be dispalyed/hidden via using of DF API"></p:outputLabel>
</h:form>
</html>

DialogFrameworkManagedBean.java


package com.journaldev.prime.faces.beans;

import java.util.HashMap;
import java.util.Map;

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

import org.primefaces.context.RequestContext;

@ManagedBean
@SessionScoped
public class DialogFrameworkManagedBean {

	public String showDialog(){
		RequestContext.getCurrentInstance().openDialog("externalXHTML");
		return "";
	}

	public String showDialogWithAdditionalArg(){
		// Fill in properties
		Map<String,Object> properties  = new HashMap<String,Object>();
		properties.put("modal", true);
		properties.put("resizable", true);
		properties.put("draggable", true);
		properties.put("width", 400);
		properties.put("height", 400);
		RequestContext.getCurrentInstance().openDialog("externalXHTML",properties,null);
		return "";
	}

}

DF API - Additional Properties - Initial View

DF API - Additional Properties - Dialog Displayed

Find below all of those properties that you may want to provide.

Name Default Type Description
modal 0 Boolean Controls modality of the dialog.
resizable 1 Boolean When enabled, makes dialog resizable.
draggable 1 Boolean When enabled, makes dialog draggable.
width auto Integer Width of the dialog.
height auto Integer Height of the dialog.
contentWidth 640 Integer Width of the dialog content.
contentHeight auto Integer Height of the dialog content.
closable true Boolean Whether the dialog can be closed or not.

Primefaces Dialog Framework – Data Communication

You can pass data back into the parent page that triggered the dialog to be displayed.

dataInitiator.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>
</h:head>
<h:form id="form">
	<p:growl id="growl" showDetail="true" showSummary="true"></p:growl>
	<p:commandButton value="Show Dialog - Basic" action="#{dialogFrameworkManagedBean.showDialog}"></p:commandButton>
	<p:commandButton value="Show Dialog - Additional Properties" action="#{dialogFrameworkManagedBean.showDialogWithAdditionalArg}"></p:commandButton>
	<p:commandButton value="Show Employees Dialog" action="#{dialogFrameworkManagedBean.showEmployeesDialog}">
		<p:ajax event="dialogReturn" listener="#{dialogFrameworkManagedBean.onEmployeeChosen}" update="growl" />
	</p:commandButton>
</h:form>
</html>

employee.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>
</h:head>
<h:form id="form">
	<p:dataTable value="#{dialogFrameworkManagedBean.employees}" var="employee">
		<p:column headerText="Employee ID">
			<p:outputLabel value="#{employee.employeeId}"></p:outputLabel>
		</p:column>
		<p:column headerText="Employee Name">
			<p:outputLabel value="#{employee.employeeName}"></p:outputLabel>
		</p:column>
		<p:column headerText="Select Employee">
			<p:commandButton icon="ui-icon-search" action="#{dialogFrameworkManagedBean.selectEmployeeFromDialog(employee)}" />
       	</p:column>
	</p:dataTable>
</h:form>
</html>

DialogFrameworkManagedBean.java


package com.journaldev.prime.faces.beans;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;

@ManagedBean
@SessionScoped
public class DialogFrameworkManagedBean {
	private List<Employee> employees = new ArrayList<Employee>();

	public List<Employee> getEmployees() {
		return employees;
	}

	public void setEmployees(List<Employee> employees) {
		this.employees = employees;
	}

	public String showDialog(){
		RequestContext.getCurrentInstance().openDialog("externalXHTML");
		return "";
	}

	public String showDialogWithAdditionalArg(){
		// Fill in properties
		Map<String,Object> properties  = new HashMap<String,Object>();
		properties.put("modal", true);
		properties.put("resizable", true);
		properties.put("draggable", true);
		properties.put("width", 400);
		properties.put("height", 400);
		RequestContext.getCurrentInstance().openDialog("externalXHTML",properties,null);
		return "";
	}

	public String showEmployeesDialog(){
		this.employees = new ArrayList<Employee>();
		for(int i = 1 ; i < 10 ; i++){
			Employee employee = new Employee();
			employee.setEmployeeId(i);
			employee.setEmployeeName("Employee"+i);
			employee.setEmployeeAge(String.valueOf(21+i));
			this.employees.add(employee);
		}
		RequestContext.getCurrentInstance().openDialog("employees");
		return "";
	}

	public void selectEmployeeFromDialog(Employee employee) {
        RequestContext.getCurrentInstance().closeDialog(employee);
    }

	public void onEmployeeChosen(SelectEvent event){
		Employee employee = (Employee) event.getObject();
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
        		"Employee Selected",
        		"Id:" + employee.getEmployeeId()+"\n"+
        		"Name:"+employee.getEmployeeName());
        FacesContext.getCurrentInstance().addMessage(null, message);
	}

	public class Employee {
		private int employeeId;
		private String employeeName;
		private String employeeAge;
		public int getEmployeeId() {
			return employeeId;
		}
		public void setEmployeeId(int employeeId) {
			this.employeeId = employeeId;
		}
		public String getEmployeeName() {
			return employeeName;
		}
		public void setEmployeeName(String employeeName) {
			this.employeeName = employeeName;
		}
		public String getEmployeeAge() {
			return employeeAge;
		}
		public void setEmployeeAge(String employeeAge) {
			this.employeeAge = employeeAge;
		}
	}

}

DF API - Data Selected - Initial View DF API - Data Selected - List of EmployeesDF API - Data Selected - Selected Employee

Here’s detailed explanation for code listed above:

  • Parent page that contains a triggered action should provide a dialogReturn ajax event.
  • RequestContext.getCurrentInstance().closeDialog has been used with a data returned back conventionally. If you’ve tried to use it without returned data, an exception will be got.
  • Since jsf 2, dataTable component has provided a newly way for specifying selected employee. That is by sending the selected employee directly via using of selection trigger.
  • Both of p:commandButton and p:commandLink do support for dialogReturn event.

Primefaces Dialog Framework – Dialog Messages

It’s well-known how can you add a messages into your view or even a dialog using a standard FacesContext – addMessage way. Dialog framework has provided a new way of adding a messages into your opened dialog. Following sample will help you getting your messages shown using a non-traditional way.

employees.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>
</h:head>
<h:form id="form">
	<p:dataTable value="#{dialogFrameworkManagedBean.employees}" var="employee">
		<p:column headerText="Employee ID">
			<p:outputLabel value="#{employee.employeeId}"></p:outputLabel>
		</p:column>
		<p:column headerText="Employee Name">
			<p:outputLabel value="#{employee.employeeName}"></p:outputLabel>
		</p:column>
		<p:column headerText="Select Employee">
			<p:commandButton icon="ui-icon-search" action="#{dialogFrameworkManagedBean.selectEmployeeFromDialog(employee)}" />
       	</p:column>
	</p:dataTable>
	<p:commandButton value="Show Message" action="#{dialogFrameworkManagedBean.showMessage}"></p:commandButton>
</h:form>
</html>

DialogFrameworkManagedBean.java


package com.journaldev.prime.faces.beans;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;

@ManagedBean
@SessionScoped
public class DialogFrameworkManagedBean {
	private List<Employee> employees = new ArrayList<Employee>();

	public List<Employee> getEmployees() {
		return employees;
	}

	public void setEmployees(List<Employee> employees) {
		this.employees = employees;
	}

	public String showDialog(){
		RequestContext.getCurrentInstance().openDialog("externalXHTML");
		return "";
	}

	public String showDialogWithAdditionalArg(){
		// Fill in properties
		Map<String,Object> properties  = new HashMap<String,Object>();
		properties.put("modal", true);
		properties.put("resizable", true);
		properties.put("draggable", true);
		properties.put("width", 400);
		properties.put("height", 400);
		RequestContext.getCurrentInstance().openDialog("externalXHTML",properties,null);
		return "";
	}

	public String showEmployeesDialog(){
		this.employees = new ArrayList<Employee>();
		for(int i = 1 ; i < 10 ; i++){
			Employee employee = new Employee();
			employee.setEmployeeId(i);
			employee.setEmployeeName("Employee"+i);
			employee.setEmployeeAge(String.valueOf(21+i));
			this.employees.add(employee);
		}
		RequestContext.getCurrentInstance().openDialog("employees");
		return "";
	}

	public void selectEmployeeFromDialog(Employee employee) {
        RequestContext.getCurrentInstance().closeDialog(employee);
    }

	public void onEmployeeChosen(SelectEvent event){
		Employee employee = (Employee) event.getObject();
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
        		"Employee Selected",
        		"Id:" + employee.getEmployeeId()+"\n"+
        		"Name:"+employee.getEmployeeName());
        FacesContext.getCurrentInstance().addMessage(null, message);
	}

	public String showMessage(){
		RequestContext.getCurrentInstance().showMessageInDialog(new FacesMessage("Message Is Shown"));
		return "";
	}

	public class Employee {
		private int employeeId;
		private String employeeName;
		private String employeeAge;
		public int getEmployeeId() {
			return employeeId;
		}
		public void setEmployeeId(int employeeId) {
			this.employeeId = employeeId;
		}
		public String getEmployeeName() {
			return employeeName;
		}
		public void setEmployeeName(String employeeName) {
			this.employeeName = employeeName;
		}
		public String getEmployeeAge() {
			return employeeAge;
		}
		public void setEmployeeAge(String employeeAge) {
			this.employeeAge = employeeAge;
		}
	}
}

DF API - Show Message

  • Adding of new messages into your opened dialog can be done through using of RequestContext.getCurrentInstance().showMessage(“your_msg”) code.

Primefaces Search Expression Framework

We’ve introduced several tutorials that are using search expression framework. But it’s worth to take a deep look to know more about it. Core JSF component referencing is based on component identifiers only with basic keyword support. Primefaces search expression framework provides both server side and client side extensions to make it easier to reference components. Let’s see all the keywords that you can use to reference the components that might be located into your view.

Keyword Type Description
@this Standard Current component.
@all Standard Whole view.
@form Standard Closest ancestor form of current component.
@none Standard No component.
@namingcontainer PrimeFaces Closest ancestor naming container of current component.
@parent PrimeFaces Parent of the current component.
@composite PrimeFaces Closest composite component ancestor.
@child(n) PrimeFaces nth child.
@previous PrimeFaces Previous sibling.
@next PrimeFaces Next sibling.
@widgetVar(name) PrimeFaces Component with given widgetVar.

Let’s see now some of examples for how can we leverage some of these keywords for locating wanted components on a page.

SEF.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>
</h:head>
	<h:form>
		<p:growl id="message"></p:growl>
		<p:outputLabel id="output1" value="Enter Username">#{' '}</p:outputLabel><p:inputText id="username" value="#{searchExtensionFramework.username}"></p:inputText>
		<p:separator/>
		<p:outputLabel id="output2" value="Enter Password">#{' '}</p:outputLabel><p:password id="password" value="#{searchExtensionFramework.password}"></p:password>
		<p:separator/>
		<p:commandButton value="Reference Message Component"
			action="#{searchExtensionFramework.doAction}"
			process="@this" update="@form:@child(0)"></p:commandButton>
	</h:form>
</html>

SearchExtensionFramework.java


package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SearchExtensionFramework {
	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 doAction(){
		FacesContext.getCurrentInstance().addMessage(null, 
				new FacesMessage("Growl Component Updated and Referenced By Using SEF","Username: "
						+	this.username	+	" :: Password: "	+	password));
		return "";
	}
}

Search Expression Framework - Initial ViewSearch Expression Framework - Growl Component Referenced Using Composed Expression

  • We’ve referenced the form using of @form before getting growl component referenced by using of @child(0).
  • @form:@child(0) is know as composite expressions.

SEF.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>
</h:head>
	<h:form>
		<p:growl widgetVar="message"></p:growl>
		<p:outputLabel id="output1" value="Enter Username">#{' '}</p:outputLabel><p:inputText id="username" value="#{searchExtensionFramework.username}"></p:inputText>
		<p:separator/>
		<p:outputLabel id="output2" value="Enter Password">#{' '}</p:outputLabel><p:password id="password" value="#{searchExtensionFramework.password}"></p:password>
		<p:separator/>
		<p:commandButton value="Reference Message Component"
			action="#{searchExtensionFramework.doAction}"
			process="@this" update="@widgetVar(message)"></p:commandButton>
	</h:form>
</html>

You will get the same result when @widgetVar alone is used.

Primefaces Search Expression Framework – Primefaces Selectors

Primefaces integrates jQuery Selector API with JSF component referencing model so that referencing can be done using of jQuery Selector API instead of code id based JSF model.

SEF.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>
</h:head>
	<h:form>
		<p:growl></p:growl>
		<p:outputLabel id="output1" value="Enter Username">#{' '}</p:outputLabel><p:inputText id="username" value="#{searchExtensionFramework.username}"></p:inputText>
		<p:separator/>
		<p:outputLabel id="output2" value="Enter Password">#{' '}</p:outputLabel><p:password id="password" value="#{searchExtensionFramework.password}"></p:password>
		<p:separator/>
		<p:commandButton value="Reference Message Component"
			action="#{searchExtensionFramework.doAction}"
			process="@this" update="@(form:first)"></p:commandButton>
	</h:form>
</html>
  • You will get the same result when you use a JQuery expression form. Let’s assume that your inputs have a style .myStyle; by using of @(.myStyle) you would be able to specify the component(s) that have it.
  • If you’ve used @(:input) in the update or process, you’re trying to update or process all input components that you have.
  • You can combine between Primefaces and jQuery referencing techniques.

Summary

Primefaces is a leading implementation of JSF. It provides you a huge amount of accompanies utilities, frameworks and enhancements that make development tasks more easier than using otherwise implementation. This tutorial have highlighted part of these utilities and frameworks. Contribute us by commenting below and find downloaded source code.

Comments

  1. Toxa says:

    How to refactor source code with use Intellij idea and spring flow? Script dont work. Dont show dialog.

    main.xhtml

    ….

    dlg.xhtml

    UtilitiesManagedBean.java RequestContext.getCurrentInstance().execute(“PF(‘refusedDialog’).show()”);

  2. john soktr says:

    Fantastic , thanks

  3. Qi says:

    very very useful, Thank you

  4. pmb says:

    This is so useful ! So great! Thanks 🙂

  5. umesha says:

    This is good article, i help this article.

    1. Mohammad Amr says:

      Thanks umesha,

      Your feedback is highly appreciated.

      Regards,

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
Search in posts
Search in pages