CheckBox Example with JSF 2.0

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

0 175 3 minutes read

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:

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

Want to be a JSF Master ?

Subscribe to our newsletter and download the JSF 2.0 Programming Cookbook right now!

In order to get you prepared for your JSF development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download NOW!

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>