JSF valueChangeListener Tag

This tag is used to add a value change listener to the component associated with the enclosing tag. Value change event is fired when the user changes the input value. This event can be fired with any component which takes user input (select or input components). The class which is registered with the component implements ValueChangeListener interface and implements the method processValueChange(). We write our logic of action in this method. One thing that we have to take care is that we have to use onChange event of java script which submits the form when input is changed. If we will not do this then we will have to submit the form manually. This illustration will explain you how to go ahead.

Code Description :

<%@ page contentType="text/html" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<f:view>
<html>
<body>
<h:form>
<h:selectOneMenu id="som" value="#{MyBean.som}" title="select any one in this menu" onchange="submit()">
<f:selectItem id="si1" itemLabel="Thums Up" itemValue="11" />
<f:selectItem id="si2" itemLabel="Limca" itemValue="22" />
<f:selectItem id="si3" itemLabel="Pepsi" itemValue="33" />
<f:selectItem id="si4" itemLabel="Sprite" itemValue="44" />
<f:selectItem id="si5" itemLabel="Frooti" itemValue="55" />
<f:selectItem id="si6" itemLabel="Coca-Cola" itemValue="66" />
<f:valueChangeListener type="roseindia.MyBean" />
</h:selectOneMenu>
</h:form>
</body>
</html>
</f:view>

MyBean.java :

package roseindia;

import java.util.*;
import javax.swing.*;
import javax.faces.event.*;

public class MyBean implements ActionListener,ValueChangeListener{
String som = "";
private Date today = new Date();
public void processAction(ActionEvent e){
JOptionPane.showMessageDialog(null,"Hi");
}

public void processValueChange(ValueChangeEvent ce){
JOptionPane.showMessageDialog(null, ce.getSource());
}

public String getSom(){
return som;
}

public void setSom(String som){
this.som = som;
}

public Date getToday(){
return today;
}

public void setToday(Date today) {
this.today = today;
}
}

Rendered Output : This is the first page that appears to the user.

When the user changes the current value in the menu then the value change listener is activated and gives its output according to the method processValueChange(). Here, in this example, a message dialog is open and message is shown.

Html Source Code :

<html>
<body>
<form id="_id0" method="post" action="/f-tags/pages/valueChangeListener/valueChangeListener.jsf" enctype="application/x-www-form-urlencoded">
<select id="_id0:som" name="_id0:som" size="1" onchange="submit()" title="select any one in this menu">
<option value="11">Thums Up</option>
<option value="22">Limca</option>
<option value="33">Pepsi</option>
<option value="44">Sprite</option>
<option value="55">Frooti</option>
<option value="66">Coca-Cola</option>
</select>
<input type="hidden" name="_id0" value="_id0" /></form>
</body>
</html>

This tag contains one attribute :

type : This attribute is used to specify the fully qualified name of the class which has implemented valueChangeListener interface and implemented processValueChange() method.

JSF valueChangeListener Tag

JSF valueChangeListener Tag

JSF valueChangeListener Tag

Tutorials