SelectOneRadio |
||||||||||||||||||||||||||||||||||||||||||||||||
Developer’s Guide Home
Installation and Configuration Common Concepts Components Index Border Layout Panel Calendar Chart Command Button Command Link Confirmation Data Table Date Chooser Day Table Drop Down Field Dynamic Image Folding Panel For Each Graphic Text Hint Label Input Text Input Textarea Layered Pane Popup Layer Popup Menu Select Boolean Checkbox Select Many Checkbox Select One Radio Spinner Suggestion Field Tabbed Pane Tab Set Tree Table Two List Selection Window Focus Load Bundle Scroll Position Ajax Framework Validation Framework Tag Reference API Reference |
Key Features
Basic ConfigurationThe 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:
When you click on any of the options its view changes appropriately depending on its state. Customizing StylesYou 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:
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:
Client-Side EventsThe 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 APIAll client-side API methods for the SelectOneRadio component are listed in the following table:
|
|||||||||||||||||||||||||||||||||||||||||||||||
© 2009 TeamDev Ltd. | ![]() |