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>