JSF 2 ValueChangeListener Attribute and Class Example

By Arvind Rai, January 20, 2015

In this page, we will learn ValueChangeListener attribute and class Example in JSF 2. ValueChangeListener can be registered with component to listen the value change in input field or selection box. When using as an attribute, we need to use managed bean method and when using as a class, we need to create a class and use tag f:valueChangeListener inside input field tag.

ValueChangeListener as an Attribute

To use ValueChangeListener as an attribute we have to create a method in managed bean whose argument will be ValueChangeEvent. Use valueChangeListener attribute in input field or selection box.

Method in Managed Bean with ValueChangeEvent Argument

Create a method which be called on value chaged.

public void selectionChanged(ValueChangeEvent e){
	studentName = e.getNewValue().toString();
}

Here in the method we will assign new value to the variable.

UI with valueChangeListener Attribute

For a selection box, valueChangeListener attribute will be used as below. Assign the managed bean method name to the valueChangeListener.

<h:selectOneMenu value="#{studentBean.studentName}" onchange="submit()"
   valueChangeListener="#{studentBean.selectionChanged}">
   <f:selectItems value="#{studentBean.students}" />
</h:selectOneMenu>

ValueChangeListener as a Class

To use ValueChangeListener as a class we need to create a class which will implement ValueChangeListener interface. Then use <f:valueChangeListener/> tag.

Create a Listener Class Implementing ValueChangeListener

We need to create a listener class which will implement ValueChangeListener. Override the method as below

public void processValueChange(ValueChangeEvent event)
			throws AbortProcessingException {
		StudentBean studentBean = (StudentBean)FacesContext.getCurrentInstance().
				getExternalContext().getRequestMap().get("studentBean");
		studentBean.setStudentName(event.getNewValue().toString());
}

Fetch the managed bean from the scope in which managed bean is set. Change the value using ValueChangeEvent.

UI with f:valueChangeListener Tag

To use ValueChangeListener class in UI, use tag as below

<h:selectOneMenu value="#{studentBean.studentName}" onchange="submit()">
   <f:valueChangeListener type="com.concretepage.StudentSelectionChangeListener" />
   <f:selectItems value="#{studentBean.students}" />
</h:selectOneMenu>

Complete Example for ValueChangeListener

Now find the complete example of ValueChangeListener attribute and class. In the example we have a selection box for selecting student. The selected student will be displayed.

Project Structure in Eclipse

Find the project structure in eclipse.

JSF 2 ValueChangeListener Attribute and Class Example

Managed Bean

Find the managed bean used in the example.
StudentBean.java

package com.concretepage;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.ValueChangeEvent;
@ManagedBean(name = "studentBean", eager = true)
@RequestScoped
public class StudentBean {
	private String studentName ="Ram";
	private Map<String, String> studentMap = new LinkedHashMap<String, String>();
	{
		studentMap.put("student-1", "Ram");
		studentMap.put("student-2", "Shyam");
		studentMap.put("student-3", "Mohan");
	}
	public Map<String, String> getStudents(){
		return studentMap;
	}
	public void selectionChanged(ValueChangeEvent e){
		studentName = e.getNewValue().toString();
	}
	public String getStudentName() {
		return studentName;
	}
	public void setStudentName(String studentName) {
		this.studentName = studentName;
	}
}

Implementation of ValueChangeListener Interface

Find the class which is implementing the ValueChangeListener interface.
StudentSelectionChangeListener.java

package com.concretepage;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ValueChangeEvent;
import javax.faces.event.ValueChangeListener;
public class StudentSelectionChangeListener implements ValueChangeListener {
	@Override
	public void processValueChange(ValueChangeEvent event)
			throws AbortProcessingException {
		StudentBean studentBean = (StudentBean)FacesContext.getCurrentInstance().
				getExternalContext().getRequestMap().get("studentBean");
		studentBean.setStudentName(event.getNewValue().toString());
	}
}

XHTML for UI

Find the UI for valueChangeListener attribute.
eventwithmethod.xhtml

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>ValueChangeEvent with Method in JSF 2</title>
    </h:head>
    <h:body>
       <h3>ValueChangeEvent with Method in JSF 2</h3>
		<h:form id="studentForm">
			<h:outputLabel value="Selected Student Name:" />
			<h:outputLabel value="#{studentBean.studentName}" /><br/><br/>
			<h:outputLabel value="Select Student:" />
			<h:selectOneMenu value="#{studentBean.studentName}" onchange="submit()"
			   valueChangeListener="#{studentBean.selectionChanged}">
		       <f:selectItems value="#{studentBean.students}" />
		   </h:selectOneMenu>
		</h:form>
    </h:body>
</html>

Find the UI for ValueChangeListener class.
eventwithclass.xhtml

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>ValueChangeEvent with Class in JSF 2</title>
    </h:head>
    <h:body>
       <h3>ValueChangeEvent with Class in JSF 2</h3>
		<h:form id="studentForm">
			<h:outputLabel value="Selected Student Name:" />
			<h:outputLabel value="#{studentBean.studentName}" /><br/><br/>
			<h:outputLabel value="Select Student:" />
			<h:selectOneMenu value="#{studentBean.studentName}" onchange="submit()">
			   <f:valueChangeListener type="com.concretepage.StudentSelectionChangeListener" />
		       <f:selectItems value="#{studentBean.students}" />
		   </h:selectOneMenu>
		</h:form>
    </h:body>

web.xml

Find the web.xml being used in the example.
web.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version="3.0">
	<display-name>ValueChangeEvent in JSF 2</display-name>
    <servlet>
      <servlet-name>FacesServlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
      <servlet-name>FacesServlet</servlet-name>
      <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
      <servlet-name>FacesServlet</servlet-name>
      <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
</web-app>

Gradle file

Find the gradle to resolve the JSF jar dependency.

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'war'
archivesBaseName = 'JSF2Demo'
version = '1' 
repositories {
    mavenCentral()
}
dependencies {
    compile 'com.sun.faces:jsf-api:2.2.9'
    compile 'com.sun.faces:jsf-impl:2.2.9'
    compile 'jstl:jstl:1.2'
}

Output

Now find the output. Access URL for valueChangeListener attribute demo as http://localhost:8080/JSF2Demo-1/eventwithmethod.xhtml and change the value in selection box.