JSF 2.0 Dropdown event onChange

In this post, I’ll show how to handle event onChange on <h:selectOneMenu> component. First off all, I create my view file called dropDown.xhtml and my Backing Bean MyBean.java.

In my view file, I create a form that contains 2 dropdown component and outputtext that represent the value of the first dropdown. When we run this app, the first dropdown have 3 values (see MyBean.java) and then the second dropdown values will depend on the value of the first dropdown. In this example, I fill the second dropdown values with Integer that iterate from 1 to value of first dropdown (see MyBean.java on method getValueTwo).

The key of this technique is to use the <f:ajax event=”change” execute=”@this” render=”formId”/> component, and with the attribute on <h:selectOneMenu valueChangeListener=”#{myBean.onValueChange}” />. So, when the value on the dropdown has changed, in other hand the backing bean will invoke the method onValueChange() and update the view of “formId”.

So, this is screenshoot for this dropDown.xhtml :

file dropDown.xhtml

            <h:form id="formId">
                <h:selectOneMenu value="#{myBean.tempValueOne}" valueChangeListener="#{myBean.onValueChange}">
                    <f:selectItems value="#{myBean.valueOne}"/>
                    <f:ajax event="change" execute="@this" render="formId"/>
                </h:selectOneMenu>
                Nilai Satu : <h:outputText value="#{myBean.tempValueOne}"/>
                <br/>
                <h:selectOneMenu value="#{myBean.tempValueTwo}">
                    <f:selectItems value="#{myBean.valueTwo}" />                    
                </h:selectOneMenu>
            </h:form>

file myBean.java

package com.machinetik.bean;

import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.ValueChangeEvent;

/**
 *
 * @author USER
 */
@ManagedBean
@RequestScoped
public class MyBean {

    private Map<String, Integer> valueOne;
    private Map<Integer, Integer> valueTwo;
    private Integer tempValueOne, tempValueTwo;
    private int counter;

    /** Creates a new instance of MyBean */
    public MyBean() {
        valueOne = new HashMap<String, Integer>();
        valueTwo = new HashMap<Integer, Integer>();
        valueOne.put("Satu", 10);
        valueOne.put("Dua", 20);
        valueOne.put("Tiga", 30);
        tempValueOne=0;
    }

    /**
     * @return the valueOne
     */
    public Map<String, Integer> getValueOne() {
        return valueOne;
    }

    /**
     * @param valueOne the valueOne to set
     */
    public void setValueOne(Map<String, Integer> valueOne) {
        this.valueOne = valueOne;
    }

    /**
     * @return the valueTwo
     */
    public Map<Integer, Integer> getValueTwo() {
        for(int i=1;i<=counter;i++){
            valueTwo.put(i, i);
        }
        return valueTwo;
    }

    /**
     * @param valueTwo the valueTwo to set
     */
    public void setValueTwo(Map<Integer, Integer> valueTwo) {
        this.valueTwo = valueTwo;
    }

    /**
     * @return the tempValueOne
     */
    public Integer getTempValueOne() {
        return tempValueOne;
    }

    /**
     * @param tempValueOne the tempValueOne to set
     */
    public void setTempValueOne(Integer tempValueOne) {
        this.tempValueOne = tempValueOne;
    }

    /**
     * @return the tempValueTwo
     */
    public Integer getTempValueTwo() {
        return tempValueTwo;
    }

    /**
     * @param tempValueTwo the tempValueTwo to set
     */
    public void setTempValueTwo(Integer tempValueTwo) {
        this.tempValueTwo = tempValueTwo;
    }

    /**
     * @return the counter
     */
    public int getCounter() {
        return counter;
    }

    /**
     * @param counter the counter to set
     */
    public void setCounter(int counter) {
        this.counter = counter;
    }

    public void onValueChange(ValueChangeEvent event) {
        Integer newValue = (Integer) event.getNewValue();
        this.setCounter(newValue);
    }
}

bloated enough huh??😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s