Apache Flex 4.16.0 API Reference | All Packages | All Classes | Index | Frames No Frames |
RadioButtonGroup

Package | spark.components
Class | public class RadioButtonGroup
Inheritance | RadioButtonGroup flash.events.EventDispatcher
Implements | IMXMLObject

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The RadioButtonGroup component defines a group of RadioButton components that act as a single mutually exclusive component; therefore, a user can select only one RadioButton component at a time. The `id` property is required when you use the `<s:RadioButtonGroup>` tag to define the group name. Any `<s:RadioButton>` component added to this group will have this group name.

Notice that the RadioButtonGroup component is a subclass of EventDispatcher, not UIComponent, and implements the IMXMLObject interface. All other Flex visual components implement the IVisualElement interface. The RadioButtonGroup component declaration must be contained within the `<Declarations>` tag since it is not assignable to IVisualElement.

To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers.

MXML Syntax Show MXML Syntax
Hide MXML Syntax

The `<s:RadioButtonGroup>` tag inherits all of the tag attributes of its superclass, and adds the following tag attributes:

      <s:RadioButtonGroup
        Properties
        enabled="true"
        selectedValue="null"
        selection="null"
         Events
        change="No default"
        itemClick="No default"
        valueCommit="No default"
      />

View the examples

See also

spark.components.RadioButton

Public Properties

| Property | Defined By
--- | --- | ---
|  | enabled : Boolean Determines whether selection is allowed. | RadioButtonGroup
|  | numRadioButtons : int [read-only] The number of RadioButtons that belong to this RadioButtonGroup. | RadioButtonGroup
|  | selectedIndex : int The index of the selected RadioButton component in the group. | RadioButtonGroup
|  | selectedValue : Object The value property of the selected RadioButton component in the group, if it has been set, otherwise, the label property of the selected RadioButton. | RadioButtonGroup
|  | selection : RadioButton Contains a reference to the currently selected RadioButton component in the group. | RadioButtonGroup

Public Methods

| Method | Defined By
--- | --- | ---
|  | RadioButtonGroup(document:IFlexDisplayObject = null) Constructor. | RadioButtonGroup
|  | getRadioButtonAt(index:int):RadioButton Returns the RadioButton component at the specified index. | RadioButtonGroup
|  | initialized(document:Object, id:String):void Implementation of the IMXMLObject.initialized() method to support deferred instantiation. | RadioButtonGroup

Events

| Event | Summary | Defined By
--- | --- | --- | ---
|  | change | Dispatched when the value of the selected RadioButton component in this group changes. | RadioButtonGroup
|  | itemClick | Dispatched when a user selects a RadioButton component in the group. | RadioButtonGroup
|  | valueCommit | Dispatched when values are changed programmatically or by user interaction. | RadioButtonGroup

Property Detail

enabled | property

`enabled:Boolean`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Determines whether selection is allowed. Note that the value returned only reflects the value that was explicitly set on the `RadioButtonGroup` and does not reflect any values explicitly set on the individual RadioButtons.

The default value is `true`.

Implementation
`public function get enabled():Boolean`
`public function set enabled(value:Boolean):void`

numRadioButtons | property |

`numRadioButtons:int` [read-only]

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The number of RadioButtons that belong to this RadioButtonGroup.

The default value is `"0"`.

This property can be used as the source for data binding.

Implementation
`public function get numRadioButtons():int`

selectedIndex | property |

`selectedIndex:int`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.10

Runtime Versions : | Flash Player 11.1, AIR 3.4

The index of the selected RadioButton component in the group. If a RadioButton is not selected, this property is `-1`.

The default value is `-1`.

This property can be used as the source for data binding.

Implementation
`public function get selectedIndex():int`
`public function set selectedIndex(value:int):void`

selectedValue | property |

`selectedValue:Object`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The `value` property of the selected RadioButton component in the group, if it has been set, otherwise, the `label` property of the selected RadioButton. If no RadioButton is selected, this property is `null`.

If you set `selectedValue`, Flex selects the first RadioButton component whose `value` or `label` property matches this value.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get selectedValue():Object`
`public function set selectedValue(value:Object):void`

selection | property |

`selection:RadioButton`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Contains a reference to the currently selected RadioButton component in the group. You can access this property in ActionScript only; it is not settable in MXML. Setting this property to `null` deselects the currently selected RadioButton component. A change event is not dispatched.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get selection():RadioButton`
`public function set selection(value:RadioButton):void`
Constructor Detail

RadioButtonGroup | () | Constructor

`public function RadioButtonGroup(document:IFlexDisplayObject = null)`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Constructor.

Parameters

| `document:IFlexDisplayObject` (default = `null`)`` — In simple cases where a class extends EventDispatcher, the `document` parameter should not be used.

See also

flash.events.EventDispatcher
Method Detail

getRadioButtonAt | () | method

`public function getRadioButtonAt(index:int):RadioButton`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Returns the RadioButton component at the specified index.

Parameters

| `index:int` — The 0-based index of the RadioButton in the RadioButtonGroup.

Returns

| `RadioButton` — The specified RadioButton component if index is between 0 and `numRadioButtons` - 1. Returns `null` if the index is invalid.

See also

numRadioButtons

initialized | () | method |

`public function initialized(document:Object, id:String):void`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Implementation of the `IMXMLObject.initialized()` method to support deferred instantiation.

Parameters

| `document:Object` — The MXML document that created this object.
| `id:String` — The identifier used by document to refer to this object. If the object is a deep property on document, `id` is null.

See also

mx.core.IMXMLObject
Event Detail

change | Event

Event Object Type: `flash.events.Event`
Event.type property = `flash.events.Event.CHANGE`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Dispatched when the value of the selected RadioButton component in this group changes.

itemClick | Event |

Event Object Type: `mx.events.ItemClickEvent`
ItemClickEvent.type property = `mx.events.ItemClickEvent.ITEM_CLICK`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Dispatched when a user selects a RadioButton component in the group. You can also set a handler for individual RadioButton components. This event is dispatched only when the user interacts with the radio buttons by using the mouse.

The `ItemClickEvent.ITEM_CLICK` constant defines the value of the `type` property of the event object for an `itemClick` event.

The properties of the event object have the following values:

Property | Value
--- | ---
`bubbles` | false
`cancelable` | false
`currentTarget` | The Object that defines the event listener that handles the event. For example, if you use `myButton.addEventListener()` to register an event listener, myButton is the value of the `currentTarget`.
`index` | The index of the navigation item that was clicked.
`item` | The item in the data provider of the navigation item that was clicked.
`label` | The label of the navigation item that was clicked.
`relatedObject` | The child object that generated the event.
`target` | The Object that dispatched the event; it is not always the Object listening for the event. Use the `currentTarget` property to always access the Object listening for the event.

valueCommit | Event |

Event Object Type: `mx.events.FlexEvent`
FlexEvent.type property = `mx.events.FlexEvent.VALUE_COMMIT`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Dispatched when values are changed programmatically or by user interaction.

Because a programmatic change triggers this event, make sure that any `valueCommit` event handler does not change a value that causes another `valueCommit` event. For example, do not change the`selectedValue` property or `selection` property in a `valueCommit` event handler.

The `FlexEvent.VALUE_COMMIT` constant defines the value of the `type` property of the event object for a `valueCommit` event.

The properties of the event object have the following values:

Property | Value
--- | ---
`bubbles` | false
`cancelable` | false
`currentTarget` | The Object that defines the event listener that handles the event. For example, if you use `myButton.addEventListener()` to register an event listener, myButton is the value of the `currentTarget`.
`target` | The Object that dispatched the event; it is not always the Object listening for the event. Use the `currentTarget` property to always access the Object listening for the event.

Examples
RadioButtonGroupExample.mxml

    <?xml version="1.0" encoding="utf-8"?>
    <!--

      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.

    -->
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx">
        <fx:Script>
            <![CDATA[

                import mx.controls.Alert;
                import mx.events.ItemClickEvent;

                private function handlePayment(event:ItemClickEvent):void {
                    if (event.currentTarget.selectedValue == "check") {
                        Alert.show("You opted to pay by check.");
                    } else if (event.currentTarget.selectedValue == "credit") {
                        Alert.show("You opted to pay by credit card.");
                    }
                }
            ]]>
        </fx:Script>

        <fx:Declarations>
            <s:RadioButtonGroup id="paymentType" itemClick="handlePayment(event);"/>
        </fx:Declarations>
        <s:VGroup paddingLeft="10" paddingTop="10">
            <s:RadioButton groupName="paymentType"
                           id="payCheck"
                           value="check"
                           label="Pay by check"
                           width="150"/>
            <s:RadioButton groupName="paymentType"
                           id="payCredit"
                           value="credit"
                           label="Pay by credit card"
                           width="150"/>
        </s:VGroup>
    </s:Application>

Sun Mar 5 2017, 03:42 PM +11:00