SelectOneRadio 2.x

TOCSTART

• Key Features
• Basic Configuration
• Customizing Styles
• Client-Side Events
• Client-Side API

TOCEND

The SelectOneRadio component supports all of the features of the standard JSF RadioButton component and extends it with some additional features like customizing radio button images, rollover and focused styles and so on.

Online Demo

Key Features

• All features of the standard SelectOneRadio component
• Customizing appearance of radio buttons with images
• Extended styling

Basic Configuration

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

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

<o:selectOneRadio value="#{RadioPanel.radioGroupExample}">
  <f:selectItem value="1" itemLabel="Option 1"/>
  <f:selectItem value="2" itemLabel="Option 2"/>
  <f:selectItem value="3" itemLabel="Option 3"/>
</o:selectOneRadio>

It is possible to can customize the look of component's radio buttons with images. This can be done using the following attributes:

Attribute	Description
selectedImageUrl	URL of the image file corresponding to a selected radio button.
unselectedImageUrl	URL of the image file corresponding to an unselected radio button.
rolloverSelectedImageUrl	URL of the image file corresponding to a selected radio button in the rollover state.
rolloverUnselectedImageUrl	URL of the image file corresponding to an unselected radio button in the rollover state.
pressedSelectedImageUrl	URL of the image file corresponding to a selected radio button in the pressed state.
pressedUnselectedImageUrl	URL of the image file corresponding to an unselected radio button in the pressed state.
disabledSelectedImageUrl	URL of the image file corresponding to a selected radio button in the disabled state.
disabledUnselectedImageUrl	URL of the image file corresponding to an unselected radio button in the disabled state.

When you click on any of the options 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 SelectOneRadio 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 SelectOneRadio component in the enabled state.
disabledStyle and disabledClass	A style is applied to the entire SelectOneRadio component in the disabled state.
focusedStyle and focusedClass	A style is applied to the entire SelectOneRadio component when it is focused.
rolloverStyle and rolloverClass	A style is applied to the entire SelectOneRadio component in the rollover state.

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

<o:selectOneRadio id="selectOneRadioStyled"
                  value="#{RadioPanel.radioGroupExample}"
       enabledClass="enClass" enabledStyle="background-color: #B0AFFF;"
       disabledClass="desClass" disabledStyle="background-color: #6F6F6F;"
       selectedClass="selClass" selectedStyle="border: 1px solid #7FD2FF;"
       unselectedClass="unselClass" unselectedStyle="border: 1px solid #FF4F56;"
       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:selectOneRadio>

You can also apply styles to the labels of the SelectOneRadio 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 SelectOneRadio component when it is in a focused state.
selectedItemStyle and selectedItemClass	A style is applied to the label of the given item of the SelectOneRadio component when it is selected.
rolloverItemStyle and rolloverItemClass	A style is applied to the label of the given item of the SelectOneRadio component when it is in a rollover state.
pressedItemStyle and pressedItemClass	A style is applied to the label of the given item of the SelectOneRadio component when it is pressed.

Client-Side Events

The SelectOneRadio 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 SelectOneRadio component are listed in the following table:

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