開発者ドキュメント

JSF 2 valueChangeListenerの例

ユーザーが

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)

リファレンス

リンク://タグ/jsf2/[jsf2]

モバイルバージョンを終了