SelectManyCheckbox

The SelectManyCheckbox component supports all of the features of the standard JSF Checkbox component and extends it with some additional features like customizing checkbox images, rollover and focused styles and so on.


API Reference | Tag Reference
Online Demo

Key Features

Basic Configuration

The SelectManyCheckbox component can be added to a page using the <o:selectManyCheckbox> tag. This tag is just an extended version of the standard <h:selectManyCheckbox> tag. Therefore, you can safely replace the standard SelectManyCheckbox components with OpenFaces SelectManyCheckbox components, which provide you with an additional functionality. Just like in the standard <h:selectManyCheckbox> the value attribute lets you specify the current value of the component.

The following example shows a definition of a simple SelectManyCheckbox component with three items.

<o:selectManyCheckbox value="#{ManyCheckboxTest.CheckboxGroupExample}">
  <f:selectItem value="1" itemLabel="Option 1"/>
  <f:selectItem value="2" itemLabel="Option 2"/>
  <f:selectItem value="3" itemLabel="Option 3"/>
</o:selectManyCheckbox>

You can customize various states of each Checkbox by applying images to it. The images are defined by the following attributes:

Attribute Description
selectedImageUrl URL to the image file, corresponding to the selected state of the SelectManyCheckbox.
unselectedImageUrl URL to the image file, corresponding to the unselected state of the SelectManyCheckbox.
rolloverSelectedImageUrl URL to the image file, corresponding to the rolled over state of the selected component.
rolloverUnselectedImageUrl URL to the image file, corresponding to the rolled over state of the unselected component.
pressedSelectedImageUrl URL to the image file, corresponding to the pressed state of the selected SelectManyCheckbox.
pressedUnselectedImageUrl URL to the image file, corresponding to the pressed state of the unselected SelectManyCheckbox.
disabledSelectedImageUrl URL to the image file, corresponding to the disabled state of the selected SelectManyCheckbox.
disabledUnselectedImageUrl URL to the image file, corresponding to the disabled state of the unselected SelectManyCheckbox.

When you click on any of the checkboxes its view changes appropriately depending on its state.
You can also specify a custom style for this component as described below.

Customizing Styles

You can apply styles for the SelectManyCheckbox when it is in the enabled or disabled state, selected or unselected state, focused or rollover state.

The table below lists all style attributes:

Attribute Description
enabledStyle and enabledClass A style is applied to the entire SelectManyCheckbox component in the enabled state.
disabledStyle and disabledClass A style is applied to the entire SelectManyCheckbox component in the disabled state.
focusedStyle and focusedClass A style is applied to the entire SelectManyCheckbox component when it is focused.
rolloverStyle and rolloverClass A style is applied to the entire SelectManyCheckbox component in the rollover state.

The following example demonstrates the usage of style-related attributes of the SelectManyCheckbox component:

<o:selectManyCheckbox id="selectManyCheckboxStyled"
                  value="#{ManyCheckboxTest.CheckboxGroupExample}"
       enabledClass="enClass" enabledStyle="background-color: #B0AFFF;"
       disabledClass="desClass" disabledStyle="background-color: #6F6F6F;"
       focusedClass="focClass" focusedStyle="border: 1px solid #DDDF29;"
       rolloverClass="rollovClass" rolloverStyle="border: 1px solid #33DF29;">
  <f:selectItem value="1" itemLabel="Option 1"/>
  <f:selectItem value="2" itemLabel="Option 2"/>
  <f:selectItem value="3" itemLabel="Option 3"/>
</o:selectManyCheckbox>

You can also apply styles to the labels of the SelectManyCheckbox items. You can specify their view in the focused, selected, rollover, and pressed state.

The table below lists all style attributes:

Attribute Description
focusedItemStyle and focusedItemClass A style is applied to the label of the given item of the SelectManyCheckbox component when it is in a focused state.
selectedItemStyle and selectedItemClass A style is applied to the label of the given item of the SelectManyCheckbox component when it is selected.
rolloverItemStyle and rolloverItemClass A style is applied to the label of the given item of the SelectManyCheckbox component when it is in a rollover state.
pressedItemStyle and pressedItemClass A style is applied to the label of the given item of the SelectManyCheckbox component when it is pressed.

Client-Side Events

The SelectManyCheckbox component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove, onselect, onchange, onfocus, onblur, onkeyup, onkeydown, onkeypress.

Client-Side API

All client-side API methods for the SelectManyCheckbox component are listed in the following table:

Method Description
getValue() Returns a value currently entered in the SelectManyCheckbox component on which this function is invoked.
setValue(text) Sets a value for the SelectManyCheckbox component.
OpenFaces