JSF 2複数選択リストボックスの例

JSF 2の複数選択リストボックスの例

JSFでは、<h:selectManyListbox />タグを使用して、複数選択リストボックス（「multiple」および「size」属性を持つHTML選択要素）をレンダリングします。

//JSF...

    
    
    


//HTML output...

h：selectManyListboxの例

「h:selectManyListbox」タグを使用して複数の選択リストボックスをレンダリングし、3つの異なる方法でデータを入力することを示すJSF2.0の例：

「f:selectItem」タグにハードコードされた値。
マップを使用して値を生成し、それを「f:selectItems」タグに入れます。
オブジェクト配列を使用して値を生成し、それを「f:selectItems」タグに入れてから、「var」属性を使用して値を表します。

1. バッキングビーン

複数選択リストボックス値のデータを保持および生成するバッキングBean。複数選択されたリストボックス値must be a type of Collection or Arrayを保持するプロパティ。それ以外の場合は、次のエラーメッセージが表示されます

WARNING: Target model Type is no a Collection or Array
javax.faces.FacesException: Target model Type is no a Collection or Array

package com.example;

import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{

    public String[] favFood1;
    public String[] favFood2;
    public String[] favFood3;

    //getter and setter methods...

    public String getFavFood1InString() {
        return Arrays.toString(favFood1);
    }

    public String getFavFood2InString() {
        return Arrays.toString(favFood2);
    }

    public String getFavFood3InString() {
        return Arrays.toString(favFood3);
    }

    //Generated by Map
    private static Map food2Value;
    static{
        food2Value = new LinkedHashMap();
        food2Value.put("Food2 - Fry Checken", "Fry Checken"); //label, value
        food2Value.put("Food2 - Tomyam Soup", "Tomyam Soup");
        food2Value.put("Food2 - Mixed Rice", "Mixed Rice");
    }

    public Map getFavFood2Value() {
        return food2Value;
    }

    //Generated by Object array
    public static class Food{
        public String foodLabel;
        public String foodValue;

        public Food(String foodLabel, String foodValue){
            this.foodLabel = foodLabel;
            this.foodValue = foodValue;
        }

        public String getFoodLabel(){
            return foodLabel;
        }

        public String getFoodValue(){
            return foodValue;
        }

    }

    public Food[] food3List;

    public Food[] getFavFood3Value() {

        food3List = new Food[3];
        food3List[0] = new Food("Food3 - Fry Checken", "Fry Checken");
        food3List[1] = new Food("Food3 - Tomyam Soup", "Tomyam Soup");
        food3List[2] = new Food("Food3 - Mixed Rice", "Mixed Rice");

        return food3List;
    }

}

2. JSFページ

「h:selectManyListbox」タグの使用を示すJSFページ。



    

        JSF 2 multi-select listbox example
        

        1. Hard-coded with "f:selectItem" :
        
            
            
            
        

        



        2. Generated by Map :
        
            
        

        



        3. Generated by Object array and iterate with var :

result.xhtml…




    

        JSF 2 multi-select listbox example

        result.xhtml

        
            user.favFood1 : #{user.favFood1InString}
            user.favFood2 : #{user.favFood2InString}
            user.favFood3 : #{user.favFood3InString}

3. Demo

jsf2-multi-select-listbox-example-1

「送信」ボタンをクリックすると、「result.xhtml」ページにリンクし、送信された複数選択リストボックス値を表示します。

jsf2-multi-select-listbox-example-2

複数のリストボックス値を事前選択する方法は？

「h:selectManyListbox」タグの「値」と一致する場合は、「f:selectItems」タグの値が選択されます。上記の例で、favFood1プロパティを「Fry Chicken」と「Tom Yum Soup」に設定した場合：

@ManagedBean(name="user")
@SessionScoped
public class UserBean{

    public String[] favFood1 = {"Fry Checken", "Tomyam Soup"};

    //...

デフォルトでは、「favFood1」リストボックスの値「Fry Chicken」と「Tom Yum Soup」が選択されています。

ソースコードをダウンロード

ダウンロード–JSF-2-Multi-Select-Listbox-Example.zip（10KB）

TOC