Пример списка множественного выбора JSF 2

Пример списка множественного выбора JSF 2

В JSF тег<h:selectManyListbox /> используется для визуализации списка с множественным выбором - HTML-элемент select с атрибутом «multiple» и «size».

//JSF...

    
    
    


//HTML output...

Пример h: selectManyListbox

Пример JSF 2.0, демонстрирующий использование тега «h:selectManyListbox» для отображения списка с множественным выбором и заполнения данных тремя разными способами:

  1. Жестко запрограммированное значение в теге «f:selectItem».

  2. Сгенерируйте значения с помощью карты и поместите ее в тег «f:selectItems».

  3. Сгенерируйте значения с помощью массива Object и поместите его в тег «f:selectItems», затем представьте значение с помощью атрибута «var».

1. Бэк

Базовый компонент для хранения и генерации данных для значений списка множественного выбора. Свойство для хранения значения мульти-выбранного списка,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

Страница JSF для демонстрации использования тега «h:selectManyListbox».




    

        

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

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

3. Demo

jsf2-multi-select-listbox-example-1

При нажатии кнопки «Отправить», перейдите на страницу «result.xhtml» и отобразите отправленные несколько выбранных значений списка.

jsf2-multi-select-listbox-example-2

Как предварительно выбрать несколько значений списка?

Значение тега «f:selectItems» выбирается, если оно соответствует «значению» тега «h:selectManyListbox». В приведенном выше примере, если для свойства favFood1 установлено значение «Fry Checken» и «Tomyam Soup»:

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

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

    //...

Значения списка «favFood1», «Fry Checken» и «Tomyam Soup» выбраны по умолчанию.

Скачать исходный код

Скачать -JSF-2-Multi-Select-Listbox-Example.zip (10 КБ)