Flex Examples » RadioButton (Spark) http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a radio button item renderer on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/#comments Thu, 20 May 2010 15:39:48 +0000 Peter deHaan http://blog.flexexamples.com/?p=3133 The following example shows how you can use a Spark RadioButton control as an item renderer for a Spark List control in Flex 4 by setting the itemRenderer property.

<?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> [...]]]> The following example shows how you can use a Spark RadioButton control as an item renderer for a Spark List control in Flex 4 by setting the itemRenderer property.

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.

 
]]> http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/feed/ 1 Creating a multiline Spark RadioButton control in Flex 4 http://blog.flexexamples.com/2010/04/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/ http://blog.flexexamples.com/2010/04/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/#comments Sat, 10 Apr 2010 16:54:12 +0000 Peter deHaan http://blog.flexexamples.com/?p=2721 The following example shows how you can create a multiline Spark RadioButton control in Flex 4 by creating a custom RadioButton skin, setting the skinClass style, and removing the maxDisplayedLines property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/ --> <s:Application name="Spark_RadioButton_skinClass_maxDisplayedLines_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">   <fx:Declarations> <s:RadioButtonGroup id="rbg1" /> </fx:Declarations>   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace [...]]]> The following example shows how you can create a multiline Spark RadioButton control in Flex 4 by creating a custom RadioButton skin, setting the skinClass style, and removing the maxDisplayedLines property.

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/04/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/ -->
<s:Application name="Spark_RadioButton_skinClass_maxDisplayedLines_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">
 
    <fx:Declarations>
        <s:RadioButtonGroup id="rbg1" />
    </fx:Declarations>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|RadioButton {
            skinClass: ClassReference("skins.CustomMultilineRadioButtonSkin");
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0" width="250">
        <s:RadioButton id="rb1"
                label="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                group="{rbg1}"
                width="100%" />
        <s:RadioButton id="rb2"
                label="Sed pellentesque vehicula euismod. Pellentesque nulla sapien, tempor sit amet volutpat sed, condimentum vitae risus. Sed in purus sapien, ac vehicula nisl."
                group="{rbg1}"
                width="100%" />
        <s:RadioButton id="rb3"
                label="Phasellus tortor sem, scelerisque nec porta ornare, condimentum at enim. Vivamus eu mi nisl, et sollicitudin nisi."
                group="{rbg1}"
                width="100%" />
    </s:VGroup>
 
</s:Application>

And the custom Spark RadioButton skin, skins/CustomMultilineRadioButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/ -->
<s:SparkSkin name="CustomMultilineRadioButtonSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.RadioButton")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay", "dot"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the symbol fill items that should be colored by the "symbolColor" style. */
            static private const symbols:Array = ["dotFill"];
 
            override public function get symbolItems():Array {
                return symbols;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            private static const focusExclusions:Array = ["labelDisplay"];
 
            override public function get focusSkinExclusions():Array {
                return focusExclusions;
            }
        ]]>
    </fx:Script>
 
    <s:Group top="5" width="13" height="13">
        <!-- drop shadow -->
        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.011" alpha.downStates="0" />
                    <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.121" alpha.downStates="0.57" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
 
        <!-- fill -->
        <s:Ellipse left="1" top="1" right="1" bottom="1">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" color.overStates="0xBBBDBD" color.downStates="0xAAAAAA" alpha="0.85" />
                    <s:GradientEntry color="0xD8D8D8" color.overStates="0x9FA0A1" color.downStates="0x929496" alpha="0.85" />
                </s:LinearGradient>
            </s:fill>
        </s:Ellipse>
 
        <!-- fill highlight -->
        <s:Path data="M 1 6 Q 2 2 6 1 Q 11 2 12 6 h -9">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" alpha="0.33" />
            </s:fill>
        </s:Path>
 
        <!-- layer 6: highlight stroke (all states except down) -->
        <s:Ellipse left="1" right="1" top="1" bottom="1">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
                    <s:GradientEntry color="0xD8D8D8" color.downStates="0xB1B1B1" alpha.overStates="0.22" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
        <s:Rect left="5" top="1" right="5" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
            </s:fill>
        </s:Rect>
 
        <!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
        <s:Ellipse left="0" top="0" right="0" bottom="0">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" alpha="0.70" />
                    <s:GradientEntry color="0x000000" alpha="0.80" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
 
        <!-- dot -->
        <!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
        <s:Path id="dot" left="4" top="4" includeIn="selectedStates" itemCreationPolicy="immediate"
                data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
            <s:fill>
                <!--- Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is 0.9. -->
                <s:SolidColor id="dotFill" color="0" alpha="0.9" />
            </s:fill>
        </s:Path>
        <s:Path left="4" top="7" includeIn="selectedStates" 
                data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
            <s:stroke>
                <s:LinearGradientStroke>
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.7" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Path>
    </s:Group>
 
    <!-- Label -->
    <s:Label id="labelDisplay"
            textAlign="start"
            verticalAlign="middle"
            left="18" right="0" top="3" bottom="3"
            verticalCenter="2" />
 
</s:SparkSkin>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2010/04/10/creating-a-multiline-spark-radiobutton-control-in-flex-4/feed/ 3 Setting the symbol color on a Spark RadioButton control in Flex 4 http://blog.flexexamples.com/2010/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/ http://blog.flexexamples.com/2010/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/#comments Fri, 05 Feb 2010 14:50:18 +0000 Peter deHaan http://blog.flexexamples.com/?p=2385 The following example shows how you can set the symbol/bullet color on a Spark RadioButton control in Flex 4 by setting the symbolColor style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/ --> <s:Application name="Spark_RadioButton_symbolColor_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> <mx:Form> <mx:FormItem label="symbolColor:"> <mx:ColorPicker id="cp" selectedColor="black" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   <fx:Declarations> <s:RadioButtonGroup id="radioGr" /> </fx:Declarations>   <s:VGroup [...]]]> The following example shows how you can set the symbol/bullet color on a Spark RadioButton control in Flex 4 by setting the symbolColor style.

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/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/ -->
<s:Application name="Spark_RadioButton_symbolColor_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>
        <mx:Form>
            <mx:FormItem label="symbolColor:">
                <mx:ColorPicker id="cp" selectedColor="black" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Declarations>
        <s:RadioButtonGroup id="radioGr" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:RadioButton id="rb1"
                label="Red"
                group="{radioGr}"
                selected="true"
                symbolColor="{cp.selectedColor}"/>
        <s:RadioButton id="rb2"
                label="Orange"
                group="{radioGr}"
                symbolColor="{cp.selectedColor}" />
        <s:RadioButton id="rb3"
                label="Yellow"
                group="{radioGr}"
                symbolColor="{cp.selectedColor}" />
        <s:RadioButton id="rb4"
                label="Green"
                group="{radioGr}"
                symbolColor="{cp.selectedColor}" />
        <s:RadioButton id="rb5"
                label="Blue"
                group="{radioGr}"
                symbolColor="{cp.selectedColor}" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

You can also set the symbolColor style in an external .CSS file or <Script/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/ -->
<s:Application name="Spark_RadioButton_symbolColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|RadioButton {
            symbolColor: red;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:RadioButtonGroup id="radioGr" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:RadioButton id="rb1"
                label="Red"
                group="{radioGr}"
                selected="true" />
        <s:RadioButton id="rb2"
                label="Orange"
                group="{radioGr}" />
        <s:RadioButton id="rb3"
                label="Yellow"
                group="{radioGr}" />
        <s:RadioButton id="rb4"
                label="Green"
                group="{radioGr}" />
        <s:RadioButton id="rb5"
                label="Blue"
                group="{radioGr}" />
    </s:VGroup>
 
</s:Application>

Or you can set the symbolColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/ -->
<s:Application name="Spark_RadioButton_symbolColor_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>
        <mx:Form>
            <mx:FormItem label="symbolColor:">
                <mx:ColorPicker id="cp"
                        selectedColor="black"
                        change="cp_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function cp_changeHandler(evt:ColorPickerEvent):void {
                rb1.setStyle("symbolColor", evt.color);
                rb2.setStyle("symbolColor", evt.color);
                rb3.setStyle("symbolColor", evt.color);
                rb4.setStyle("symbolColor", evt.color);
                rb5.setStyle("symbolColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:RadioButtonGroup id="radioGr" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:RadioButton id="rb1"
                label="Red"
                group="{radioGr}"
                selected="true" />
        <s:RadioButton id="rb2"
                label="Orange"
                group="{radioGr}" />
        <s:RadioButton id="rb3"
                label="Yellow"
                group="{radioGr}" />
        <s:RadioButton id="rb4"
                label="Green"
                group="{radioGr}" />
        <s:RadioButton id="rb5"
                label="Blue"
                group="{radioGr}" />
    </s:VGroup>
 
</s:Application>

Finally you can set the symbolColor globally for the Spark RadioButton control by using the StyleManager, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/ -->
<s:Application name="Spark_RadioButton_symbolColor_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>
        <mx:Form>
            <mx:FormItem label="symbolColor:">
                <mx:ColorPicker id="cp"
                        selectedColor="black"
                        change="cp_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function cp_changeHandler(evt:ColorPickerEvent):void {
                var radioBtnCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.RadioButton");
                radioBtnCSS.setStyle("symbolColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:RadioButtonGroup id="radioGr" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:RadioButton id="rb1"
                label="Red"
                group="{radioGr}"
                selected="true" />
        <s:RadioButton id="rb2"
                label="Orange"
                group="{radioGr}" />
        <s:RadioButton id="rb3"
                label="Yellow"
                group="{radioGr}" />
        <s:RadioButton id="rb4"
                label="Green"
                group="{radioGr}" />
        <s:RadioButton id="rb5"
                label="Blue"
                group="{radioGr}" />
    </s:VGroup>
 
</s:Application>

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.

 
]]> http://blog.flexexamples.com/2010/02/05/setting-the-symbol-color-on-a-spark-radiobutton-control-in-flex-4/feed/ 4 Disabling a Spark RadioButtonGroup in Flex 4 http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/#comments Sat, 04 Apr 2009 06:58:07 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ The following example shows how you can disable a group of radio buttons by setting the Boolean enabled property on a Spark RadioButtonGroup control in Flex 4.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ --> <s:Application name="Spark_RadioButtonGroup_enabled_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" initialize="sdkVer.text = mx_internal::VERSION;"> <s:layout> <s:BasicLayout /> </s:layout> <fx:Declarations> <s:RadioButtonGroup id="radioBtnGroup" enabled="{checkBox.selected}" [...]]]> The following example shows how you can disable a group of radio buttons by setting the Boolean enabled property on a Spark RadioButtonGroup control in Flex 4.

Full code after the jump.

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/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ -->
<s:Application name="Spark_RadioButtonGroup_enabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="sdkVer.text = mx_internal::VERSION;">
    <s:layout>
        <s:BasicLayout />
    </s:layout>

    <fx:Declarations>
        <s:RadioButtonGroup id="radioBtnGroup"
                enabled="{checkBox.selected}" />
    </fx:Declarations>

    <s:CheckBox id="checkBox"
            label="enabled"
            selected="true"
            x="10"
            y="10" />

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:RadioButton id="radioBtn1"
                label="Red"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn2"
                label="Orange"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn3"
                label="Yellow"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn4"
                label="Green"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn5"
                label="Blue"
                group="{radioBtnGroup}" />
    </s:VGroup>

    <s:SimpleText id="sdkVer"
            right="10"
            bottom="10" />

</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/feed/ 0