Licensed to the Apache Software Foundation (ASF) under one or more

contributor license agreements. See the NOTICE file distributed with

this work for additional information regarding copyright ownership.

The ASF licenses this file to You under the Apache License, Version 2.0

(the “License”); you may not use this file except in compliance with

the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an “AS IS” BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

layout: docpage title: Jewel RadioButton description: The Jewel RadioButton control lets the user choose one of a set of options. permalink: /component-sets/jewel/radiobutton

< Jewel Components list

Jewel RadioButton

Reference

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.

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{:target=‘_blank’}

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.RadioButton{:target=‘_blank’} for a more detailed list of properties and methods.

Properties

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.

Methods

None.

Relevant Events

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);

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

Bead Type	Implementation	Description
Disabled{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	This bead lets you disable and enable a Jewel control.

More examples

Creating a group of Jewel radio buttons{:target=‘_blank’}

Related controls

Other related Jewel components are:

CheckBox