Using RadioButtonGroup funcitonality across multip

问题:

I am creating a program that will contain multiple instances of an custom mxml component that contains a label and a radio button. I would like to mirror the functionality of the RadioButtonGroup so that only one radio button is selected at one time. But unfortunately, I cannot get this to work and more that one radio button is selected at the same time.

Does my custom component need to implement and overidde the functions provided by IFocusGroupManager class?

I have provided my code below.

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:C="*">

    <fx:Script>
        <![CDATA[
            import flash.events.Event;
            import flash.events.FocusEvent;
            import flash.events.KeyboardEvent;
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
            import spark.components.Group;

            private function FocusIn(evt:FocusEvent):void
            {
                ToggleFocus(evt, true);
            }

            private function FocusOut(evt:FocusEvent):void
            {
                ToggleFocus(evt, false);
            }

            private function ToggleFocus(event:FocusEvent, State:Boolean):void
            {
                var i:int;

                var ParentGroup:Group = event.currentTarget.parent;

                for (i = 0; i < ParentGroup.numChildren; i++)
                    TT(ParentGroup.getChildAt(i)).ShowImage = State;
            }
        ]]>
    </fx:Script>

    <s:Panel
            title="Survey"
            horizontalCenter="0"
            verticalCenter="0" 
            width="1000"
            height="500">

        <s:Scroller width="100%" height="100%">
            <s:Group width="100%" height="100%">
                <s:VGroup left="20" right="20" top="20" bottom="20">

                    <s:Label>
                        <s:text>How likely are you to recommend this Product?</s:text>
                    </s:Label>

                    <s:Group>                       
                        <C:TT RadioButtonLabel="Very Likely" ShowImage="false"
                              ShortcutNumber="1" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend"></C:TT>
                        <C:TT RadioButtonLabel="Likely" ShowImage="false"
                              ShortcutNumber="2" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend" x="150"></C:TT>
                        <C:TT RadioButtonLabel="Unlikely" ShowImage="false"
                              ShortcutNumber="3" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend" x="300"></C:TT>
                        <C:TT RadioButtonLabel="Very Unlikely" ShowImage="false"
                              ShortcutNumber="4" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend" x="450" ></C:TT>
                    </s:Group>  

                </s:VGroup>             
            </s:Group>
        </s:Scroller> 
    </s:Panel>
</s:Application>

TT.mxml

<?xml version="1.0"?>

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   implements="mx.managers.IFocusManagerGroup">

   <fx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;
        import mx.controls.Alert;
        import mx.controls.RadioButton;
        import mx.events.FlexEvent;
        {
            [Bindable]
            public var RadioButtonLabel:String;

            [Bindable]
            public var ShowImage:Boolean;

            [Bindable]
            public var ShortcutNumber:String;

            [Bindable]
            private var _groupName:String;

            [Bindable]
            public var SelectState:Boolean;

            [Bindable]
            public var _selected:Boolean;

            public function set groupName(value:String):void
            {               
                _groupName = value;
            }

            public function get groupName():String
            {
                return _groupName;
            }

            public function set selected(value:Boolean):void
            {               
                _selected = value;
            }

            public function get selected():Boolean
            {               
                return _selected; 
            }
        }
      ]]>    
    </fx:Script>  


   <s:layout> 
      <s:HorizontalLayout 
         paddingLeft="5" paddingRight="0" 
         paddingTop="0" paddingBottom="0"/>
      </s:layout>

    <s:Label id="value" text="{ShortcutNumber}" visible="{ShowImage}" color="blue" fontWeight="bold" fontSize="16"
             horizontalCenter="true"  paddingTop="3" focusEnabled="false" />
    <s:RadioButton id="RadioButton" label="{RadioButtonLabel}" groupName="{_groupName}" selected="{_selected}" />
</s:SkinnableContainer>

回答1:

This is the same answer as RadioButton functionality in custom component. groupName is not just a made up string, it needs to reference the id string of the associated RadioButtonGroup class. Add a RadioButtonGroup in declarations of the application and give the id to groupName in each of RadioButtons you wish to group.