Flex Examples

In a previous example, “Enabling and disabling RadioButton controls in a RadioButtonGroup in Flex”, we saw how you can enable or disable all of the RadioButton controls in a Flex RadioButtonGroup by setting the enabled property.

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>