Available since version 0.9.4.
Class | Extends |
---|---|
org.apache.royale.jewel.RadioButton{:target=‘_blank’} | org.apache.royale.jewel.supportClasses.button.SelectableButtonBase{:target=‘_blank’} |
Note: This component is currently only available for JavaScript.
The Jewel RadioButton control lets the user choose one of a set of options. For each option there is a selectable circle and text that describes the option. Radio buttons always appear in groups of two or more with the same groupName
property. When you select one radio button, any other button you may have previously selected in the group becomes deselected.
In MXML declare a RadioButton
like this:
<j:RadioButton/>
In ActionScript we can do the same in the following way:
var radioButton:RadioButton = new RadioButton(); parent.addElement(radioButton);
where parent
is the container where the control will be added.
Here is an example for this control:
code here{:target=‘_blank’}
Check the Reference of org.apache.royale.jewel.RadioButton{:target=‘_blank’} for a more detailed list of properties and methods.
PROPERTY | Type | Description |
---|---|---|
selected | Boolean | true if the check mark is displayed, false otherwise. Only one RadioButton can be selected at a time in the same group. |
selectedValue | Object | The currently selected value in the group. |
text | String | The string used as a label. |
value | String | The associated value. |
groupName | String | The name of the group to which this radio button belongs. |
None.
The RadioButton
has a change event of type org.apache.royale.events.Event{:target=‘_blank’}. This event is dispatched when the control is selected or deselected by the user. Notice that programmatic changes will not trigger this event.
Since this component is in essence a button, it has click event as well. When the user clicks the radio button, it dispatches a normal click event.
You can attach callback listeners to the change event in MXML as follows:
<j:RadioButton text="A RadioButton" value="somevalue" change="changeHandler(event)"/>
the change event will use the changeHandler
callback function you provide in ActionScript:
<fx:Script> <![CDATA[ private function changeHandler(event:Event):void { trace('RadioButton value is: ' + event.target.value, ' and selected state is: ' + event.target.selected); } ]]> </fx:Script>
When the user clicks or presses the a radio button a message will be logged in the console showing the value
and selected
property values.
In ActionScript we can add an event handler this way:
var radioButton:RadioButton = new RadioButton(); radioButton.text = "A RadioButton"; radioButton.value = "somevalue"; radioButton.addEventListener('change', changeHandler); parent.addElement(radioButton);
Unlike other components in Royale, the Jewel RadioButton
does not have beads for View, Controller or Model in the JavaScript platform.
On the other hand, you can add other common Jewel control beads to it to provide more functionality. Many Jewel controls share these beads.
Bead Type | Implementation | Description |
---|---|---|
Disabled{:target=‘_blank’} | org.apache.royale.core.IBead{:target=‘_blank’} | This bead lets you disable and enable a Jewel control. |
Other related Jewel components are: