JSF 2 h selectManyCheckbox

In this tutorial you will learn about the JSF 2 html selectManyCheckbox tag.

JSF 2 h selectManyCheckbox

In this tutorial you will learn about the JSF 2 html selectManyCheckbox tag.

<h:selectManyCheckbox> tag of JSF 2 html tag library is rendered to the HTML <input> element of it's attribute type="checkbox". In JSF applications this tag is used to put many checkboxes on a JSF view page. These checkboxes elements are drawn inside the HTML <table> element.

Attributes of JSF 2 h selectManyCheckbox

• converter : This is not a required attribute but, is used when you are required to invoke a Converter (if any) class.
• converterMessage : This is not a required attribute. but, if it is used it displays a converter message as text and it also replaces the message coming from the Converter.
   
• id : This is not a required attribute. This attribute is used to make the component uniquely identifiable. Value of this attribute must be unique within its closest parent.
   
• immediate : This is not a required attribute. It evaluates an boolean expression. If this attribute is used with 'true' value it specifies that the value of component must be converted and validated in the Apply Request Values phase instead of expecting for the Process Validations phase.
   
• rendered : This is not a required attribute. It evaluates a boolean expression. Presence of this attribute specifies that whether the current component should be rendered in the Rendered Response phase or not or worked on any later form submission. The default value of this attribute is defined to true.
   
• required : This is not a required attribute. It evaluates a boolean value. If this attribute is present with value="true" it makes the checkboxes required for the user to check the checkbox.
   
• requiredMessage : This is not a required attribute. If this attribute is present it displays the textual validation message for the required (if used) attribute.
• validator : This is not a required attribute but, it is used when you are required to invoke a Validator to check the correctness of the given value on rendering of this component.
   
• validatorMessage : This is not a required attribute but, if it is used it displays a textual validation message and it also replaces the message coming from the Validator.
   
• value : This is not a required attribute. This attribute specifies the current value of the component.
• valueChangeListener : This is not a required attribute but, is used when you are required to invoke a valueChangeListener method to notified on the change of component's new value.
   
• accesskey : This is not a required attribute. This attribute is used to define an access key i.e create a shortcut key for the component which can be accessed by the combination (browser dependent combination) of Alt+accesskeyValue or Alt+Shift+accesskeyValue. When this key combination is pressed the focus will be transferred to the current element.
   
• border : This is not a required attribute. This attribute is used to specify the width of table's border inside which the options list will be contained.
• collectionType : This is not a required attribute. This attribute is used to specify the name of class of Collection type i.e. fully qualified name of class implementing java.util.Collection.
   
• dir : This is not a required attribute. This attribute evaluates to the java.lang.String value which suggests the direction for the text that doesn't inherit the property of maintaining a direction (directionality). The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
   
• disabled : This is not a required attribute. It evaluates a boolean value which presence specifies that whether this component will be participated in the form submission or be get focused or not.
   
• disabledClass : This is not a required attribute. This attribute is used to use the CSS style class on the disabled options.
• enabledClass : This is not a required attribute. This attribute is used to use the CSS style class on the enabled options.
• hideNoSelectionOption : This is not a required attribute. This attribute is used for hiding the options that are marked as 'no selection option'.
• label : This is not a required attribute but, is used to specify the user presentable name for the current component.
• lang : This is not a required attribute but, is used specify the language code.
• layout : This is not a required attribute. This attribute is used to specify that how the options will be displayed i.e. vertically or horizontally. The default value of this attribute is 'lineDirection' (for horizontally view) and for the vertical view of options you can give the value 'pageDirection'.
• onblur : This is not a required attribute. This attribute is used to execute a Javascript code, on the lossing of focus of the element.
• onchange : This is not a required attribute. This attribute is used to execute a Javascript code, on lossing of focus of the element and on getting focus its value has been changed.
   
• onclick : This is not a required attribute. This attribute is used to execute a Javascript code, on clicking over the element by a pointer button.
• ondblclick : This is not a required attribute. This attribute is used to execute a Javascript code, on double clicking over the element by a pointer button.
• onfocus : This is not a required attribute. This attribute is used to execute a Javascript code, on getting focus by the element.
• onkeydown : This is not a required attribute. This attribute is used to execute a Javascript code, on the pressing down of key onto the element.
• onkeypress : This is not a required attribute. This attribute is used to execute a Javascript code, on the pressing down of key and released onto the element
• onkeyup : This is not a required attribute. This attribute is used to execute a Javascript code, on the releasing of key over the element.
• onmousedown : This is not a required attribute. This attribute is used to execute a Javascript code, on pressing down of the mouse pointer onto the element.
• onmousemove : This is not a required attribute. This attribute is used to execute a Javascript code, on moving of the mouse pointer over the element.
• onmouseout : This is not a required attribute. This attribute is used to execute a Javascript code, on moving of the mouse pointer away from the element.
• onmouseover : This is not a required attribute. This attribute is used to execute a Javascript code, on moving of the mouse pointer over the element.
• onmouseup : This is not a required attribute. This attribute is used to execute a Javascript code, on releasing of the mouse pointer button over the element.
• onselect : This is not a required attribute. This attribute is used to execute a Javascript code, on selection of text by the user inside the element.
• readonly : This is not a required attribute. This attribute evaluates an boolean expression which specifies that whether value of this element can be modified or not. However, if the readonly="true" elements will get the focus but the component's value will not be rendered.
   
• selectedClass : This is not a required attribute. This attribute is used to specify a CSS style to apply on the selected options.
• style : This is not a required attribute but, is used to specify the CSS style will be applied to this component when rendered.
• styleClass : This is not a required attribute but, is used to specify the applicable CSS style space-separated list to be applied at the time of rendering.
• tabindex : This is not a required attribute that evaluates to a java.lang.String value specifies the tabbing order value. This value must be an integer within the range 0 to 32767.
   
• title : This is optional attribute that evaluates a java.lang.String. This attribute is used to specify the title information which will be displayed as tooltip about markup elements.
   
• unselectedClass : This is not a required attribute. This attribute is used to specify a CSS style to apply on the unselected options.
• binding : This is not a required attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Example

This example is being given here will demonstrate you about how to use the JSF 2 h selectManyCheckbox tag in JSF applications. In this example you will see that how can you get the value generated by the map. For this I have created a JavaBeans for creating the options list through Map. Then created two JSF view pages into one of which is the input.xhtml where I have used the <h:selectManyCheckbox> tag and within this tag I have used the <f:selectItems> tag and in the other JSF view page used the <h:outputText> tag to display the checked item/s.

Directory Structure

JsfSelectManyCheckbox.java

package devmanuals;

import java.util.Map;
import java.util.Arrays;
import java.util.LinkedHashMap;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="selectCheckbox")
@RequestScoped
public class JsfSelectManyCheckbox {

public String[] fruit;

public String[] getFruit() {
return fruit;
}
public void setFruit(String[] fruit) {
this.fruit = fruit;
}
private static Map<String,Object> fruitName;
static{
fruitName = new LinkedHashMap<String,Object>();
fruitName.put("Apple", "Apple");
fruitName.put("Mango", "Mango1");
fruitName.put("Guava", "Guava");
fruitName.put("Grapes", "Grapes");
fruitName.put("PineApple", "PineApple");
}

public Map<String,Object> getFruitName() {
return fruitName;
}
public String getFruitNameArray(){
return Arrays.toString(fruit);
}
}

input.xhtml

<!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">

<head>
<title>JSF 2 h selectManyCheckbox Tag</title>
</head>
<body>
<h:form> 
<p>Select fruit from the given list :</p>
<h:selectManyCheckbox id="chkbox1" value="#{selectCheckbox.fruit}"
required="true" requiredMessage="check at least one 
checkbox" layout="pageDirection" border="1"
readonly="false">
<f:selectItems value="#{selectCheckbox.fruitName}"/>
</h:selectManyCheckbox>
<h:message for="chkbox1" style="color:red"/>
<br/><br/>
<h:commandButton value="submit" action="output" />
</h:form>
</body>
</html>

output.xhtml

<!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">

<head>
<title>JSF 2 h selectManyCheckbox Tag</title>
</head>
<body>
<f:view>
<h:outputText value="You have selected : #{selectCheckbox.fruitNameArray}" />
</f:view>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfHSelectManyCheckbox</display-name>
<welcome-file-list>
<welcome-file>input.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How To Run

After copying the above code paste them to the respective files or by downloading the code from Download Source Code then start your web server and then use the following link http://localhost:8181/jsfHSelectManyCheckbox/input.xhtml in the address bar of the web browser.

Output :

When you will execute the input.xhtml page you will get the output as follows :

When without checking anyone of the checkbox then the error message will be displayed (because of the use of required attribute) as follows :

When you will checked the anyone (here I have checked the Apple and Mango checkboxes) of the checkbox then the output will be as follows :

And the HTML source code will be look like as follows :

<!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">

<head>
<title>JSF 2 h selectManyCheckbox Tag</title>
</head>
<body>
<form id="j_idt3" name="j_idt3" method="post" action="/jsfHSelectManyCheckbox/input.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />

<p>Select fruit from the given list :</p><table border="1" id="j_idt3:chkbox1">
<tr>
<td>
<input name="j_idt3:chkbox1" id="j_idt3:chkbox1:0" value="Apple" type="checkbox" /><label for="j_idt3:chkbox1:0" class=""> Apple</label></td>
</tr>
<tr>
<td>
<input name="j_idt3:chkbox1" id="j_idt3:chkbox1:1" value="Mango1" type="checkbox" /><label for="j_idt3:chkbox1:1" class=""> Mango</label></td>
</tr>
<tr>
<td>
<input name="j_idt3:chkbox1" id="j_idt3:chkbox1:2" value="Guava" type="checkbox" /><label for="j_idt3:chkbox1:2" class=""> Guava</label></td>
</tr>
<tr>
<td>
<input name="j_idt3:chkbox1" id="j_idt3:chkbox1:3" value="Grapes" type="checkbox" /><label for="j_idt3:chkbox1:3" class=""> Grapes</label></td>
</tr>
<tr>
<td>
<input name="j_idt3:chkbox1" id="j_idt3:chkbox1:4" value="PineApple" type="checkbox" /><label for="j_idt3:chkbox1:4" class=""> PineApple</label></td>
</tr>
</table>
<br /><br /><input type="submit" name="j_idt3:j_idt8" value="submit" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVSQWsTQRR+3STVhCi11dz0IEUQZJYiPWgQE2xDglsNpILFg0420+6ks7vjzNtk0kNB8AcInoSKVw/e/AXiQRAU9Oh/8OjdmU1setCDD+Yx+3be+77vvffuJ5SkVnBuSEeUZMgFaVMdbVFZOvXjw8fak28F8FpQESkdtGiIqepAGSPFdJSKgZG3G+CsOj5t/ZI9BYSzw8d8gNdvhtF+PzVrmYKVR0FeX9Bkj9zvD1mI9RdfH75Z0leFB2CkTSxKawiL0+TsKRxCwYZLLjz/OlRAXClDdmnINAnTWKYJS5A86Nz5c1/tqlQyhZO7bKJhZssWR1luxzw2kyw++dOCVyii4v0MmdYOEmbyFnN57iwgXLKYRGfJjIHzgqEmzW436Gxu2Gau/+MFj6UgG2yXZgJb0+BqU0ox2U73WfLr7bWdo8awUXVcxjWo+jyRGRITYSws8g2//fyyMbYD6//Xga7iI4rspFYnroxwfq53O6LYVKxnedp5zbehqRSdBFyjefb94qtP9HUBFjpQ1PyA5WPzxkXnbdKVv7PqocVu22VhqkdHTO18fn/r5dGXLQ+8AMqhoFrfozFDWM53xHez8XuWVrJXD6Cibc4gr4FQm77gqd9jilPBD2hfsLqRcuQEreQzuyCdP+PGWXK7tHa8PJ6U5jd3fIrx8AIAAA==" autocomplete="off" />
</form>
</body>
</html>