JSF 2 multiple select listbox example-优快云博客

本文详细介绍了在JSF2.0中如何使用<h:selectManyListbox>标签来渲染一个多选下拉框，并展示了三种不同的填充数据方式：硬编码在<f:selectItem>标签中，通过Map生成值，以及通过Object数组结合var属性生成值。同时，文章提供了一个示例后台Bean用于生成多选列表框的值，并且展示了如何在JSF页面中使用这些值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

In JSF, <h:selectManyListbox /> tag is used to render a multiple select listbox – HTML select element with “multiple” and “size” attribute.

//JSF...
<h:selectManyListbox value="#{user.favFood1}">
    <f:selectItem itemValue="Fry Checken" itemLabel="Food1 - Fry Checken" />
    <f:selectItem itemValue="Tomyam Soup" itemLabel="Food1 - Tomyam Soup" />
    <f:selectItem itemValue="Mixed Rice" itemLabel="Food1 - Mixed Rice" />
</h:selectManyListbox>

//HTML output...
<select name="j_idt6:j_idt8" multiple="multiple" size="3">  
    <option value="Fry Checken">Food1 - Fry Checken</option> 
    <option value="Tomyam Soup">Food1 - Tomyam Soup</option> 
    <option value="Mixed Rice">Food1 - Mixed Rice</option> 
</select>

`h:selectManyListbox` example

A JSF 2.0 example to show the use of “h:selectManyListbox” tag to render multiple select listbox, and populate the data in 3 different ways :

Hardcoded value in “f:selectItem” tag.
Generate values with a Map and put it into “f:selectItems” tag.
Generate values with an Object array and put it into “f:selectItems” tag, then represent the value with “var” attribute.

1. Backing Bean

A backing bean to hold and generate data for the multiple select listbox values. The property to hold the multi-selected listbox value, must be a type of Collection or Array; Otherwise it will hits the following error message

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

package com.mkyong;

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<String,Object> food2Value;
    static{
        food2Value = new LinkedHashMap<String,Object>();
        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<String,Object> 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 Page

A JSF page to demonstrate the use “h:selectManyListbox” tag.

<?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"
      >
    <h:body>
        
        <h1>JSF 2 multi-select listbox example</h1>
        <h:form>
        
        1. Hard-coded with "f:selectItem" : 
        <h:selectManyListbox value="#{user.favFood1}">
            <f:selectItem itemValue="Fry Checken" itemLabel="Food1 - Fry Checken" />
            <f:selectItem itemValue="Tomyam Soup" itemLabel="Food1 - Tomyam Soup" />
            <f:selectItem itemValue="Mixed Rice" itemLabel="Food1 - Mixed Rice" />
        </h:selectManyListbox>
        
        <br /><br />
        
        2. Generated by Map :
        <h:selectManyListbox value="#{user.favFood2}">
            <f:selectItems value="#{user.favFood2Value}" />
        </h:selectManyListbox>
        
        <br /><br />
        
        3. Generated by Object array and iterate with var :
        <h:selectManyListbox value="#{user.favFood3}">
            <f:selectItems value="#{user.favFood3Value}" var="f"
            itemLabel="#{f.foodLabel}" itemValue="#{f.foodValue}" />
        </h:selectManyListbox>
        
        <br /><br />
        
            <h:commandButton value="Submit" action="result" />
        <h:commandButton value="Reset" type="reset" />

        </h:form>
        
    </h:body>

</html>

result.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"
      >
 
    <h:body>
        
        <h1>JSF 2 multi-select listbox example</h1>
        
        <h2>result.xhtml</h2>
        
        <ol>
            <li>user.favFood1 : #{user.favFood1InString}</li>
            <li>user.favFood2 : #{user.favFood2InString}</li>
            <li>user.favFood3 : #{user.favFood3InString}</li>
        </ol>
    </h:body>

</html>

3. Demo

jsf2-multi-select-listbox-example-1

When “submit” button is clicked, link to “result.xhtml” page and display the submitted multi-selected listbox values.
jsf2-multi-select-listbox-example-2

How to pre-select multiple listbox values ?

The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectManyListbox” tag. In above example, if you set favFood1 property to “Fry Checken” and “Tomyam Soup” :

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

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

    //...

The “favFood1″ listbox values, “Fry Checken” and “Tomyam Soup” are selected by default.

转载于:https://www.cnblogs.com/ghgyj/p/4765387.html