jsf

CheckBox Example with JSF 2.0

Hi there, hope you had an interesting day. Today we ‘re gonna talk about checkboxes in JSF 2.0. To represent a checkbox in JSF, we use the tag h:selectBooleanCheckbox. Ok, that’s really easy, but what if we ‘d like to create a group of checkboxes, where the user could select more than one checkbox? This can be done using the h:selectManyCheckbox tag; the HTML renderings are exactly the same, as we saw in my previous example. To be more specific, before getting into the example’s structure, here is a small example that implements a group of three checkboxes, where the user can select more than one of them:
 
 
 

<h:selectManyCheckbox value="#{user.favNumber1}">
   	<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
   	<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
   	<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
</h:selectManyCheckbox>

Ok, enough said, let’s have a quick example with that type of checkboxes, but I have to first notice the four different ways that we can populate a group of checkboxes:

  1. Hardcoded value in a f:selectItem tag.
  2. Generated values from an Array and passed into the fore-mentioned tag.
  3. Generated values using a Map and passed into the same tag.
  4. 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.checkboxes;

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
@SessionScoped
public class UserBean implements Serializable{

	private static final long serialVersionUID = -3953324291794510390L;

	public boolean rememberMe;
	public String[] favoriteCar1;
	public String[] favoriteCar2;
	public String[] favoriteCar3;
	public String[] favoriteCar4;
	public boolean isRememberMe() {
		return rememberMe;
	}
	public void setRememberMe(boolean rememberMe) {
		this.rememberMe = rememberMe;
	}
	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;
	}
	public String[] getFavoriteCar4() {
		return favoriteCar4;
	}
	public void setFavoriteCar4(String[] favoriteCar4) {
		this.favoriteCar4 = favoriteCar4;
	}
	
	
	public String getFavoriteCar1InString()
	{
		return Arrays.toString(favoriteCar1);
	}
	
	//generated by Array
	public String[] getFavoriteCar2Value()
	{
		favoriteCar2 = new String [5];
		favoriteCar2[0] = "116";
		favoriteCar2[1] = "118";
		favoriteCar2[2] = "X1";
		favoriteCar2[3] = "Series 1 Coupe";
		favoriteCar2[4] = "120";
		
		return favoriteCar2;
	}
	
	public String getFavoriteCar2InString()
	{
		return Arrays.toString(favoriteCar2);
	}
	
	//generated by Map
	private static Map<String, Object> car3Value;
	static
	{
		car3Value = new LinkedHashMap<String, Object>();
		car3Value.put("Car3 - 316", "BMW 316");
		car3Value.put("Car3 - 318", "BMW 318");
		car3Value.put("Car3 - 320", "BMW 320");
		car3Value.put("Car3 - 325", "BMW 325");
		car3Value.put("Car3 - 330", "BMW 330");
	}
	
	public Map<String, Object> getFavoriteCar3Value()
	{
		return car3Value;
	}
	public String getFavoriteCar3InString() {
		return Arrays.toString(favoriteCar3);
	}
	
	//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[] car4List;
	public Car[] getFavoriteCar4Value()
	{
		car4List = new Car[5];
		
		car4List[0] = new Car("Car 4 - M3", "BMW M3 SMG");
		car4List[1] = new Car("Car 4 - X3", "BMW X3");
		car4List[2] = new Car("Car 4 - X5", "BMW X5");
		car4List[3] = new Car("Car 4 - X6", "BMW X6");
		car4List[4] = new Car("Car 4 - 745", "BMW 745");
		
		return car4List;
	}
	
	public String getFavoriteCar4InString()
	{
		return Arrays.toString(favoriteCar4);
	}
}

2. Our JSF Pages

First, the welcome page, where we have a single checkbox and the four afore-mentioned different ways, which populate group checkboxes.

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:body> 
    	<h1>JSF 2.2 CheckBoxes Example</h1>
    	<h:form>
    		<h2>1. Single checkbox</h2>
    		<h:selectBooleanCheckbox value="#{user.rememberMe}" />Remember Me
    		
    		<h2>2. Group of checkboxes</h2>
    		1. Hardcoded using the tag "f:selectItem" :
    		<h:selectManyCheckbox value="#{user.favoriteCar1}">
    			<f:selectItem itemLabel="Car1 - E10" itemValue="BMW E10" />
    			<f:selectItem itemLabel="Car1 - E36" itemValue="BMW E36" />
    			<f:selectItem itemLabel="Car1 - E46" itemValue="BMW E46" />
    			<f:selectItem itemLabel="Car1 - E87" itemValue="BMW E87" />
    			<f:selectItem itemLabel="Car1 - E92" itemValue="BMW E92" />	
    		</h:selectManyCheckbox>
    		
    		<br/>
    		
    		2. Generated by Array :
    		<h:selectManyCheckbox value="#{user.favoriteCar2}">
    			<f:selectItems value="#{user.favoriteCar2Value}" />
    		</h:selectManyCheckbox>
    		
    		<br/>
    		
    		3. Generated by Map :
    		<h:selectManyCheckbox value="#{user.favoriteCar3}">
    			<f:selectItems value="#{user.favoriteCar3Value}" />
    		</h:selectManyCheckbox>
    		
    		<br/>
    		
    		4. Generated by Object, displayed using var
    		<h:selectManyCheckbox value="#{user.favoriteCar4}">
	   			<f:selectItems value="#{user.favoriteCar4Value}" var="last"
	   			itemLabel="#{last.carLabel}" itemValue="#{last.carValue}" />
	   		</h:selectManyCheckbox>
	   		
	   		<br/>
	   		
	   		<h:commandButton value="Submit" action="results" />
	   		<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:

results.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.2 CheckBoxes Example - Response Page</h1>
    	
    	<ol>
    		<li>user.rememberMe : #{user.rememberMe}</li>
    		<li>user.favoriteCar1 : #{user.favoriteCar1InString}</li>
    		<li>user.favoriteCar2 : #{user.favoriteCar2InString}</li>
    		<li>user.favoriteCar3 : #{user.favoriteCar3InString}</li>
    		<li>user.favoriteCar4 : #{user.favoriteCar4InString}</li>
    	</ol>
    </h:body>
</html>

3. Demo

I ‘ll just select my favorites from each group:

img

Let’s see what happened:

img2

This was an example of CheckBoxes in JSF 2.0. You can also download the source code for this example: CheckBoxesJSF

Thodoris Bais

Thodoris is an Oracle Certified Associate Java Programmer and currently works as a Junior Software Developer, for Intrasoft International S.A. He holds a diploma at Informatics & Telecommunications Engineering and is interested in continuous development.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button