Value Change Events

Components in a web application often depend on each other. For example, in the application shown in Figure 7-2, the value of the State prompt depends on the country menu's value. You can keep dependent components in synch with value change events, which are fired by input components after their new value has been validated and the enclosing form is submitted.

Figure 7-2. Using Value Change Events

The application shown in Figure 7-2 attaches a value change listener to the country menu and uses the onchange attribute to force a form submit after the menu's value is changed:

 <h:selectOneMenu value="#{form.country}" onchange="submit()"     valueChangeListener="#{form.countryChanged}">     <f:selectItems value="#{form.countryNames}"/> </h:selectOneMenu>

When a user selects a country from the menu, the JavaScript submit function is invoked to submit the menu's form, which subsequently invokes the JSF life cycle. After the Process Validations phase, the JSF implementation invokes the form bean's countryChanged method. That method changes the view root's locale, according to the new country value:

 private static final String US = "United States"; ... public void countryChanged(ValueChangeEvent event) {     FacesContext context = FacesContext.getCurrentInstance();     if(US.equals((String)event.getNewValue()))          context.getViewRoot().setLocale(Locale.US);       else          context.getViewRoot().setLocale(Locale.CANADA);    } }

Like all value change listeners, the preceding listener is passed a value change event. The listener uses that event to access the component's new value. The ValueChangeEvent class extends FacesEvent, both of which reside in the javax.faces.event package. The most commonly used methods from those classes are listed below.

 javax.faces.event.ValueChangeEvent

UIComponent getComponent()
Returns the input component that triggered the event.
Object getNewValue()
Returns the component's new value, after the value has been converted and validated.
Object getOldValue()
Returns the component's previous value.

 javax.faces.event.FacesEvent

void queue()
Queues the event for delivery at the end of the current life-cycle phase.
PhaseId getPhaseId()
Returns the phase identifier corresponding to the phase during which the event is delivered.
void setPhaseId(PhaseId)
Sets the phase identifier corresponding to the phase during which the event is delivered.

The directory structure for the application in Figure 7-2 is shown in Figure 7-3 and the application is listed in Listing 7-1 through Listing 7-5.

Listing 7-1. `valuechange/index.jsp`

  1. <html>  2.    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>  3.    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>  4.    <f:view>  5.       <link href="styles.css" rel="stylesheet" type="text/css"/>  6.       <f:loadBundle basename="com.corejsf.messages" var="msgs"/>  7.        <head>  8.         <title>  9.             <h:outputText value="#{msgs.windowTitle}"/> 10.          </title> 11.       </head> 12. 13.       <body> 14.          <h:outputText value="#{msgs.pageTitle}" style/> 15.          <p/> 16.          <h:form> 17.             <h:panelGrid columns="2"> 18.                <h:outputText value="#{msgs.streetAddressPrompt}"/> 19.                <h:inputText value="#{form.streetAddress}" /> 20. 21.                <h:outputText value="#{msgs.cityPrompt}"/> 22.                <h:inputText value="#{form.city}"/> 23. 24.                <h:outputText value="#{msgs.statePrompt}"/> 25.                <h:inputText value="#{form.state}"/> 26.                <h:outputText value="#{msgs.countryPrompt}"/> 27. 28.                <h:selectOneMenu value="#{form.country}" 29.                   onchange="submit()" 30.                   valueChangeListener="#{form.countryChanged}"> 31.                   <f:selectItems value="#{form.countryNames}"/> 32.                </h:selectOneMenu> 33.             </h:panelGrid> 34.             <p/> 35.             <h:commandButton value="#{msgs.submit}"/> 36.          </h:form> 37.       </body> 38.    </f:view> 39. </html>

Listing 7-2. `valuechange/WEB-INF/classes/com/corejsf/RegisterForm.java`

  1. package com.corejsf;  2.  3. import java.util.ArrayList;  4. import java.util.Collection;  5. import java.util.Locale;  6. import javax.faces.context.FacesContext;  7. import javax.faces.event.ValueChangeEvent;  8. import javax.faces.model.SelectItem;  9. 10. public class RegisterForm { 11.    private String streetAddress; 12.    private String city; 13.    private String state; 14.    private String country; 15. 16.    private static final String US = "United States"; 17.    private static final String CANADA = "Canada"; 18.    private static final String[] COUNTRY_NAMES = { US, CANADA }; 19.    private static ArrayList countryItems = null; 20. 21.    // PROPERTY: countryNames 22.    public Collection getCountryNames() { 23.       if(countryItems == null) { 24.          countryItems = new ArrayList(); 25.          for (int i = 0; i < COUNTRY_NAMES.length; ++i) { 26.             countryItems.add(new SelectItem(COUNTRY_NAMES[i])); 27.          } 28.       } 29.       return countryItems; 30.    } 31. 32.    // PROPERTY: streetAddress 33.    public void setStreetAddress(String newValue) { streetAddress = newValue; } 34.    public String getStreetAddress() { return streetAddress; } 35. 36.    // PROPERTY: city 37.    public void setCity(String newValue) { city = newValue; } 38.    public String getCity() { return city; } 39. 40.    // PROPERTY: state 41.    public void setState(String newValue) { state = newValue; } 42.    public String getState() { return state; } 43. 44.    // PROPERTY: country 45.    public void setCountry(String newValue) { country = newValue; } 46.    public String getCountry()              { return country; } 47. 48.    public void countryChanged(ValueChangeEvent event) { 49.       FacesContext context = FacesContext.getCurrentInstance(); 50. 51.       if(US.equals((String) event.getNewValue())) 52.          context.getViewRoot().setLocale(Locale.US); 53.       else 54.          context.getViewRoot().setLocale(Locale.CANADA); 55.    } 56. }

Listing 7-3. `valuechange/WEB-INF/faces-config.xml`

  1. <?xml version="1.0"?>  2.  3. <!DOCTYPE faces-config PUBLIC  4.    "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"  5.    "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">  6.  7. <faces-config>  8.    <managed-bean>  9.       <managed-bean-name>form</managed-bean-name> 10.       <managed-bean-class>com.corejsf.RegisterForm</managed-bean-class> 11.       <managed-bean-scope>session</managed-bean-scope> 12.    </managed-bean> 13. </faces-config>

Listing 7-4. `valuechange/WEB-INF/classes/com/corejsf/messages_en_US.properties`

 1. windowTitle=Using Value Change Events 2. pageTitle=Please fill in your address 3. 4. streetAddressPrompt=Address 5. cityPrompt=City 6. statePrompt=State 7. countryPrompt=Country 8. submit=Submit address

Listing 7-5. `valuechange/WEB-INF/classes/com/corejsf/messages_en_CA.properties`

 1. windowTitle=Using Value Change Events 2. pageTitle=Please fill in your address 3. 4. streetAddressPrompt=Address 5. cityPrompt=City 6. statePrompt=Province 7. countryPrompt=Country 8. submit=Submit address