如何检查Flex 3中单选按钮的状态? [英] How to check the state of a Radio Button in Flex 3?

查看:226
本文介绍了如何检查Flex 3中单选按钮的状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在研究Flex中动态调查问卷的模板。在我之前的主题中有更详细的描述这里



为了创建问卷,我使用嵌套的中继器 - 一个用于提问,一个用于答案(因为它们的数量可能有所不同)。

 < mx:Repeater id =rdataProvider ={questions}> 
< mx:Repeater id =r2dataProvider ={r.currentItem.answers}>
< mx:RadioButton label ={r2.currentItem.text}width =200
click =answerHandler(event,event.currentTarget.getRepeaterItem())/>
< / mx:中继器>
< / mx:中继器>

为了理解我的数据提供者,最好检查我以前的线程的答案 - 比我试图在这里解释它。



这里的问题是...正如你所看到的,我创建了每个单选按钮的点击事件处理程序,我的计划是做playerScore ++每次用户选择正确(可以通过检查发送的RepeaterItem的布尔属性正确来实现)。不过,我现在看到,即使按钮已经被选中,我仍然可以多点击一下,即使它没有改变视图中的任何东西,它每次都会增加分数..我还必须处理用户改变主意的情况(我可以为每个好的答案给出+积分,并指出错误,但是这意味着,如果用户选择了更多错误的答案,我的分数将是负面的,我不希望它)。

所以只要有一个提交按钮,并检查所有我的状态按钮,如果他们是正确的,只有在用户点击提交后。是否有可能?

解决方案

我建议您参考以下示例并添加 RadioButtonGroup 到您的中继器组,并听取更改事件而不是点击。您可以在 RadioButtonGroup 中监听 change 事件并检查 if(radioGroup.selectedValue.correct) 为新的选择的正确性。请参阅相应的文档



为了有可能为radiogroups分配唯一的名字,你必须把内部的repeater提供给独立的组件。将应用程序分解为更小的组件可以使您的应用程序更清晰可读。您可以将每个MXML文件视为一个类(如在OOP中),但是以声明形式。并告诉真正的每一个MXML组件是一个从root-node-class继承的类。



让我们看看代码。

首先,我们的内部组件服务于答案:

 <?xml version =1.0encoding = UTF-8 >?; 
< mx:元数据>
[Event(name =rightAnswerEvent,type =AnswerEvent)]
< / mx:Metadata>
< mx:Script>
<![CDATA [
import mx.collections.ArrayCollection;

[Bindable]
public var answers:ArrayCollection;
$ b保护功能answerGroup_changeHandler(event:Event):void
{
if(answerGroup.selectedValue.correct)
dispatchEvent(new AnswerEvent(AnswerEvent.RIGHT_ANSWER_EVENT));
}
]]>
< / mx:Script>

< mx:Repeater dataProvider ={answers}id =answersRepeater>
< mx:RadioButton group ={answerGroup}label ={answersRepeater.currentItem.text}
value ={answersRepeater.currentItem}/>
< / mx:中继器>
< / mx:VBox>

获得个答案我们的自定义事件通知一些组件正确的答案(见元数据标签)。

我们的自定义事件非常简单看起来像下面这样:

pre $ $
import flash.events.Event;

public class AnswerEvent extends Event
{
public static const RIGHT_ANSWER_EVENT:String =rightAnswerEvent;
$ b $ public function AnswerEvent(type:String)
{
super(type);





现在我们的顶层组件:

 <?xml version =1.0encoding =utf-8?> 
xmlns:mx =http://www.adobe.com/2006/mxml>
< mx:Script>
<![CDATA [
import mx.collections.ArrayCollection;

[Bindable]
private var questions:ArrayCollection = new ArrayCollection();

[Bindable]
private var scoreCounter:int;
]]>
< / mx:Script>
< mx:Repeater dataProvider ={questions}id =questionRepeater>
< mx:Label text ={questionRepeater.currentItem.question}/>
< local:AnswerGroup answers ={questionRepeater.currentItem.answers}rightAnswerEvent =scoreCounter ++/>
< / mx:中继器>
< / mx:Application>

我省略了初始化代码来填充我们的问题回答使用XML数据的域对象(见前面的线程)。

所以现在我们有紧凑的模块化代码每个部分解决自己的任务。

希望这有助于!


I'm working on a template for dynamic questionnaires in Flex. More detailed description in my previous thread HERE

To create the questionnaire, I use nested repeaters - one for the questions and one for the answers (as their amount may vary).

<mx:Repeater id="r" dataProvider="{questions}">
   <mx:Label text="{r.currentItem.question}" width="200"/>
      <mx:Repeater id="r2" dataProvider="{r.currentItem.answers}">
         <mx:RadioButton label="{r2.currentItem.text}" width="200"                                          
          click="answerHandler(event, event.currentTarget.getRepeaterItem())"/>
      </mx:Repeater>
</mx:Repeater>

To understand my data providers, it's probably best to check the answer for my previous thread - easier than if I try to explain it here.

The question here is... As you can see, I created click event handler for each radio button and my plan was to do playerScore++ every time the user chose correctly (which can be achieved by checking the Boolean property "correct" of sent RepeaterItem).

However, I see now that even if the button is selected already, I can still click on it more times, and even though it's not changing anything in the view, it increments the score every time.. I would also have to handle situation in which the user changes his mind (I could give + points for each good answer and - points for wrong, but this would mean, that if the user chose more wrong answers, my score will be negative and I don't want it).

So it would be way way easier to just have a Submit button and check the states of all my buttons and if they are correct only after the user clicks "submit". Is it possible?

解决方案

I recommend you to refer to the following sample and add RadioButtonGroup to your repeater groups and listen to change events instead of click. You can listen change event right in RadioButtonGroup and check if (radioGroup.selectedValue.correct) for correctness of new selection. See corresponding documentation.

To have possibility to assign radiogroups unique name you have to extract inner repeater with answers into separate component. Breaking your application into smaller components can make your application more clear and readable. You can treat every MXML file as a class (as in OOP) but in declarative form. And to tell the true every MXML component is a class which inherited from root-node-class.

Lets look at the code.

First, our inner component which serves answers:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Metadata>
        [Event(name="rightAnswerEvent", type="AnswerEvent")]
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var answers:ArrayCollection;

        protected function answerGroup_changeHandler(event:Event):void
        {
            if (answerGroup.selectedValue.correct)
                dispatchEvent(new AnswerEvent(AnswerEvent.RIGHT_ANSWER_EVENT));
        }
    ]]>
    </mx:Script>

    <mx:RadioButtonGroup change="answerGroup_changeHandler(event)" id="answerGroup" />
    <mx:Repeater dataProvider="{answers}" id="answersRepeater">
        <mx:RadioButton group="{answerGroup}" label="{answersRepeater.currentItem.text}"
            value="{answersRepeater.currentItem}" />
    </mx:Repeater>
</mx:VBox>

It gets answers collection as input and fires our custom event to inform some components about right answer (see Metadata tag).

Our custom event is pretty simple an looks like the following:

package
{
import flash.events.Event;

public class AnswerEvent extends Event
{
    public static const RIGHT_ANSWER_EVENT:String = "rightAnswerEvent";

    public function AnswerEvent(type:String)
    {
        super(type);
    }
}
}

So now our top level component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" xmlns:local="*"
    xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        private var questions:ArrayCollection = new ArrayCollection();

        [Bindable]
        private var scoreCounter:int;
    ]]>
    </mx:Script>
    <mx:Label text="{'Score ' + scoreCounter}" />
    <mx:Repeater dataProvider="{questions}" id="questionRepeater">
        <mx:Label text="{questionRepeater.currentItem.question}" />
        <local:AnswerGroup answers="{questionRepeater.currentItem.answers}" rightAnswerEvent="scoreCounter++" />
    </mx:Repeater>
</mx:Application>

I omitted initialization code to populate our Question and Answer domain objects with data from XML (see previous thread).

So now we have compact modularized code where every part solves its own task.

Hope this helps!

这篇关于如何检查Flex 3中单选按钮的状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆