JSF - valueChangeListener
Cuando el usuario interactúa con componentes de entrada, como h: inputText o h: selectOneMenu, JSF dispara un valueChangeEvent, que se puede manejar de dos formas.
S. No | Técnica y descripción |
---|---|
1 | Method Binding Pase el nombre del método de bean administrado en el atributo valueChangeListener del componente UI. |
2 | ValueChangeListener Implemente la interfaz ValueChangeListener y pase el nombre de la clase de implementación al atributo valueChangeListener del componente UI. |
Enlace de método
Definir un método
public void localeChanged(ValueChangeEvent e) {
//assign new value to country
selectedCountry = e.getNewValue().toString();
}
Utilice el método anterior
<h:selectOneMenu value = "#{userData.selectedCountry}" onchange = "submit()"
valueChangeListener = "#{userData.localeChanged}" >
<f:selectItems value = "#{userData.countries}" />
</h:selectOneMenu>
ValueChangeListener
Implementar 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());
}
}
Usar método de escucha
<h:selectOneMenu value = "#{userData.selectedCountry}" onchange = "submit()">
<f:valueChangeListener type = "com.tutorialspoint.test.LocaleChangeListener"
/>
<f:selectItems value = "#{userData.countries}" />
</h:selectOneMenu>
Aplicación de ejemplo
Creemos una aplicación JSF de prueba para probar valueChangeListener en JSF.
Paso | Descripción |
---|---|
1 | Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el capítulo JSF - Primera aplicación . |
2 | Modifique el archivo UserData.java como se explica a continuación. |
3 | Cree el archivo LocaleChangeListener.java en un paquete com.tutorialspoint.test . Modifíquelo como se explica a continuación. |
4 | Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
5 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
6 | Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver. |
7 | Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso. |
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>
Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.
Seleccione la configuración regional. Verá el siguiente resultado.
Modificar home.xhtmlnuevamente en el directorio implementado donde ha implementado la aplicación como se explica a continuación. Mantenga el resto de los archivos sin cambios.
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>
Una vez que esté listo con todos los cambios realizados, actualice la página en el navegador. Si todo está bien con su aplicación, esto producirá el siguiente resultado.
Seleccione la configuración regional. Verá el siguiente resultado.