| ☰ See All Chapters |
JSF Value Change Event Listener
Value change event get fired when user change any input value.
Value change event is applicable for all the inputs whose value can be changed. Example: Text Field, Drop Downs, Radio Buttons.
If you want to create a ValueChangeEvent on client side you have to use UI components with valueChangeListener attribute.
<h:selectOneMenu onchange="submit()" valueChangeListener="#{helloBean.changeLanguage}">
<f:selectItems value="#{helloBean.stateDisplay}" />
</h:selectOneMenu>
valueChangeListener attribute should be bound with the method that takes a ValueChangeEvent parameter, with a return type of void, or to a public method that takes no arguments with a return type of void. In the latter case, the method has no way of easily knowing what the new value is, but this can be useful in cases where a notification is needed that "this value changed".
In a list of available languages, when user selects his laguage, every thing in the page remains same, but only the text content translates to selected language. When user selects his language, it fires an event, and this event is handled by the application code in the server side.
If user is asked to select his country from a drop down menu, and assume if user selects his country as India, then list of states present in India will be given in onother drop down menu automatically. Which means when user selects his coutry in drop down menu, then list of states present in that country will be atomatically given in another drop down menu. Rest of the things remain same in web page. When user selects his country it fires an event, and this event is handled by the application code in the server side.
JSF Value Change Event Listener Example
pom.xml
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.java4coding</groupId> <artifactId>JSF_ValueChangeEventListener</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <dependencies> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.2.6</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.2.6</version> </dependency> </dependencies> <build> <finalName>JSF_ValueChangeEventListener</finalName> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>2.3.1</version> <configuration> <source>1.9</source> <target>1.9</target> </configuration> </plugin> </plugins> </build> </project> |
web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "https://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app> <display-name>Archetype Created Web Application</display-name> <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>*.xhtml</url-pattern> </servlet-mapping> </web-app> |
demo.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html" xmlns:f="https://xmlns.jcp.org/jsf/core">
<h:head></h:head> <h:body style="background-color:yellow"> <h:form> <h2>Please enter your details</h2> <h:panelGrid columns="2" align="left">
<h:outputText value="Select Your State" /> <h:selectOneMenu onchange="submit()" valueChangeListener="#{helloBean.changeLanguage}"> <f:selectItems value="#{helloBean.stateDisplay}" /> </h:selectOneMenu> Your language is: <h:outputText value="#{helloBean.language}" /> </h:panelGrid> </h:form> </h:body> </html> |
HelloBean.java
package com.java4coding;
import java.util.LinkedHashMap; import java.util.Map; import javax.faces.bean.ManagedBean; import javax.faces.event.ValueChangeEvent;
@ManagedBean public class HelloBean { private String state; private static String language;
public String getLanguage() { return language; }
public void setLanguage(String language) { this.language = language; } public String getState() { return state; }
public void setState(String state) { this.state = state; }
private static Map<String, Object> stateDisplay; static { stateDisplay = new LinkedHashMap<String, Object>(); stateDisplay.put("Karnataka", "Karnataka"); // key, value stateDisplay.put("Tamilnad", "Tamilnad"); stateDisplay.put("Andrapradesh", "Andrapradesh");
}
// drop down will be displayed with states public Map<String, Object> getStateDisplay() { return stateDisplay; }
public void changeLanguage(ValueChangeEvent vc) {
String stateValue = (String) vc.getNewValue(); System.out.println("inside changeLanguage method"); System.out.println(state);
if (stateValue.equalsIgnoreCase("Karnataka")) { language = "Kannada"; } else if (stateValue.equalsIgnoreCase("Tamilnad")) { language = "Tamil"; } if (stateValue.equalsIgnoreCase("Andrapradesh")) { language = "Telugu"; }
} } |
Eclipse Project Directory Structure
Output
All Chapters
