Flex Examples » RadioButtonGroup http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Detecting when the number of radio buttons changes in a radio button group in Flex http://blog.flexexamples.com/2008/11/10/detecting-when-the-number-of-radio-buttons-changes-in-a-radio-button-group-in-flex/ http://blog.flexexamples.com/2008/11/10/detecting-when-the-number-of-radio-buttons-changes-in-a-radio-button-group-in-flex/#comments Tue, 11 Nov 2008 03:56:55 +0000 Peter deHaan http://blog.flexexamples.com/2008/11/10/detecting-when-the-number-of-radio-buttons-changes-in-a-radio-button-group-in-flex/ The following example shows how you can detect when the number of RadioButton objects changes in a RadioButtonGroup in Flex by listening for the numRadioButtonsChanged event.

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 [...]]]> The following example shows how you can detect when the number of RadioButton objects changes in a RadioButtonGroup in Flex by listening for the numRadioButtonsChanged event.

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>
 
]]> http://blog.flexexamples.com/2008/11/10/detecting-when-the-number-of-radio-buttons-changes-in-a-radio-button-group-in-flex/feed/ 0 Detecting when a RadioButtonGroup has been enabled or disabled in Flex http://blog.flexexamples.com/2008/06/25/detecting-when-a-radiobuttongroup-has-been-enabled-or-disabled-in-flex/ http://blog.flexexamples.com/2008/06/25/detecting-when-a-radiobuttongroup-has-been-enabled-or-disabled-in-flex/#comments Wed, 25 Jun 2008 15:03:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/25/detecting-when-a-radiobuttongroup-has-been-enabled-or-disabled-in-flex/ 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.

[...]]]> 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>
 
]]> http://blog.flexexamples.com/2008/06/25/detecting-when-a-radiobuttongroup-has-been-enabled-or-disabled-in-flex/feed/ 0 Disabling keyboard navigation on the RadioButton control in Flex http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/#comments Tue, 24 Jun 2008 03:07:19 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ The following example shows how you can disable keyboard navigation within a Flex RadioButton/RadioButtonGroup by extending the RadioButton class and overriding the protected keyDownHandler() method.

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 [...]]]> The following example shows how you can disable keyboard navigation within a Flex RadioButton/RadioButtonGroup by extending the RadioButton class and overriding the protected keyDownHandler() method.

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>
 
]]> http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/feed/ 3 Detecting when a RadioButton has been clicked in a RadioButtonGroup in Flex http://blog.flexexamples.com/2008/06/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/ http://blog.flexexamples.com/2008/06/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/#comments Sun, 22 Jun 2008 01:52:05 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/ The following example shows how you can detect when a RadioButton has been clicked in a FlexRadioButtonGroup by listening for the itemClick event.

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 = [...]]]> The following example shows how you can detect when a RadioButton has been clicked in a FlexRadioButtonGroup by listening for the itemClick event.

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”.

 
]]> http://blog.flexexamples.com/2008/06/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/feed/ 2 Looping over RadioButton controls in a RadioButtonGroup in Flex http://blog.flexexamples.com/2008/06/20/looping-over-radiobutton-controls-in-a-radiobuttongroup-in-flex/ http://blog.flexexamples.com/2008/06/20/looping-over-radiobutton-controls-in-a-radiobuttongroup-in-flex/#comments Sat, 21 Jun 2008 06:58:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/20/looping-over-radiobutton-controls-in-a-radiobuttongroup-in-flex/ The following example shows how you can loop over the RadioButton controls in a Flex RadioButtonGroup by using the numRadioButtons property and getRadioButtonAt() method.

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 [...]]]> The following example shows how you can loop over the RadioButton controls in a Flex RadioButtonGroup by using the numRadioButtons property and getRadioButtonAt() method.

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.

 
]]> http://blog.flexexamples.com/2008/06/20/looping-over-radiobutton-controls-in-a-radiobuttongroup-in-flex/feed/ 0 Enabling and disabling RadioButton controls in a RadioButtonGroup in Flex http://blog.flexexamples.com/2008/06/19/enabling-and-disabling-radiobutton-controls-in-a-radiobuttongroup-in-flex/ http://blog.flexexamples.com/2008/06/19/enabling-and-disabling-radiobutton-controls-in-a-radiobuttongroup-in-flex/#comments Fri, 20 Jun 2008 04:20:43 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/19/enabling-and-disabling-radiobutton-controls-in-a-radiobuttongroup-in-flex/ The following example shows how you can set the visibility of all of the RadioButton controls in a Flex RadioButtonGroup by setting the enabled property.

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" [...]]]> The following example shows how you can set the visibility of all of the RadioButton controls in a Flex RadioButtonGroup by setting the enabled property.

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>
 
]]> http://blog.flexexamples.com/2008/06/19/enabling-and-disabling-radiobutton-controls-in-a-radiobuttongroup-in-flex/feed/ 0 Setting the label placement on a RadioButtonGroup in Flex http://blog.flexexamples.com/2008/06/19/setting-the-label-placement-on-a-radiobuttongroup-in-flex/ http://blog.flexexamples.com/2008/06/19/setting-the-label-placement-on-a-radiobuttongroup-in-flex/#comments Thu, 19 Jun 2008 07:23:08 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/19/setting-the-label-placement-on-a-radiobuttongroup-in-flex/ The following example shows how you can set the label placement on a series of RadioButton controls in a Flex RadioButtonGroup by setting the labelPlacement property.

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" [...]]]> The following example shows how you can set the label placement on a series of RadioButton controls in a Flex RadioButtonGroup by setting the labelPlacement property.

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>
 
]]> http://blog.flexexamples.com/2008/06/19/setting-the-label-placement-on-a-radiobuttongroup-in-flex/feed/ 0 Displaying RadioButton controls using the Repeater in Flex http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/#comments Wed, 28 May 2008 13:43:15 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ The following example shows how you can display a series of RadioButtons using the Flex Repeater with an Array data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> Alert { backgroundAlpha: 0.8; backgroundColor: black; borderAlpha: 0.8; borderColor: black; } </mx:Style> [...]]]> The following example shows how you can display a series of RadioButtons using the Flex Repeater with an Array data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Alert {
            backgroundAlpha: 0.8;
            backgroundColor: black;
            borderAlpha: 0.8;
            borderColor: black;
        }
    </mx:Style>

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

            private function radioButton_change(evt:Event):void {
                var radio:RadioButton = RadioButton(evt.currentTarget);
                var item:Object = radio.getRepeaterItem();
                var cssObj:CSSStyleDeclaration;
                cssObj = StyleManager.getStyleDeclaration("Alert");
                cssObj.setStyle("modalTransparencyColor", item.data);
                cssObj.setStyle("themeColor", item.data);
                Alert.show(item.label, "getRepeaterItem()");
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red" data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green" data="haloGreen" />
        <mx:Object label="Blue" data="haloBlue" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="selectedValue:">
                <mx:Label text="{radioGroup.selectedValue}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HBox id="hb" horizontalGap="60">
        <mx:RadioButtonGroup id="radioGroup" />
        <mx:Repeater id="radioRepeater"
                dataProvider="{arr}">
            <mx:RadioButton id="radioButtons"
                    label="{radioRepeater.currentItem.label}"
                    group="{radioGroup}"
                    change="radioButton_change(event);" />
        </mx:Repeater>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/feed/ 1 Clearing a selected RadioButton control in Flex http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/ http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/#comments Sun, 06 Jan 2008 08:29:29 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/ The following example shows how you can use ActionScript to clear a currently selected radio button by setting the RadioButtonGroup class’s selection property to null.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/ --> <mx:Application name="RadioButtonGroup_selection_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ import mx.controls.Alert;   private function reset():void { answers.selection = null; }   private function [...]]]> The following example shows how you can use ActionScript to clear a currently selected radio button by setting the RadioButtonGroup class’s selection property to null.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButtonGroup_selection_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private function reset():void {
                answers.selection = null;
            }
 
            private function check():void {
                if (answers.selectedValue) {
                    Alert.show(answers.selectedValue.toString());
                } else {
                    Alert.show("unselected");
                }
            }
        ]]>
    </mx:Script>
 
    <mx:RadioButtonGroup id="answers" />
 
    <mx:Form backgroundColor="red">
        <mx:FormItem>
            <mx:Text id="question"
                    text="Question..." />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer1"
                    group="{answers}"
                    label="Answer 1" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer2"
                    group="{answers}"
                    label="Answer 2" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer3"
                    group="{answers}"
                    label="Answer 3" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer4"
                    group="{answers}"
                    label="Answer 4" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer5"
                    group="{answers}"
                    label="Answer 5" />
        </mx:FormItem>
        <mx:FormItem direction="horizontal">
            <mx:Button label="Check" click="check();" />
            <mx:Button label="Reset" click="reset();" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/feed/ 13 Determining when the selected radio button has changed http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/ http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/#comments Fri, 19 Oct 2007 14:25:23 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/ The following examples show how you can detect when the user has selected a different radio button by listening for the change event on the RadioButton control or RadioButtonGroup control.

Full code after the jump.

The first example demonstrates how you can listen for the change event on each individual radio button:

The following examples show how you can detect when the user has selected a different radio button by listening for the change event on the RadioButton control or RadioButtonGroup control.

Full code after the jump.

The first example demonstrates how you can listen for the change event on each individual radio button:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function rb_change(evt:Event):void {
                var rb:RadioButton = evt.currentTarget as RadioButton;
                lbl.text = rb.label;
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:RadioButton id="rb1"
                label="One"
                change="rb_change(event);" />
        <mx:RadioButton id="rb2"
                label="Two"
                change="rb_change(event);" />
        <mx:RadioButton id="rb3"
                label="Three"
                change="rb_change(event);" />
    </mx:VBox>

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

</mx:Application>

View source is enabled in the following example.

The second example demonstrates how you can listen for the change event on the radio button group:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function rbg_change(evt:Event):void {
                var group:RadioButtonGroup = evt.currentTarget as RadioButtonGroup;
                lbl.text = group.selection.label;
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="rbg"
            change="rbg_change(event);" />

    <mx:VBox>
        <mx:RadioButton id="rb1"
                label="One"
                group="{rbg}" />
        <mx:RadioButton id="rb2"
                label="Two"
                group="{rbg}" />
        <mx:RadioButton id="rb3"
                label="Three"
                group="{rbg}" />
    </mx:VBox>

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

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/feed/ 2