在多个自定义组件中使用RadioButtonGroup功能

问题描述

我正在创建一个程序，其中将包含一个自定义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>

推荐答案

这与自定义组件中的RadioButton功能是相同的答案. .groupName不仅是组成字符串，还需要引用关联的 RadioButtonGroup 类.在应用程序的声明中添加一个RadioButtonGroup，并将ID分配给要分组的每个RadioButton中的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功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！