ListBox Example with JSF 2.0

Thodoris BaisFebruary 15th, 2014Last Updated: May 9th, 2019

0 86 2 minutes read

Hello Java Developers, today we ‘re gonna talk about listboxes in JSF 2.0. In JSF, we can use the <h:selectOneListbox /> tag, in order to render a single-selection listbox. For example, a simple HTML listbox that includes three options, could be displayed using JSF, like below:

<h:selectOneListbox value="#{user.favoriteYear}">
   	<f:selectItem itemValue="2000" itemLabel="Year : 2000" />
   	<f:selectItem itemValue="2010" itemLabel="Year : 2010" />
   	<f:selectItem itemValue="2020" itemLabel="Year : 2020" />
</h:selectOneListbox>

Before diving into the full example, I will first explain the three different ways that we can render a single-selection listbox:

Hardcoded value in a f:selectItem tag.
Generated values using a Map and passed into the fore-mentioned tag.
Generate values using an Object Array and passed again into the f:selectItem tag, then represent the value using a var attribute.

1. Backing Bean

Here’s the structure of the Bean that holds the submitted values.

UserBean.java

package com.javacodegeeks.enterprise.jsf;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class UserBean implements Serializable{

	private static final long serialVersionUID = 4256272866128337548L;

	public String favoriteCar1;
	public String favoriteCar2;
	public String favoriteCar3;
	public String getFavoriteCar1() {
		return favoriteCar1;
	}
	public void setFavoriteCar1(String favoriteCar1) {
		this.favoriteCar1 = favoriteCar1;
	}
	public String getFavoriteCar2() {
		return favoriteCar2;
	}
	public void setFavoriteCar2(String favoriteCar2) {
		this.favoriteCar2 = favoriteCar2;
	}
	public String getFavoriteCar3() {
		return favoriteCar3;
	}
	public void setFavoriteCar3(String favoriteCar3) {
		this.favoriteCar3 = favoriteCar3;
	}
	
	//generated by map
	private static Map<String, Object> favoriteCar2Value;
	static
	{
		favoriteCar2Value = new LinkedHashMap<String, Object>();
		
		favoriteCar2Value.put("BMW Series 1 - 116", "116"); //label, value
		favoriteCar2Value.put("BMW Series 1 - 118", "118");
		favoriteCar2Value.put("BMW Series 1 - 120", "120");
	}
	
	public Map<String, Object> getFavoriteCar2Value()
	{
		return favoriteCar2Value;
	}
	
	//generated by object array
	public static class Car
	{
		public String carLabel;
		public String carValue;
		
		public Car(String carLabel, String carValue)
		{
			this.carLabel = carLabel;
			this.carValue = carValue;
		}
		
		public String getCarLabel()
		{
			return carLabel;
		}
		
		public String getCarValue()
		{
			return carValue;
		}
	}
	
	public Car[] car3List;
	
	public Car[] getFavoriteCar3Value()
	{
		car3List = new Car[3];
		
		car3List[0] = new Car("BMW Series 3 - 316", "316");
		car3List[1] = new Car("BMW Series 3 - 318", "318");
		car3List[2] = new Car("BMW Series 3 - 320", "320");
	
		return car3List;
	}
	
}

2. Our JSF Pages

First, the welcome page:

index.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"
      xmlns:f="http://java.sun.com/jsf/core" >
 
    <h:head>
    	<title>JSF ListBox Example</title>
    </h:head>
    
    <h:body>
    	<h1>JSF 2.2 ListBox Example</h1>
    	
    	<h:form>
    		1. Hardcoded with "f:selectItem" :
    		<br/>
    		
    		<h:selectOneListbox value="#{user.favoriteCar1}">
    			<f:selectItem itemValue="520" itemLabel="BMW Series 5 - 520" />
    			<f:selectItem itemValue="525" itemLabel="BMW Series 5 - 525" />
    			<f:selectItem itemValue="535" itemLabel="BMW Series 5 - 535" />
    		</h:selectOneListbox>
    		
    		<br/><br/>
    		
    		2. Generated by Map:
    		<br/>
    		
    		<h:selectOneListbox value="#{user.favoriteCar2}">
    			<f:selectItems value="#{user.favoriteCar2Value}" />
    		</h:selectOneListbox>
    		
    		<br/><br/>
    		
    		3. Generated by Object Array; access with "var"
    		<br/>
    		<h:selectOneListbox value="#{user.favoriteCar3}">
    			<f:selectItems value="#{user.favoriteCar3Value}" var="c"
    				itemLabel="#{c.carLabel}" itemValue="#{c.carValue}"	/>
    		</h:selectOneListbox>
    		
    		<br/>
    		
    		<h:commandButton value="Submit" action="response"/>
    		<h:commandButton value="Reset" type="reset"/>
    	</h:form>
    </h:body>
</html>

Then, just to ensure that every submitted value saved correctly, we ‘ll try to access the related getters through a JSF page:

response.xhtml


 
     


JSF 2.2 ListBox Example - Response Page


    	





 	user.favoriteCar1 : #{user.favoriteCar1}




 	user.favoriteCar2 : #{user.favoriteCar2}




 	user.favoriteCar3 : #{user.favoriteCar3}