跨多个自定义组件使用 RadioButtonGroup 功能 [英] Using RadioButtonGroup funcitonality across multiple custom components

问题描述

我正在创建一个程序，该程序将包含一个自定义 mxml 组件的多个实例，其中包含一个标签和一个单选按钮.我想镜像 RadioButtonGroup 的功能，以便一次只选择一个单选按钮.但不幸的是，我无法让它工作，而且同时选择了一个单选按钮.

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.

我的自定义组件是否需要实现和覆盖 IFocusGroupManager 类提供的功能?

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>

推荐答案

这与自定义组件中的单选按钮功能的答案相同.groupName 不仅仅是一个编造的字符串，它需要引用关联 RadioButtonGroup 类.在应用程序的声明中添加一个 RadioButtonGroup，并在您希望分组的每个 RadioButton 中将 id 赋予 groupName.

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.

这篇关于跨多个自定义组件使用 RadioButtonGroup 功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！