ユーザーが
h:inputText
または
h:selectOneMenu
のような入力コンポーネントを変更すると、JSFの ”
value change event
“が発生します。
それを実装する2つの方法:
<h:selectOneMenu value="#{bean.value}" onchange="submit()" valueChangeListener="#{bean.valueChangeMethod}"> <f:selectItems value="#{bean.values}"/> </h:selectOneMenu>
Java …
値変更イベントと対話するメソッドは、
ValueChangeEvent
パラメーターを受け入れる必要があります。
@ManagedBean(name="bean") @SessionScoped public class BeanBean{ public void valueChangeMethod(ValueChangeEvent e){ //... } }
-
2。 ValueChangeListenerインターフェース
– 入力コンポーネントで、 ”
f:valueChangeListener ** “タグを内部に追加し、ValueChangeListenerインターフェースの実装クラスを指定しました。
JSF …
<h:selectOneMenu value="#{bean.value}" onchange="submit()"> <f:valueChangeListener type="ValueListenerXXX"/> <f:selectItems value="#{bean.values}"/> </h:selectOneMenu>
__Java …
ValueChangeListener
インタフェースを実装し、
processValueChange()
メソッドをオーバーライドします。
public class ValueListenerXXX implements ValueChangeListener{ @Override public void processValueChange(ValueChangeEvent event) throws AbortProcessingException { //... } }
-
注意
動作させるには、
onchange = “submit()” ** JavaScriptを入力コンポーネントに添付する必要があります。それ以外の場合は、イベントは発生しません。
完全なvalueChangeListenerの例
ここではドロップダウンボックス(
h:selectOneMenu
)とテキストボックス(
h:inputText
)を持つJSF 2.0アプリケーションがあり、ユーザーがドロップダウンボックスで変更を加えると、「値変更イベント」が発生し、新しく選択されたドロップダウンボックス値。
この例は、「
メソッドバインディング
」と「
ValueChangeListener
」の両方でのデモンストレーションです。
1.メソッドバインディング
デモンストレーションのための国とロケールコードのリストを提供するカントリーBean。 Beanのメソッドは、入力コンポーネントの ”
valueChangeListener
“属性を介してバインドできます。下記参照 :
CountryBean.java
package com.mkyong; 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="country") @SessionScoped public class CountryBean implements Serializable{ private static final long serialVersionUID = 1L; private static Map<String,String> countries; private String localeCode = "en";//default value static{ countries = new LinkedHashMap<String,String>(); countries.put("United Kingdom", "en");//label, value countries.put("French", "fr"); countries.put("German", "de"); countries.put("China", "zh__CN"); } public void countryLocaleCodeChanged(ValueChangeEvent e){ //assign new value to localeCode localeCode = e.getNewValue().toString(); } public Map<String,String> getCountryInMap() { return this.countries; } public String getLocaleCode() { return localeCode; } public void setLocaleCode(String localeCode) { this.localeCode = localeCode; } }
JSFページ
<?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" xmlns:ui="http://java.sun.com/jsf/facelets" > <h:body> <h1>JSF 2 valueChangeListener example</h1> <h:form> <h:panelGrid columns="2"> Selected country : <h:inputText id="country" value="#{country.localeCode}" size="20"/> Select a country {method binding}: <h:selectOneMenu value="#{country.localeCode}" onchange="submit()" valueChangeListener="#{country.countryLocaleCodeChanged}"> <f:selectItems value="#{country.countryInMap}"/> </h:selectOneMenu> </h:panelGrid> </h:form> </h:body> </html>
2. ValueChangeListenerインターフェース
country beanの上で再利用して、国とロケールコードのリストを提供します。
ValueChangeListener
インターフェースを実装し、 ”
f:valueChangeListener
“タグを介してバインドします。下記参照 :
CountryValueListener.java
package com.mkyong; import javax.faces.context.FacesContext; import javax.faces.event.AbortProcessingException; import javax.faces.event.ValueChangeEvent; import javax.faces.event.ValueChangeListener; public class CountryValueListener implements ValueChangeListener{ @Override public void processValueChange(ValueChangeEvent event) throws AbortProcessingException { //access country bean directly CountryBean country = (CountryBean) FacesContext.getCurrentInstance(). getExternalContext().getSessionMap().get("country"); country.setLocaleCode(event.getNewValue().toString()); } }
JSFページ
<?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" xmlns:ui="http://java.sun.com/jsf/facelets" > <h:body> <h1>JSF 2 valueChangeListener example</h1> <h:form> <h:panelGrid columns="2"> Selected country : <h:inputText id="country" value="#{country.localeCode}" size="20"/> Select a country {ValueChangeListener class}: <h:selectOneMenu value="#{country.localeCode}" onchange="submit()"> <f:valueChangeListener type="com.mkyong.CountryValueListener"/> <f:selectItems value="#{country.countryInMap}"/> </h:selectOneMenu> </h:panelGrid> </h:form> </h:body> </html>
デモ
デフォルトでは、国「イギリス」が選択されています。
例:jsf2-ValueChangeListener-example-1、width = 640、height = 300]
国のドロップダウンボックス値が変更された場合は、
valueChangeListener
を発生させ、新しく選択したドロップドローボックス値でテキストボックス値を更新します。
例:jsf2-ValueChangeListener-example-2、width = 640、height = 300]
ソースコードをダウンロードする
ダウンロード – リンク://wp-content/uploads/2010/11/JSF-2-ValueChangeListener-Example.zip[JSF-2-ValueChangeListener-Example.zip](10KB)