The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_RadioButton_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Label text="selected RadioButton: {dgr1.selection.label}" />
    </s:controlBarContent>
 
    <fx:Declarations>
        <s:RadioButtonGroup id="dgr1" selectedValue="Three" />
    </fx:Declarations>
 
    <s:List id="lst"
            itemRenderer="skins.RadioButtonItemRen"
            width="100"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="6" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object val="One" gr="{dgr1}" />
                <fx:Object val="Two" gr="{dgr1}" />
                <fx:Object val="Three" gr="{dgr1}" />
                <fx:Object val="Four" gr="{dgr1}" />
                <fx:Object val="Five" gr="{dgr1}" />
                <fx:Object val="Six" gr="{dgr1}" />
                <fx:Object val="Seven" gr="{dgr1}" />
                <fx:Object val="Eight" gr="{dgr1}" />
                <fx:Object val="Nine" gr="{dgr1}" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List item renderer, skins/RadioButtonItemRen.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="RadioButtonItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        autoDrawBackground="false"
        dataChange="itemrenderer1_dataChangeHandler(event);">
 
    <fx:Script>
        <![CDATA[
            protected function itemrenderer1_dataChangeHandler(evt:Event):void {
                rdBtn.label = data.val;
                rdBtn.value = data.val;
                rdBtn.group = data.gr;
            }
        ]]>
    </fx:Script>
 
    <s:RadioButton id="rdBtn"
            left="3" right="3" top="5" bottom="5" />
 
</s:ItemRenderer>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

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

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/17/creating-a-simple-multiple-choice-quiz-using-the-radiobutton-and-radiobuttongroup-controls/ -->
<mx:Application name="Quiz_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        RadioButton {
            paddingLeft: 20;
            horizontalGap: 4;
        }

        .QuestionVBox {
            paddingBottom: 50;
        }

        .QuestionText {
            fontWeight: bold;
        }
    </mx:Style>

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

            private function checkAnswers():void {
                var success:Boolean = true;

                success = checkGroup(q1_group) && success;
                success = checkGroup(q2_group) && success;

                Alert.show("SUCCESS = " + success);
            }

            private function checkGroup(rbg:RadioButtonGroup):Boolean {
                var rb:RadioButton;
                var valid:Boolean = true;
                var i:int;

                /* If the user got the answer wrong... */
                if (rbg.selectedValue != true) {
                    /* Set the 'valid' flag to false. */
                    valid = false;
                    /* Get the currently selected radio button, if any. */
                    rb = rbg.selection;
                    /* Actually, check if a radio button WAS selected... */
                    if (rb != null) {
                        /* If there was a selected radio button, and it
                           was the wrong answer, hide the answer. */
                        rb.includeInLayout = false;
                        rb.visible = false;
                    }
                /* Else the user selected the right answer. Hey, it was
                   bound to happen eventually! */
                } else {
                    /* Loop over all the radio buttons in this group. */
                    for (i = 0; i < rbg.numRadioButtons; i++) {
                        /* Create a reference to the current radio button. */
                        rb = rbg.getRadioButtonAt(i);
                        /* If the radio button is NOT selected... */
                        if (!rb.selected) {
                            /* Hide all wrong answers, they already got
                               the question right. */
                            rb.includeInLayout = false;
                            rb.visible = false;
                        }
                    }
                }

                /* Return the value of the 'valid' flag. */
                return valid;
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="q1_group" enabled="false" />
    <mx:RadioButtonGroup id="q2_group" enabled="false" />

    <mx:Panel title="Subject: Periodic Table" width="100%" height="100%">
        <mx:VBox styleName="QuestionVBox" width="100%">
            <mx:Text styleName="QuestionText"
                    selectable="false"
                    width="100%">
                <mx:text>1) Which three groups of the Periodic Table contain the most elements classified as metalloids (semimetals)?</mx:text>
            </mx:Text>

            <!-- Wrong -->
            <mx:RadioButton id="q1_a"
                    label="1, 2, and 13"
                    group="{q1_group}" />
            <!-- Wrong -->
            <mx:RadioButton id="q1_b"
                    label="2, 13, and 14"
                    group="{q1_group}" />
            <!-- RIGHT -->
            <mx:RadioButton id="q1_c"
                    label="14, 15, and 16"
                    group="{q1_group}"
                    value="true" />
            <!-- Wrong -->
            <mx:RadioButton id="q1_d"
                    label="16, 17, and 18"
                    group="{q1_group}" />
        </mx:VBox>

        <mx:VBox styleName="QuestionVBox" width="100%">
            <mx:Text styleName="QuestionText"
                    selectable="false"
                    width="100%">
                <mx:text>2) Which element has the highest first ionization energy?</mx:text>
            </mx:Text>

            <!-- Wrong -->
            <mx:RadioButton id="q2_a"
                    label="sodium"
                    group="{q2_group}" />
            <!-- Wrong -->
            <mx:RadioButton id="q2_b"
                    label="aluminum"
                    group="{q2_group}" />
            <!-- Wrong -->
            <mx:RadioButton id="q2_c"
                    label="calcium"
                    group="{q2_group}" />
            <!-- RIGHT -->
            <mx:RadioButton id="q2_d"
                    label="phosphorus"
                    group="{q2_group}"
                    value="true" />
        </mx:VBox>

        <mx:ControlBar horizontalAlign="right">
            <mx:Button label="Check answers"
                    click="checkAnswers();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.