JSF值變化的事件 - tw511教學網

在JSF中，我們可以處理<h:inputText>或<h:selectOneMenu>的值變化的事件。

要註冊事件處理程式偵聽器，請在UI元件的valueChangeListener屬性中傳遞託管bean方法的名稱。

或者實現ValueChangeListener介面，並將實現類名傳遞給UI元件的valueChangeListener屬性。

以下程式碼顯示了如何將託管Bean的方法註冊到valueChangeListener方法。

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

註冊方法

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

以下程式碼顯示了如何實現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());
   }
}

並註冊到<f:valueChangeListener>標籤。

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

範例

開啟NetBeans，建立一個名稱為：ValueChangedEvent 的Web專案，其結構如下所示 -

以下是檔案：User.java 檔案中的程式碼 -

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.yiibai;

/**
 *
 * @author Maxsu
 */
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 User 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");
    }

    public void countryLocaleCodeChanged(ValueChangeEvent e) {
        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;
    }
}

以下是檔案：MyValueChangedListener.java 檔案中的程式碼 -

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.yiibai;

/**
 *
 * @author Maxsu
 */
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ValueChangeEvent;
import javax.faces.event.ValueChangeListener;

public class MyValueChangedListener implements ValueChangeListener {

    @Override
    public void processValueChange(ValueChangeEvent event)
            throws AbortProcessingException {

        User country = (User) FacesContext.getCurrentInstance().
                getExternalContext().getSessionMap().get("country");

        country.setLocaleCode(event.getNewValue().toString());

    }

}

以下是檔案：index.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"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
        <h:form>
            Selected country locale : 
            <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>
            Select a country: 
            <h:selectOneMenu value="#{country.localeCode}" onchange="submit()">
                <f:valueChangeListener type="com.yiibai.MyValueChangedListener" />
                <f:selectItems value="#{country.countryInMap}" />
            </h:selectOneMenu>      
        </h:form>
    </h:body>
</html>

執行專案

在ValueChangedEvent 專案上點選右鍵，選擇 【執行】，在Tomcat啟動完成後，開啟瀏覽器存取以下地址：

http://localhost:8084/ValueChangedEvent/

如果程式沒有錯誤，應該會看到如下介面 -