Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/10/detecting-when-the-number-of-radio-buttons-changes-in-a-radio-button-group-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function init():void {
                radioGroup.addEventListener("numRadioButtonsChanged", radioGroup_numRadioButtonsChanged);
            }

            private function radioGroup_numRadioButtonsChanged(evt:Event):void {
                var rb:RadioButton = radioGroup.getRadioButtonAt(radioGroup.numRadioButtons-1);
                var alert:Alert = Alert.show(evt.toString(), "label:" + rb.label);
                alert.status = "numRadioButtons:" + radioGroup.numRadioButtons;
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="radioGroup" />

    <mx:HBox>
        <mx:RadioButton id="radioButton1" label="Red" group="{radioGroup}" />
        <mx:RadioButton id="radioButton2" label="Orange" group="{radioGroup}" />
        <mx:RadioButton id="radioButton3" label="Yellow" group="{radioGroup}" />
        <mx:RadioButton id="radioButton4" label="Green" group="{radioGroup}" />
        <mx:RadioButton id="radioButton5" label="Blue" group="{radioGroup}" />
    </mx:HBox>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/setting-the-button-label-placement-on-a-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;

            private const arr:Array = [ButtonLabelPlacement.LEFT,
                                        ButtonLabelPlacement.RIGHT,
                                        ButtonLabelPlacement.TOP,
                                        ButtonLabelPlacement.BOTTOM];
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButton id="radioButton"
            label="RadioButton"
            labelPlacement="{comboBox.selectedItem}" />

</mx:Application>

View source is enabled in the following example.

You can also set the labelPlacement property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/setting-the-button-label-placement-on-a-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;
            import mx.events.ListEvent;

            private const arr:Array = [ButtonLabelPlacement.LEFT,
                                        ButtonLabelPlacement.RIGHT,
                                        ButtonLabelPlacement.TOP,
                                        ButtonLabelPlacement.BOTTOM];

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                radioButton.labelPlacement = value;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButton id="radioButton"
            label="RadioButton" />

</mx:Application>

 

The following example shows how you can detect when the enabled property changes by using the enabledChanged event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/25/detecting-when-a-radiobuttongroup-has-been-enabled-or-disabled-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function init():void {
                radioGroup.addEventListener("enabledChanged",
                            radioGroup_enabledChanged);
            }

            private function radioGroup_enabledChanged(evt:Event):void {
                Alert.show("RadioButtonGroup enabled was changed",
                            "enabled: " + radioGroup.enabled);
            }

            private function checkBox_change(evt:Event):void {
                radioGroup.enabled = !radioGroup.enabled;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup" />

    <mx:HBox horizontalGap="54">
        <mx:RadioButton id="radioButton1"
                label="Red"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton2"
                label="Orange"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton3"
                label="Yellow"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton4"
                label="Green"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton5"
                label="Blue"
                group="{radioGroup}" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/25/detecting-when-a-radiobuttongroup-has-been-enabled-or-disabled-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.HBox;
            import mx.controls.Alert;
            import mx.controls.CheckBox;
            import mx.controls.RadioButton;
            import mx.controls.RadioButtonGroup;

            private var checkBox:CheckBox;
            private var radioGroup:RadioButtonGroup;
            private var radioButton1:RadioButton;
            private var radioButton2:RadioButton;
            private var radioButton3:RadioButton;
            private var radioButton4:RadioButton;
            private var radioButton5:RadioButton;

            private function init():void {
                checkBox = new CheckBox();
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "enabled:";
                formItem.addChild(checkBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                Application.application.addChildAt(appControlBar, 0);

                radioGroup = new RadioButtonGroup();
                radioGroup.addEventListener("enabledChanged", radioGroup_enabledChanged);

                radioButton1 = new RadioButton();
                radioButton1.label = "Red";
                radioButton1.group = radioGroup;

                radioButton2 = new RadioButton();
                radioButton2.label = "Orange";
                radioButton2.group = radioGroup;

                radioButton3 = new RadioButton();
                radioButton3.label = "Yellow";
                radioButton3.group = radioGroup;

                radioButton4 = new RadioButton();
                radioButton4.label = "Green";
                radioButton4.group = radioGroup;

                radioButton5 = new RadioButton();
                radioButton5.label = "Blue";
                radioButton5.group = radioGroup;

                var hBox:HBox = new HBox();
                hBox.setStyle("horizontalGap", 54);
                hBox.addChild(radioButton1);
                hBox.addChild(radioButton2);
                hBox.addChild(radioButton3);
                hBox.addChild(radioButton4);
                hBox.addChild(radioButton5);
                addChild(hBox);
            }

            private function radioGroup_enabledChanged(evt:Event):void {
                Alert.show("RadioButtonGroup enabled was changed",
                            "enabled: " + radioGroup.enabled);
            }

            private function checkBox_change(evt:Event):void {
                radioGroup.enabled = !radioGroup.enabled;
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:RadioButtonGroup id="radioGroup1" />
    <mx:RadioButtonGroup id="radioGroup2" />

    <mx:Form>
        <mx:FormItem label="keyboard enabled:"
                direction="horizontal">
            <mx:RadioButton id="radioButton1"
                    label="Red"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton2"
                    label="Orange"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton3"
                    label="Yellow"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton4"
                    label="Green"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton5"
                    label="Blue"
                    group="{radioGroup1}" />
        </mx:FormItem>
        <mx:FormItem label="keyboard disabled:"
                direction="horizontal">
            <comps:MyRadioButton id="radioButton6"
                    label="Red"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton7"
                    label="Orange"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton8"
                    label="Yellow"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton9"
                    label="Green"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton0"
                    label="Blue"
                    group="{radioGroup2}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

comps/MyRadioButton.as

/**
 * http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/
 */
package comps {
    import flash.events.KeyboardEvent;
    import mx.controls.RadioButton;

    public class MyRadioButton extends RadioButton {
        public function MyRadioButton() {
            super();
        }

        override protected function keyDownHandler(event:KeyboardEvent):void {
            // ignore
        }
    }
}

View source is enabled in the following example.

You can also override the keyDownHandler() method using a custom MXML component, as seen in the following example:

comps/MyRadioButton2.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ -->
<mx:RadioButton xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            override protected function keyDownHandler(event:KeyboardEvent):void {
                // ignore
            }
        ]]>
    </mx:Script>

</mx:RadioButton>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import comps.*;

            import mx.containers.FormItemDirection;
            import mx.containers.FormItem;
            import mx.containers.Form;
            import mx.controls.RadioButton;
            import mx.controls.RadioButtonGroup;

            private var radioGroup1:RadioButtonGroup;
            private var radioGroup2:RadioButtonGroup;

            private var radioButton1:RadioButton;
            private var radioButton2:RadioButton;
            private var radioButton3:RadioButton;
            private var radioButton4:RadioButton;
            private var radioButton5:RadioButton;

            private var radioButton6:MyRadioButton;
            private var radioButton7:MyRadioButton;
            private var radioButton8:MyRadioButton;
            private var radioButton9:MyRadioButton;
            private var radioButton0:MyRadioButton;

            private function init():void {
                radioGroup1 = new RadioButtonGroup();
                radioGroup2 = new RadioButtonGroup();

                // 1
                radioButton1 = new RadioButton();
                radioButton1.label = "Red";
                radioButton1.group = radioGroup1;
                // 2
                radioButton2 = new RadioButton();
                radioButton2.label = "Orange";
                radioButton2.group = radioGroup1;
                // 3
                radioButton3 = new RadioButton();
                radioButton3.label = "Yellow";
                radioButton3.group = radioGroup1;
                // 4
                radioButton4 = new RadioButton();
                radioButton4.label = "Green";
                radioButton4.group = radioGroup1;
                // 5
                radioButton5 = new RadioButton();
                radioButton5.label = "Blue";
                radioButton5.group = radioGroup1;

                // 6
                radioButton6 = new MyRadioButton();
                radioButton6.label = "Red";
                radioButton6.group = radioGroup2;
                // 7
                radioButton7 = new MyRadioButton();
                radioButton7.label = "Orange";
                radioButton7.group = radioGroup2;
                // 8
                radioButton8 = new MyRadioButton();
                radioButton8.label = "Yellow";
                radioButton8.group = radioGroup2;
                // 9
                radioButton9 = new MyRadioButton();
                radioButton9.label = "Green";
                radioButton9.group = radioGroup2;
                // 0
                radioButton0 = new MyRadioButton();
                radioButton0.label = "Blue";
                radioButton0.group = radioGroup2;

                var formItem1:FormItem = new FormItem();
                formItem1.label = "keyboard enabled:";
                formItem1.direction = FormItemDirection.HORIZONTAL;
                formItem1.addChild(radioButton1);
                formItem1.addChild(radioButton2);
                formItem1.addChild(radioButton3);
                formItem1.addChild(radioButton4);
                formItem1.addChild(radioButton5);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "keyboard disabled:";
                formItem2.direction = FormItemDirection.HORIZONTAL;
                formItem2.addChild(radioButton6);
                formItem2.addChild(radioButton7);
                formItem2.addChild(radioButton8);
                formItem2.addChild(radioButton9);
                formItem2.addChild(radioButton0);

                var form:Form = new Form();
                form.addChild(formItem1);
                form.addChild(formItem2);
                addChild(form);
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function radioGroup_itemClick(evt:ItemClickEvent):void {
                var now:String = new Date().toTimeString();
                lbl.text = evt.label + " (" + now + ")";
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="lbl" fontWeight="bold" />
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup"
            itemClick="radioGroup_itemClick(event);" />

    <mx:VBox>
        <mx:RadioButton id="radioButton1"
                label="Red"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton2"
                label="Orange"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton3"
                label="Yellow"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton4"
                label="Green"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton5"
                label="Blue"
                group="{radioGroup}" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.VBox;
            import mx.containers.ApplicationControlBar;
            import mx.controls.Label;
            import mx.controls.RadioButton;
            import mx.controls.RadioButtonGroup;
            import mx.events.ItemClickEvent;

            private var lbl:Label;
            private var radioGroup:RadioButtonGroup;
            private var radioButton1:RadioButton;
            private var radioButton2:RadioButton;
            private var radioButton3:RadioButton;
            private var radioButton4:RadioButton;
            private var radioButton5:RadioButton;

            private function init():void {
                lbl = new Label();
                lbl.setStyle("fontWeight", "bold");

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(lbl);
                Application.application.addChildAt(appControlBar, 0);

                radioGroup = new RadioButtonGroup();
                radioGroup.addEventListener(ItemClickEvent.ITEM_CLICK,
                            radioGroup_itemClick);

                radioButton1 = new RadioButton();
                radioButton1.label = "Red";
                radioButton1.group = radioGroup;

                radioButton2 = new RadioButton();
                radioButton2.label = "Orange";
                radioButton2.group = radioGroup;

                radioButton3 = new RadioButton();
                radioButton3.label = "Yellow";
                radioButton3.group = radioGroup;

                radioButton4 = new RadioButton();
                radioButton4.label = "Green";
                radioButton4.group = radioGroup;

                radioButton5 = new RadioButton();
                radioButton5.label = "Blue";
                radioButton5.group = radioGroup;

                var vBox:VBox = new VBox();
                vBox.addChild(radioButton1);
                vBox.addChild(radioButton2);
                vBox.addChild(radioButton3);
                vBox.addChild(radioButton4);
                vBox.addChild(radioButton5);
                addChild(vBox);
            }

            private function radioGroup_itemClick(evt:ItemClickEvent):void {
                var now:String = new Date().toTimeString();
                lbl.text = evt.label + " (" + now + ")";
            }
        ]]>
    </mx:Script>

</mx:Application>

For an example of detecting when a RadioButton selection has changed using the RadioButton control’s change event or the RadioButtonGroup’s change event, see “Determining when the selected radio button has changed”.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/20/looping-over-radiobutton-controls-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function showAlert():void {
                var arr:Array = [];
                var rb:RadioButton;
                var idx:int;
                var len:int = radioGroup.numRadioButtons;

                for (idx=0; idx<len; idx++) {
                    rb = radioGroup.getRadioButtonAt(idx);
                    arr.push("index:" + idx + ", label:" + rb.label);
                }
                Alert.show(arr.join("\\n"), "getRadioButtonAt():");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click me" click="showAlert();" />
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup" />

    <mx:VBox>
        <mx:RadioButton id="radioButton1" label="One" />
        <mx:RadioButton id="radioButton2" label="Two" />
        <mx:RadioButton id="radioButton3" label="Three" />
        <mx:RadioButton id="radioButton4" label="Four" />
        <mx:RadioButton id="radioButton5" label="Five" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/19/enabling-and-disabling-radiobutton-controls-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup"
            enabled="{checkBox.selected}" />

    <mx:VBox horizontalAlign="left">
        <mx:RadioButton id="radioButton1"
                label="Red"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton2"
                label="Orange"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton3"
                label="Yellow"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton4"
                label="Green"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton5"
                label="Blue"
                group="{radioGroup}" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

You can also set the RadioButtonGroup’s enabled property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/19/enabling-and-disabling-radiobutton-controls-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                radioGroup.enabled = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup" />

    <mx:VBox horizontalAlign="left">
        <mx:RadioButton id="radioButton1"
                label="Red"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton2"
                label="Orange"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton3"
                label="Yellow"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton4"
                label="Green"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton5"
                label="Blue"
                group="{radioGroup}" />
    </mx:VBox>

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/19/enabling-and-disabling-radiobutton-controls-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.VBox;
            import mx.controls.CheckBox;
            import mx.controls.RadioButton;
            import mx.controls.RadioButtonGroup;

            private var checkBox:CheckBox;
            private var radioGroup:RadioButtonGroup;
            private var radioButton1:RadioButton;
            private var radioButton2:RadioButton;
            private var radioButton3:RadioButton;
            private var radioButton4:RadioButton;
            private var radioButton5:RadioButton;

            private function init():void {
                var appControlBar:ApplicationControlBar;
                var form:Form;
                var formItem:FormItem;

                checkBox = new CheckBox();
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                formItem = new FormItem();
                formItem.label = "enabled:";
                formItem.addChild(checkBox);

                form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                Application.application.addChildAt(appControlBar, 0);

                radioGroup = new RadioButtonGroup();

                radioButton1 = new RadioButton();
                radioButton1.label = "Red";
                radioButton1.group = radioGroup;

                radioButton2 = new RadioButton();
                radioButton2.label = "Orange";
                radioButton2.group = radioGroup;

                radioButton3 = new RadioButton();
                radioButton3.label = "Yellow";
                radioButton3.group = radioGroup;

                radioButton4 = new RadioButton();
                radioButton4.label = "Green";
                radioButton4.group = radioGroup;

                radioButton5 = new RadioButton();
                radioButton5.label = "Blue";
                radioButton5.group = radioGroup;

                var vBox:VBox = new VBox();
                vBox.addChild(radioButton1);
                vBox.addChild(radioButton2);
                vBox.addChild(radioButton3);
                vBox.addChild(radioButton4);
                vBox.addChild(radioButton5);
                addChild(vBox);
            }

            private function checkBox_change(evt:Event):void {
                radioGroup.enabled = checkBox.selected;
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/19/setting-the-label-placement-on-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left, right, top, bottom]"
                        selectedIndex="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup"
            labelPlacement="{comboBox.selectedItem}" />

    <mx:HBox horizontalAlign="left" verticalGap="15">
        <mx:RadioButton id="radioButton1"
                label="Red"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton2"
                label="Orange"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton3"
                label="Yellow"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton4"
                label="Green"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton5"
                label="Blue"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

You can also set the labelPlacement property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/19/setting-the-label-placement-on-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function comboBox_change(evt:ListEvent):void {
                var value:String = evt.currentTarget.selectedItem;
                radioGroup.labelPlacement = value;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left, right, top, bottom]"
                        selectedIndex="1"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup" />

    <mx:HBox horizontalAlign="left">
        <mx:RadioButton id="radioButton1"
                label="Red"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton2"
                label="Orange"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton3"
                label="Yellow"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton4"
                label="Green"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
        <mx:RadioButton id="radioButton5"
                label="Blue"
                group="{radioGroup}"
                opaqueBackground="0xFF00FF" />
    </mx:HBox>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/18/setting-an-opaque-background-on-a-radiobutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="opaqueBackground:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButton id="radioButton"
            label="The quick brown fox jumped over the lazy dog"
            opaqueBackground="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the opaqueBackground property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/18/setting-an-opaque-background-on-a-radiobutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                radioButton.opaqueBackground = evt.color;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="opaqueBackground:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButton id="radioButton"
            label="The quick brown fox jumped over the lazy dog" />

</mx:Application>