0 Replies - 709 Views - Last Post: 07 January 2018 - 05:37 AM

#1 Andrew3899   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-January 18

Flex RadioButtonGroup funcitonality across multiple custom components

Posted 07 January 2018 - 05:37 AM

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>


Is This A Good Question/Topic? 0
  • +

Page 1 of 1