Wednesday 25 September 2013

JSF2 Listbox Example

// siddhu vydyabhushana // 1 comment
In JSF, <h:selectOneListbox /> tag is used to render a single select listbox – HTML select element with “size” attribute.
//JSF...
<h:selectOneListbox value="#{user.favYear1}">
   	<f:selectItem itemValue="2000" itemLabel="Year1 - 2000" />
   	<f:selectItem itemValue="2010" itemLabel="Year1 - 2010" />
   	<f:selectItem itemValue="2020" itemLabel="Year1 - 2020" />
</h:selectOneListbox>
 
//HTML output...
<select name="j_idt6:j_idt8" size="3">	
	<option value="2000">Year1 - 2000</option> 
	<option value="2010">Year1 - 2010</option> 
	<option value="2020">Year1 - 2020</option> 
</select>

h:selectOneListbox example

A JSF 2.0 example to show the use of “h:selectOneListbox” tag to render a single select listbox, and populate the data in 3 different ways :
  1. Hardcoded value in “f:selectItem” tag.
  2. Generate values with a Map and put it into “f:selectItems” tag.
  3. 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 listbox values.
package com.mkyong;
 
import java.io.Serializable;
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 favYear1;
	public String favYear2;
	public String favYear3;
 
	//getter and setter methods
 
	//Generated by Map
	private static Map<String,Object> year2Value;
	static{
		year2Value = new LinkedHashMap<String,Object>();
		year2Value.put("Year2 - 2000", "2000"); //label, value
		year2Value.put("Year2 - 2010", "2010");
		year2Value.put("Year2 - 2020", "2020");
	}
 
	public Map<String,Object> getFavYear2Value() {
		return year2Value;
	}
 
	//Generated by Object array
	public static class Year{
		public String yearLabel;
		public String yearValue;
 
		public Year(String yearLabel, String yearValue){
			this.yearLabel = yearLabel;
			this.yearValue = yearValue;
		}
 
		public String getYearLabel(){
			return yearLabel;
		}
 
		public String getYearValue(){
			return yearValue;
		}
 
	}
 
	public Year[] year3List;
 
	public Year[] getFavYear3Value() {
 
		year3List = new Year[3];
		year3List[0] = new Year("Year3 - 2000", "2000");
		year3List[1] = new Year("Year3 - 2010", "2010");
		year3List[2] = new Year("Year3 - 2020", "2020");
 
		return year3List;
	}
 
}

2. JSF Page

A JSF page to demonstrate the use “h:selectOneListbox” 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 listbox example</h1>
    	<h:form>
 
	        1. Hard-coded with "f:selectItem" : 
   		<h:selectOneListbox value="#{user.favYear1}">
   			<f:selectItem itemValue="2000" itemLabel="Year1 - 2000" />
   			<f:selectItem itemValue="2010" itemLabel="Year1 - 2010" />
   			<f:selectItem itemValue="2020" itemLabel="Year1 - 2020" />
   		</h:selectOneListbox>
 
   		<br />
 
	        2. Generated by Map :
   		<h:selectOneListbox value="#{user.favYear2}">
   			<f:selectItems value="#{user.favYear2Value}" />
   		</h:selectOneListbox>
 
	        <br />
 
	        3. Generated by Object array and iterate with var :
   		<h:selectOneListbox value="#{user.favYear3}">
   			<f:selectItems value="#{user.favYear3Value}" var="y"
   			itemLabel="#{y.yearLabel}" itemValue="#{y.yearValue}" />
   		</h:selectOneListbox>
 
	        <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 listbox example</h1>
 
    	<h2>result.xhtml</h2>
 
    	<ol>
    		<li>user.favYear1 : #{user.favYear1}</li>
    		<li>user.favYear2 : #{user.favYear2}</li>
    		<li>user.favYear3 : #{user.favYear3}</li>
    	</ol>
    </h:body>
 
</html>

3. Demo

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

How to pre-select a listbox value?

The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneListbox” tag. In above example, if you set favYear1 property to “2010″ :
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public String favYear1 = "2010";
 
	//...
The “favYear1″ listbox, value “2010″ is selected by default.

Download Source Code

Download It – JSF-2-Listbox-Example.zip (10KB)
 

1 comment:

  1. The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneListbox” tag. In above example, if you set favYear1 property to “2010″ cream shawl , crochet shawl , pink shawl , ladies capes and shawls , satin shawl , lace shawl , green shawl , shawl supplier , beaded shawl , paisley shawl , knitted shawl

    ReplyDelete