我正在创建一个程序,该程序将包含一个自定义mxml组件的多个示例,该组件包含一个标签和一个单选按钮。我希望镜像RadioButtonGroup的功能,以便一次只选择一个单选按钮。但不幸的是,我无法使此功能正常工作,同时选择了多个单选按钮。
我的自定义组件是否需要实现和覆盖IFocusGroupManager类提供的函数?
我在下面提供了我的代码。
主文件.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条答案
按热度按时间nafvub8i1#
这和RadioButton functionality in custom component的答案是一样的。groupName不仅仅是一个组成的字符串,它需要引用关联的RadioButtonGroup类的id字符串。在应用程序的声明中添加一个RadioButtonGroup,并将id赋予要分组的每个RadioButton中的groupName。