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.
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="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>
<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 "";
}
}
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="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>
<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 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="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>
<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 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.
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="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>
<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 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="https://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://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="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>
<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="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>
<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 "";
}
}
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="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>
<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="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>
<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 "";
}
}
Find below all of those properties that you may want to provide.
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="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>
<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="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>
<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;
}
}
}
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="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>
<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;
}
}
}
- 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.
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="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>
<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 "";
}
}
- 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="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>
<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="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>
<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.