JSF - valueChangeListener

Lorsque l'utilisateur interagit avec des composants d'entrée, tels que h: inputText ou h: selectOneMenu, le JSF déclenche un valueChangeEvent, qui peut être géré de deux manières.

S. Non	Technique et description
1	Method Binding Transmettez le nom de la méthode de bean géré dans l' attribut valueChangeListener du composant UI.
2	ValueChangeListener Implémentez l'interface ValueChangeListener et transmettez le nom de la classe d'implémentation à l' attribut valueChangeListener du composant UI.

Liaison de méthode

Définir une méthode

public void localeChanged(ValueChangeEvent e) { 
  
   //assign new value to country 
   selectedCountry = e.getNewValue().toString();  
}

Utilisez la méthode ci-dessus

<h:selectOneMenu value = "#{userData.selectedCountry}"  onchange = "submit()" 
   valueChangeListener = "#{userData.localeChanged}" >
   <f:selectItems value = "#{userData.countries}" />
</h:selectOneMenu>

ValueChangeListener

Implémenter ValueChangeListener

public class LocaleChangeListener implements ValueChangeListener {
   
   @Override
   public void processValueChange(ValueChangeEvent event)
      throws AbortProcessingException {
     
      //access country bean directly
      UserData userData = (UserData) FacesContext.getCurrentInstance().
      getExternalContext().getSessionMap().get("userData"); 
      userData.setSelectedCountry(event.getNewValue().toString());
   }
}

Utiliser la méthode d'écoute

<h:selectOneMenu value = "#{userData.selectedCountry}" onchange = "submit()">
   <f:valueChangeListener type = "com.tutorialspoint.test.LocaleChangeListener"
      />
   <f:selectItems value = "#{userData.countries}" />
</h:selectOneMenu>

Exemple d'application

Créons une application de test JSF pour tester le valueChangeListener dans JSF.

Étape	La description
1	Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Première application .
2	Modifiez le fichier UserData.java comme expliqué ci-dessous.
3	Créez le fichier LocaleChangeListener.java sous un package com.tutorialspoint.test . Modifiez-le comme expliqué ci-dessous.
4	Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangés.
5	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
6	Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
sept	Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ValueChangeEvent;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private static Map<String,String> countryMap;
   private String selectedCountry = "United Kingdom"; //default value 

   static {
      countryMap = new LinkedHashMap<String,String>();
      countryMap.put("en", "United Kingdom"); //locale, country name
      countryMap.put("fr", "French");
      countryMap.put("de", "German");	
   }

   public void localeChanged(ValueChangeEvent e) {
      //assign new value to country
      selectedCountry = e.getNewValue().toString(); 
   }

   public Map<String, String> getCountries() {
      return countryMap;
   }

   public String getSelectedCountry() {
      return selectedCountry;
   }

   public void setSelectedCountry(String selectedCountry) {
      this.selectedCountry = selectedCountry;
   }
}

LocaleChangeListener.java

package com.tutorialspoint.test;

import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ValueChangeEvent;
import javax.faces.event.ValueChangeListener;

public class LocaleChangeListener implements ValueChangeListener {
   
   @Override
   public void processValueChange(ValueChangeEvent event)
      throws AbortProcessingException {
      
      //access country bean directly
      UserData userData = (UserData) FacesContext.getCurrentInstance().
      getExternalContext().getSessionMap().get("userData");
      userData.setSelectedCountry(event.getNewValue().toString());
   }
}

home.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">
   
   <h:head>
      <title>JSF tutorial</title>		   
   </h:head>
   
   <h:body> 
      <h2>valueChangeListener Examples</h2>
      
      <h:form>
         <h2>Method Binding</h2>
         <hr/>
         <h:panelGrid columns = "2">
            Selected locale :
            <h:selectOneMenu value = "#{userData.selectedCountry}"
               onchange = "submit()"
               valueChangeListener = "#{userData.localeChanged}" >
               <f:selectItems value = "#{userData.countries}" />
            </h:selectOneMenu>
            Country Name: 		 
            <h:outputText id = "country" value = "#{userData.selectedCountry}"
            size = "20" />		
         </h:panelGrid>
      </h:form>
   
   </h:body>
</html>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.

Sélectionnez les paramètres régionaux. Vous verrez le résultat suivant.

Modifier home.xhtmlà nouveau dans le répertoire déployé où vous avez déployé l'application comme expliqué ci-dessous. Gardez le reste des fichiers inchangés.

home.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">
   
   <h:head>
      <title>JSF tutorial</title>		   
   </h:head>
   
   <h:body> 
      <h2>valueChangeListener Examples</h2>
      
      <h:form>    
         <h2>ValueChangeListener interface</h2>
         <hr/>
         <h:panelGrid columns = "2">
            Selected locale :
            <h:selectOneMenu value = "#{userData.selectedCountry}"
               onchange = "submit()">
               <f:valueChangeListener 
                  type = "com.tutorialspoint.test.LocaleChangeListener" />
               <f:selectItems value = "#{userData.countries}" />
            </h:selectOneMenu>
            Country Name: 		 
            <h:outputText id = "country1" value = "#{userData.selectedCountry}"
               size = "20" />		
         </h:panelGrid>
      </h:form>
   
   </h:body>
</html>

Une fois que vous êtes prêt avec toutes les modifications effectuées, actualisez la page dans le navigateur. Si tout va bien avec votre application, cela produira le résultat suivant.

Sélectionnez les paramètres régionaux. Vous verrez le résultat suivant.