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:selectItemtag. - 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:selectItemtag, then represent the value using avarattribute.
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:
Let’s see what happened:
This was an example of CheckBoxes in JSF 2.0. You can also download the source code for this example: CheckBoxesJSF
