< Jewel Components list

Jewel RadioButton

Reference

Available since version 0.9.4.

^{Note: This component is currently only available for JavaScript.}

Overview

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.

Example of use

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

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.RadioButton for a more detailed list of properties and methods.

Properties

Methods

None.

Relevant Events

The RadioButton has a change event of type org.apache.royale.events.Event. 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);

Relevant Beads

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.

Common Beads

More examples

• Creating a group of Jewel radio buttons

Related controls

Other related Jewel components are:

• CheckBox