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>

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

One thought on “Displaying RadioButton controls using the Repeater in Flex

  1. Hi
    Iam using true or false radioButtons selection within the repeater.. how to add the groupName dynamically..? please help me out…

    thanks
    AV

Comments are closed.