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:
1 2 3 4 5 | < 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 avar
attribute.
1. Backing Bean
Here’s the structure of the Bean that holds the submitted values.
UserBean.java
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <? xml version = "1.0" encoding = "UTF-8" ?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" < 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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | <? xml version = "1.0" encoding = "UTF-8" ?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" < 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