jsf valueChangeListener example

by

JSF fired value change events when user make changes in input components like h:inputText or h:selectOneMenu etc.

A value change event can be handled by following ways:

1. Method Binding.
2. ValueChangeListener Interface.

Method Binding:

Use the managed bean method directly into valueChangeListener attribute of the corresponding JSF component.

Bean class:

@ManagedBean(name="testBean")
@SessionScoped
public class TestBean{ 
	public void valueChangeMethod(ValueChangeEvent e){
		//method body
	} 
}

JSF component:

<h:selectOneMenu value="#{testBean.property}" onchange="submit()"
	valueChangeListener="#{testBean.valueChangeMethod}">
   	<f:selectItems value="#{testBean.testValues}" />
</h:selectOneMenu>

ValueChangeListener Interface:

Creates a class which implements ValueChangeListener interface and override the processValueChange() method. Pass it into f:valueChangeListener tag of the corresponding JSF component.

Java class:

public class ValueListenerTestClass implements ValueChangeListener{ 
	@Override
	public void processValueChange(ValueChangeEvent event)
			throws AbortProcessingException { 
		//method body 
	}
}

JSF component:

<h:selectOneMenu value="#{testBean.property}" onchange="submit()">
    <f:valueChangeListener type=" ValueListenerTestClass" />
   	<f:selectItems value="#{testBean.testValues}" />
</h:selectOneMenu>

Note: We have to use onchange=”submit()” in the corresponding JSF component otherwise no event will be fired.

Example:

test.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html 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>JSF value change listener example.</title>
	</h:head>
    <h:body>
    	<h2>JSF value change listener example.</h2>
 
	<h:form> 
        Select Subject ID (method binding): 
        <h:selectOneMenu value="#{test.selectedSubject}"
			onchange="submit()" 
			valueChangeListener="#{test.subjectChanged}">
			<f:selectItems value="#{test.subjectMap}" />
		</h:selectOneMenu>
		<br/>
         Select Subject ID (f:valueChangeListener):
        <h:selectOneMenu value="#{test.selectedSubject}"
			onchange="submit()">
			<f:valueChangeListener type=
			 "com.w3schools.business.ListenerTest" />
			<f:selectItems value="#{test.subjectMap}" />
		</h:selectOneMenu>
		<br/>
		Selected Subject: 
    	<h:outputText id="test" value="#{test.selectedSubject}" />
	</h:form>
 
</h:body>
 
</html>

Test.java

import java.util.LinkedHashMap;
import java.util.Map;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ValueChangeEvent;
 
/**
 * Managed bean.
 * @author w3schools
 */
@ManagedBean(name = "test")
@SessionScoped
public class Test {
	private static Map<String, String> subjectMap;
 
	private String selectedSubject = "Java";
 
	static {
		subjectMap = new LinkedHashMap<String, String>();
		subjectMap.put("Subject 1", "Java");
		subjectMap.put("Subject 2", "Data Structure");
		subjectMap.put("Subject 3", "SQL");
	}
 
	public void subjectChanged(ValueChangeEvent e) {
		selectedSubject = e.getNewValue().toString();
	}
 
	public Map<String, String> getSubjectMap() {
		return subjectMap;
	}
 
	public String getSelectedSubject() {
		return selectedSubject;
	}
 
	public void setSelectedSubject(String selectedSubject) {
		this.selectedSubject = selectedSubject;
	}
 
}

ListenerTest.java

import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ValueChangeEvent;
import javax.faces.event.ValueChangeListener;
 
public class ListenerTest implements ValueChangeListener{
 
	@Override
	public void processValueChange(ValueChangeEvent event)
			throws AbortProcessingException {
		Test test = (Test) FacesContext.getCurrentInstance().
        getExternalContext().getSessionMap().get("test");
 
		test.setSelectedSubject(event.getNewValue().toString());
	}
}

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
         javax.faces.webapp.FacesServlet
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample38/faces/test.xhtml

Output:

JSF example38-1
 
Change Subject and Click Submit button.
JSF example38-2
 
Download this example.