Tomahawk selectManyCheckbox tag

It is used to provide the user to select many items from a list of options. The user can select one or more options. This supports two layouts "lineDirection" and "pageDirection". layout determines whether the checkboxes are laid out horizontally or vertically. lineDirection is the default layout. lineDirection sets the checkboxes in the horizontal direction of the page and pageDirection is used to set the checkboxes in vertical direction of the page. f:selectItem or f:selectItems are used to provide a list of available options. selectManyCheckbox renders these options in a table where each option is set to one cell. Each cell contains the checkbox and label of the option. The value attribute of this tag must be value binding expression. This value can be bound to data type of java like primitive array, object array, List. It also provides an attribute layoutwidth. This attribute takes integer value that is used to specify the no. of checkbox rows if layout is lineDirection and no. of columns if layout is pageDirection.

Code Description : In this code, the index attribute is to identify the item to select for display.

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>

<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>t:selectManyCheckbox example</title>
<style type="text/css">
<!--
body{
background-color:#fff2f2;
margin-top:30;
}
-->
</style>
</head>
<body >
<h:form><center>
<t:selectManyCheckbox id="smc" layoutWidth="3" 
                      disabled="false" 
                      title="this is 'selectManyCheckbox' demo"
                      layout="lineDirection"> 
  <f:selectItem id="si1" itemLabel="Thums Up" itemValue="11" />
  <f:selectItem id="si2" itemLabel="Limca" itemValue="22" />
  <f:selectItem id="si3" itemLabel="Pepsi" itemValue="33" />
  <f:selectItem id="si4" itemLabel="Sprite" itemValue="44" />
  <f:selectItem id="si5" itemLabel="Frooti" itemValue="55" />
  <f:selectItem id="si6" itemLabel="Coca-Cola" itemValue="66" />
</t:selectManyCheckbox><br>
</center></h:form>
</body>
</html>
</f:view>

Rendered Output :

Html Source Code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<title>t:selectManyCheckbox example</title>
<style type="text/css">
<!--
body{
background-color:#fff2f2;
margin-top:30;
}
-->
</style>
</head>
<body >
<form id="_idJsp0" name="_idJsp0" method="post" 
action="/tomahawk_tags/pages/selectManyCheckbox.jsf" 
enctype="application/x-www-form-urlencoded"><center>
<table id="_idJsp0:smc">
<tr><td><label>
<input type="checkbox" name="_idJsp0:smc" value="11" 
title="this is 'selectManyCheckbox' demo" />
&#160;Thums Up
</label></td><td><label>
<input type="checkbox" name="_idJsp0:smc" value="44"
 title="this is 'selectManyCheckbox' demo" />
&#160;Sprite</label></td></tr><tr><td><label>
<input type="checkbox" name="_idJsp0:smc" value="22"
 title="this is 'selectManyCheckbox' demo" />
&#160;Limca</label></td><td><label>
<input type="checkbox" name="_idJsp0:smc" value="55"
 title="this is 'selectManyCheckbox' demo" />
&#160;Frooti</label></td></tr><tr><td><label>
<input type="checkbox" name="_idJsp0:smc" value="33"
 title="this is 'selectManyCheckbox' demo" />
&#160;Pepsi</label></td><td><label>
<input type="checkbox" name="_idJsp0:smc" value="66"
 title="this is 'selectManyCheckbox' demo" />
&#160;Coca-Cola</label></td></tr></table><br>
</center><input type="hidden" name="_idJsp0_SUBMIT" 
value="1" />
<input type="hidden" name="javax.faces.ViewState" 
id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmE
ubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAAN0AAE1cHQAHS9w
YWdlcy9zZWxlY3RNYW55Q2hlY2tib3guanNw" /></form>
<!-- MYFACES JAVASCRIPT -->

</body>
</html>

This tag contains attributes given below :

id : This is the value which is used to uniquely identify the component within the closest container like form or subview. The main thing to remember is that its value must be a static value.
binding : This attribute is used to specify the property of the backing bean with which this component instance is to be bound.
rendered : Its default value is true. If this attribute is set to true then this component is presented in the page to the user. If false, then this component is not rendered.
value : The initial value of the component is set to this attribute.
converter : This attribute is used to specify the converter for the component.
immediate : This attribute is a boolean attribute that is used to identify the phase during which the value change event should be fired. In normal processing of the event, if immediate attribute is not set to true, the value change event is fired during the invoke application phase but if immediate attribute is set to true then the event is fired at the end of apply request value phase.
required : This is a boolean attribute. If it is set to true then it is necessary for the component to have the value otherwise an error message is rendered to the user for the component.
validator : It takes the method binding expression. This expression represents the validator method. This method is called at the time of validation of the component.
valueChangeListener : This also takes a method binding expression. This expression represents value change listener method. This method will be called when new value is set for this component. you can change the phase of the life cycle when this method should be fired by the use of immediate attribute discussed above.
dir : It is used to set the direction of the text to be displayed. It can take two values LTR(left to right) and RTL (right to left).
lang : It is used to set the base language of the component when displayed.
style : It is used to set the CSS style definition for the component.
title : It is the standard html attribute. It is used to set the tooltip text for this component.
styleClass : It is used to set the CSS class for the component. It is same as html class attribute.
onclick : Script to be invoked when the element is clicked.
ondblclick : It is used for Java Script code to be invoked when the element is double-clicked.
onmousedown : It is used for Java Script code to be invoked when the pointing device is pressed over this element.
onmouseup : It is used for Java Script code to be invoked when the pointing device is released over this element.
onmouseover : It is used for Java Script code to be invoked when the pointing device is moved into this element.
onmousemove : It is used for Java Script code to be invoked when the pointing device is moved while it is in this element.
onmouseout : It is used for Java Script code to be invoked when the pointing device is moved out of this element.
onkeypress : It is used for Java Script code to be invoked when a key is pressed over this element.
onkeydown : It is used for Java Script code to be invoked when a key is pressed down over this element.
onkeyup : It is used for Java Script code to be invoked when a key is released over this element.
accesskey : This is standard html attribute. It is used to set the access key for the element which is used to send the focus to the element when pressed.
alt : This is used as an alternate text that is displayed when browser is not able to display the element.
disabled : Its a boolean attribute. This is used to disable the element to receive focus, when it is set to true.
onblur : This attribute sets JavaScript code to execute when the component loses the focus.
onfocus : This attribute sets JavaScript code to execute when the component receives the focus.
onchange : This attribute sets JavaScript code to execute when the element is modified.
onselect : This attribute sets JavaScript code to execute when the element is selected.
readonly : Its a boolean attribute. It is used to indicate the user that its value can't be modified, if it is set to true.
tabindex : This is a standard html attribute. It is used to set the order of receiving the focus on the movement of TAB key by the user.
layout : This attribute is used to set the layout of the component. It can take two values "lineDirection" and "pageDirection".
enabledClass : This specifies the CSS class to be used for the enabled choices.
disabledClass : This specifies the CSS class to be used for the enabled choices.
escape : This specifies whether the rendered markup should be rendered.
layoutWidth : This attribute takes integer value that is used to specify the no. of checkbox rows if layout is lineDirection and no. of columns if layout is pageDirection.
enabledOnUserRole : If the current user has one of the roles listed in the enabledOnUserRole attribute then enabling or disabling of the component is decided on the base of "disabled" attribute. If disabled attribute is set to true then component is disabled otherwise enabled. If the user is not in the above list then the component is rendered disabled.
visibleOnUserRole : If the current user has one of the roles listed in the visibleOnUserRole attribute then processing of the component is decided on the base of "rendered" attribute. If the rendered attribute is set to true then component is not rendered otherwise displayed on the page. On the other hand if the current user is not in the above list then the component is not processed.
forceId : This is a boolean attribute with default value false. If this attribute is set to true, the tag is forced to render the id for the component exactly as mentioned in the id attribute of the tag. The benefit of this attribute is that we can reference component by id in the javascript. If we don't use this attribute with the true value then the id for the component is presented in different format.
forceIdIndex : This is a boolean attribute with default value true. If this value is true then the the component displays the index number in its id value if the component is in a list. If this attribute is set to false then this component will not append index number as suffix . If forcrId is set to false then its value is ignored.
displayValueOnly : This is boolean attribute with the default value false. If this value is set to true then only the value of the component is rendered not the widget of the component.
displayValueOnlyStyle : This attribute is used to specify the style used when displayValueOnly is true.
displayValueOnlyStyleClass : This attribute is used to specify the style class used when displayValueOnly is true.

Tomahawk selectManyCheckbox tag

Tomahawk selectManyCheckbox tag

Tomahawk selectManyCheckbox tag

Tutorials