JSF 2 multiple select listbox example

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

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

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.