In this tutorial you will learn about the JSF 2 core tag valueChangeListener.
JSF 2 f valueChangeListener
In this tutorial you will learn about the JSF 2 core tag valueChangeListener.
<f:valueChangeListener> tag is used to applied listener when a value of UIComponent is changed. Within which UIComponent this tag is nested it registers the instance of ValueChangeListener on that component.
Attributes of f:valueChangeListener
- type : This attribute is not required to use with this tag.
but it is used to register the named class which has implemented the
ValueChangeListener interface. Name of this Java class should be fully
qualified.
- binding : This attribute is not required to use with this tag, but is used to bound the expression to evaluates the javx.faces.event.ValueChangeListener implemented object.
Example :
Here I am giving a simple example which will demonstrate you about how to use the JSF 2 core tag valueChangeListener. Before creating an example I would like to clear the differences of use of <f:valueChangeListener> tag and valueChangeListener attribute. The difference is :
When you are using the <f:valueChangeListener> tag then you are pointing to a class whereas, when you are using the valueChangeListener attribute then you are pointing to the method.
However there are many differences between them here, I am focused only one of the basic difference in respective to use them. So, now let's come to our discussion and creates the example. In this example I have used the JSF 2 f:valueChangeListener tag. So to use this tag I have required to create a class which have implemented the ValueChangeListener interface and overriding its method processValueChange() and a JavaBean class which values would be changed. Then created the JSF page to use the <f:valueChangeListener> tag.
Directory Structure
FruitBean.java
package devmanuals;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="fruit")
@RequestScoped
public class FruitBean {
public int fruitPrice;
private static Map<String,Integer> fruitName;
static{
fruitName = new LinkedHashMap<String,Integer>();
fruitName.put("Select-Fruit", 0);
fruitName.put("Apple", 110);
fruitName.put("Mango", 80);
fruitName.put("Guava", 40);
fruitName.put("Grapes", 90);
fruitName.put("PineApple", 50);
}
public Map<String,Integer> getFruitName() {
return fruitName;
}
public int getFruitPrice() {
return fruitPrice;
}
public void setFruitPrice(int fruitPrice) {
this.fruitPrice = fruitPrice;
}
}
FruitPriceListener.java
package devmanuals;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ValueChangeEvent;
import javax.faces.event.ValueChangeListener;
public class FruitPriceListener implements ValueChangeListener {
@Override
public void processValueChange(ValueChangeEvent e)
throws AbortProcessingException {
FruitBean fruit = (FruitBean) FacesContext.getCurrentInstance().
getExternalContext().getRequestMap().get("fruit");
fruit.setFruitPrice((Integer) e.getNewValue());
System.out.println("Value of component has been changed");
System.out.print("Component which value is being changed :");
System.out.println(e.getComponent());
System.out.println("JSF PhaseId : "+e.getPhaseId());
}
}
fruitPrice.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" >
<head>
<title>JSF 2 f valueChangeListener example</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Price of Fruit :"/>
<h:inputText value="#{fruit.fruitPrice}" />
<h:outputText value="Select Fruit :"/>
<h:selectOneListbox value="#{fruit.fruitPrice}" onchange="submit()">
<f:valueChangeListener type="devmanuals.FruitPriceListener" />
<f:selectItems value="#{fruit.fruitName}" />
</h:selectOneListbox>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsfValueChangeListener</display-name> <welcome-file-list> <welcome-file>fruitPrice.xhtml</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> <url-pattern>*.jsf</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app>
If you want to use the valueChangeListener attribute then you would be required to create a method with a parameter ValueChangeEvent such as :
public void changedFruitPrice(ValueChangeEvent e)
{
System.out.println("Value has been changed");
}
And in the JSF page this attribute can be used as :
<h:selectOneListbox value="#{fruit.fruitPrice}" onchange="submit()"
valueChangeListener="#{fruit.changedFruitPrice}">
<f:selectItems value="#{fruit.fruitName}" />
</h:selectOneListbox>
How To Run
After downloading the source code first start your server then used the following link http://localhost:8181/jsfValueChangeListener/fruitPrice.jsf in the address bar of your web browser.
Output :
When you will execute the above example you will get the output as follows :
1. The main page will be look like as follows :
2. When you will select any of the other element such as Apple of the list box then the output will be as follows :
[ 0 ] Comments