如何检查用户对 Flex 中动态生成的单选按钮和复选框的选择？

Question

以下是我的代码。这仍在进行中；因此，您将看到一些内容为空的函数。另外，这是我的第一个 Flex 应用程序；请多多包涵。

这是一个测验应用程序，它从 ColdFusion Web 服务中获取每个问题的问题和答案。有三种类型的问题，判断题，单选题，多选题和多选题。因此，根据问题类型，应用程序将动态生成适当数量的单选按钮或复选框供用户选择。我得到了这些工作。我遇到的问题是，我不确定如何检查用户实际选择的内容。在其他一些论坛和其他网站上的帖子中，它说我可以使用 event.currentTarget.selectedValue 来获取用户选择。但是，当我实际执行此操作时，我收到一个运行时错误，提示“在 mx.controls.FormItem 上找不到属性 selectedValue 并且没有默认值。”我的问题是，我需要做什么来捕获用户选择？

提前致谢，

蒙特

<?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/mx"
  creationComplete="initVars()">
    <fx:Declarations>       
      <s:RemoteObject id="CFCertService" destination="ColdFusion" source="CFCertExam.cfquiz">
        <s:method name="returnQuestions" result="resultHandler(event)"/>
        <s:method name="returnAnswers" result="answerHandler(event)"/>
      </s:RemoteObject>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.containers.FormItem;
            import mx.controls.Alert;
            import mx.controls.CheckBox;
            import mx.controls.RadioButton;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.remoting.RemoteObject;

            [Bindable]
            private var questionArray:ArrayCollection;
            private var questionType:String;
            private var answerItem:FormItem;

            [Bindable]
            private var currentQuestionCounter:int;

            [Bindable]
            private var answerArray:ArrayCollection;
            private var myOptionButton:RadioButton = new RadioButton();
            private var myOptionButton2:RadioButton = new RadioButton();

            private function initVars():void {
                currentQuestionCounter = 0;
                btnPrev.enabled = false;
                btnNext.enabled = false;
            }

            private function answerHandler(event:ResultEvent):void {
                answerArray = event.result as ArrayCollection;
                var i:int;
                answerForm.removeAllChildren();
                answerItem = new FormItem();
                answerForm.addChild(answerItem);

                switch (questionType) {
                    case "True or False":
                    {   
                            myOptionButton.label = "True";
                            if (answerArray.getItemAt(0).Answer_Choice == "True") {
                              myOptionButton.value = 1;
                            } else {
                                myOptionButton.value = 0;
                            }


                            answerItem.addChild(myOptionButton);                            

                            myOptionButton2.label = "False";             
                            if (answerArray.getItemAt(0).Answer_Choice == "False") {
                                myOptionButton2.value = 1;
                            } else {
                                myOptionButton2.value = 0;
                            }
                            answerItem.addChild(myOptionButton2);                       
                            answerItem.addEventListener(MouseEvent.CLICK, selectionHandler);                            
                            break;
                    }

                    case "Multiple Choice (Single Selection)":
                    {
                        for (i=0; i<answerArray.length; i++) {
                            var myOptionButton1:RadioButton = new RadioButton();
                            myOptionButton1.label = answerArray.getItemAt(i).Answer_Choice; 
                            if (answerArray.getItemAt(i).Corect_Flag == "1") {
                                myOptionButton1.value = 1;
                            } else {
                                myOptionButton1.value = 0;
                            }                           
                            answerItem.addChild(myOptionButton1);                           
                        }
                        break;
                    }

                    case "Multiple Choice (Multiple Selection)":
                    {
                        for (i=0; i<answerArray.length; i++) {
                            var myCheckBox:CheckBox = new CheckBox();
                            myCheckBox.label = answerArray.getItemAt(i).Answer_Choice;             
                            answerItem.addChild(myCheckBox);                            
                        }
                        break;
                    }
                }

                answerForm.x = 380;
                answerForm.y = 200;
            }

            private function selectionHandler(event:MouseEvent):void {
                Alert.show(event.currentTarget.toString());
            }

            private function resultHandler(event:ResultEvent):void {
                questionArray = event.result as ArrayCollection;

                txt1Questions.htmlText = questionArray.getItemAt(currentQuestionCounter).Question_Text;
                questionType = questionArray.getItemAt(currentQuestionCounter).Question_Type;
                btnNext.enabled = true;
                CFCertService.returnAnswers(questionArray.getItemAt(currentQuestionCounter).Question_ID);
            }

            private function buttonEventHandler():void {
                CFCertService.returnQuestions();
                btnStartExam.enabled = false;
            }

            private function btnPrevEventHandler():void {
                currentQuestionCounter--;
                if (currentQuestionCounter == 0) {
                    btnPrev.enabled = false;
                }
                if (currentQuestionCounter < questionArray.length) {
                    btnNext.enabled = true;
                }
                txt1Questions.htmlText = questionArray.getItemAt(currentQuestionCounter).Question_Text;
                questionType = questionArray.getItemAt(currentQuestionCounter).Question_Type;
                CFCertService.returnAnswers(questionArray.getItemAt(currentQuestionCounter).Question_ID);

            }

            private function answerReturnHandler(questionIndex:int):void {
            }

            private function btnNextEventHandler():void {
                currentQuestionCounter++; 

                if (currentQuestionCounter > 0) {
                    btnPrev.enabled = true;
                }
                if (currentQuestionCounter >= (questionArray.length - 1)) {
                    btnNext.enabled = false;
                }
                txt1Questions.htmlText = questionArray.getItemAt(currentQuestionCounter).Question_Text;
                questionType = questionArray.getItemAt(currentQuestionCounter).Question_Type;
                CFCertService.returnAnswers(questionArray.getItemAt(currentQuestionCounter).Question_ID);

            }
        ]]>
    </fx:Script>

    <mx:Text id="txt1Questions" x="129" y="124"/>
    <s:Button id="btnStartExam" label="Start Exam" click="buttonEventHandler()" x="370" y="54"/>

    <mx:Form id="answerForm"/>
    <s:Button x="129" y="436" label="Previous" id="btnPrev" click="btnPrevEventHandler()" enabled="false"/>
    <s:Button x="642" y="436" label="Next" id="btnNext" click="btnNextEventHandler()" enabled="false"/>

</s:Application>

Answer 1

您的代码中的问题是 currentTarget 引用了您添加事件侦听器的 UIComponent，您将其添加到 FormItem 而不是 RadioButtons。

两种选择

1. 如果要继续给FormItem添加事件监听，应该使用target而不是currentTarget来获取实际点击的item的引用，而不是上面有监听的UIComponent .但是，您应该知道，如果您向 FormItem 添加任何其他内容（例如，Labels、RichText 等），这些项目也会在单击时触发事件侦听器。

2. 另一种选择是向每个 RadioButtons 添加事件侦听器（它们都可以使用 selectionHandler），然后 currentTarget 就可以正常工作了。

此外，对于那些只允许单选的问题，您可能希望使用RadioButtonGroup。然后你只需要使用 RadioButtonGroup 上的 Event.CHANGE 来触发你的selectionHandler。

其他资源

查看 Flex in a Week 系列中的 video on event bubbling。