Post 1 :JSF: valueChangeListener Attribute

JSF 2.2 valueChangeListener Attribute Example

Usually Components in Web application are dependent on each other. To keep dependent component in sync, it is possible to change the dependent component on change of independent component.
Example: Say we have input form where we have two inputs Select Country select menu and State text box. Now if selected country is say USA, State label is ok but if country is JAPAN we should change label to Prefecture (Prefecture corresponds to State in Japan). So to perform such kind of changes we can use valueChangeListener.
valueChangeListener can be implemented in two ways

valueChangeListener attribute (this example explains this way)
<f:valueChangeListener> tag

Note! valueChangeListener attribute and <f:valueChangeListener> tag has following subtle differences

valueChangeListener attribute can be bound to managed bean method, while <f:valueChangeListener> tag can be bound to class that implements ValueChangeListener interface
valueChangeListener attribute allows to attach only single managed bean method to component, while <f:valueChangeListener> tags can be used to attach multiple listeners to component

Code Snippet of valueChangeListener

To implement valueChangeListener, in xhtml file

add valueChangeListener=”#{bean.method}” attribute to input HTML element
add onchange=”submit()” attribute to input HTML element. This invokes javascript submit function, when selected menu item is changed.

<h:selectOneMenu id="countryList"

value="#{indexBean.selectedCountry}"

onchange="submit()"

valueChangeListener="#{indexBean.onCountrySelect}">

<f:selectItems value="#{indexBean.countries}" />

</h:selectOneMenu>

In managed bean, method bound to valueChangeListener needs to be implements. This method takes ValueChangeEvent as argument.

public void onCountrySelect(ValueChangeEvent event) {

String oldValue = (String) event.getOldValue(); // obtain previous selected value

String newValue = (String) event.getNewValue(); // obtain current selected value

}

JSF 2.2 valueChangeListener attribute Example

In this example, form containing Select Country select menu and State text box is displayed. The label for State text box is changed based on Country selected. i.e. State is displayed for USA and Prefecture is displayed for Japan.

JSF 2.2 JAR Dependency

javax.faces-2.2.4.jar
jsf-api-2.2.4.jar

Development Environment

JDK 1.7.0_07
Tomcat v7.0
JSF 2.2
Eclipse 4.2

index.xhtml

Displays input form with Select Country select one menu and State input text box. Based on country selected, state label is changed by use of valueChangeListener

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!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 2.2 | valueChangeListener attribute Example</title>

</h:head>

<h:body>

<h3>JSF 2.2 | valueChangeListener attribute Example</h3>

<h:form id="indexForm">

Select Country

<h:selectOneMenu id="countryList"

value="#{indexBean.selectedCountry}"

onchange="submit()"

valueChangeListener="#{indexBean.onCountrySelect}">

<f:selectItems value="#{indexBean.countries}" />

</h:selectOneMenu><br/>

<h:outputText value="#{indexBean.stateLabel}"/>

<h:inputText id="state" value="#{indexBean.state}"/>

</h:form>

</h:body>

</html>

IndexBean.java

Managed Bean class with onCountrySelect() method that is bound to valueChangeListener. onCountrySelect() sets the state label based on selected state.

package in.co.javatutorials;

import java.io.Serializable;

import java.util.ArrayList;

import java.util.List;

import javax.annotation.PostConstruct;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.ViewScoped;

import javax.faces.event.ValueChangeEvent;

@ManagedBean(name = "indexBean")

@ViewScoped

public class IndexBean implements Serializable {

private static final long serialVersionUID = 9040359120893077422L;

private List<String> countries = new ArrayList<String>();

private String selectedCountry;

private String stateLabel;

private String state;

/**

* Executed when index.xhtml is accessed

@PostConstruct

public void initialize() {

System.out.println("---- initialize ----");

countries.add("USA");

countries.add("JAPAN");

stateLabel = "State";

}

/**

* Method bound to valueChangeListener attribute Executed when value of

* countrySelected changes

public void onCountrySelect(ValueChangeEvent event) {

System.out.println("----- onCountrySelect method -----");

String oldValue = (String) event.getOldValue(); // obtain previous selected value

String newValue = (String) event.getNewValue(); // obtain current selected value

System.out.println("***** oldValue: " + oldValue);

System.out.println("***** newValue: " + newValue);

if ("JAPAN".equals(newValue)) {

stateLabel="Prefecture";

} else {

stateLabel = "State";

}

public List<String> getCountries() {

return countries;

}

public String getSelectedCountry() {

return selectedCountry;

}

public void setSelectedCountry(String selectedCountry) {

this.selectedCountry = selectedCountry;

}

public String getStateLabel() {

return stateLabel;

}

public void setStateLabel(String stateLabel) {

this.stateLabel = stateLabel;

}

public String getState() {

return state;

}

public void setState(String state) {

this.state = state;

}

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"

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>ValueChangeListenerExample</display-name>

<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>*.xhtml</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.xhtml</welcome-file>

</welcome-file-list>

</web-app>

Project Layout valueChangeListener attribute example project layout

Example Output

Input Page

As you can in following Output Page, when Japan is selected as country, valueChangeListener method is invoked, which sets State label to Prefecture and hence Prefecture is displayed

Output Page

Logoutput is as follows

---- initialize ----

----- onCountrySelect method -----

***** oldValue: null

***** newValue: JAPAN

Revan Tech Blog

Search This Blog

Post 1 :JSF: valueChangeListener Attribute

JSF 2.2 valueChangeListener Attribute Example

Code Snippet of valueChangeListener

JSF 2.2 valueChangeListener attribute Example

JSF 2.2 JAR Dependency

Development Environment

index.xhtml

IndexBean.java

web.xml

Example Output

Comments

Post a Comment

Popular posts from this blog

TIME TABLE: VTU BE/B.Tech June/July 2016 Exam Time table Draft Layout

Walkins Bangalore: 01st-Oct-2016

How to get VTU Provisional Degree Certificate (PDC) ?