Flex中如何利用RadioButton和RadioButtonGroup控件创建一份简单的问卷测试的例子

By Minidxer | October 23, 2008

接下来的例子演示了Flex中如何利用RadioButton和RadioButtonGroup控件，创建一份简单的问卷测试。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="Quiz_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Style>
  9.         RadioButton {
  10.             paddingLeft: 20;
  11.             horizontalGap: 4;
  12.         }
  13.  
  14.         .QuestionVBox {
  15.             paddingBottom: 50;
  16.         }
  17.  
  18.         .QuestionText {
  19.             fontWeight: bold;
  20.         }
  21.     </mx:Style>
  22.  
  23.     <mx:Script>
  24.         <![CDATA[
  25.             import mx.controls.Alert;
  26.  
  27.             private function checkAnswers():void {
  28.                 var success:Boolean = true;
  29.  
  30.                 success = checkGroup(q1_group) && success;
  31.                 success = checkGroup(q2_group) && success;
  32.  
  33.                 Alert.show("SUCCESS = " + success);
  34.             }
  35.  
  36.             private function checkGroup(rbg:RadioButtonGroup):Boolean {
  37.                 var rb:RadioButton;
  38.                 var valid:Boolean = true;
  39.                 var i:int;
  40.  
  41.                 /* If the user got the answer wrong... */
  42.                 if (rbg.selectedValue != true) {
  43.                     /* Set the 'valid' flag to false. */
  44.                     valid = false;
  45.                     /* Get the currently selected radio button, if any. */
  46.                     rb = rbg.selection;
  47.                     /* Actually, check if a radio button WAS selected... */
  48.                     if (rb != null) {
  49.                         /* If there was a selected radio button, and it
  50.                            was the wrong answer, hide the answer. */
  51.                         rb.includeInLayout = false;
  52.                         rb.visible = false;
  53.                     }
  54.                 /* Else the user selected the right answer. Hey, it was
  55.                    bound to happen eventually! */
  56.                 } else {
  57.                     /* Loop over all the radio buttons in this group. */
  58.                     for (i = 0; i < rbg.numRadioButtons; i++) {
  59.                         /* Create a reference to the current radio button. */
  60.                         rb = rbg.getRadioButtonAt(i);
  61.                         /* If the radio button is NOT selected... */
  62.                         if (!rb.selected) {
  63.                             /* Hide all wrong answers, they already got
  64.                                the question right. */
  65.                             rb.includeInLayout = false;
  66.                             rb.visible = false;
  67.                         }
  68.                     }
  69.                 }
  70.  
  71.                 /* Return the value of the 'valid' flag. */
  72.                 return valid;
  73.             }
  74.         ]]>
  75.     </mx:Script>
  76.  
  77.     <mx:RadioButtonGroup id="q1_group" enabled="false" />
  78.     <mx:RadioButtonGroup id="q2_group" enabled="false" />
  79.  
  80.     <mx:Panel title="Subject: Periodic Table" width="100%" height="100%">
  81.         <mx:VBox styleName="QuestionVBox" width="100%">
  82.             <mx:Text styleName="QuestionText"
  83.                     selectable="false"
  84.                     width="100%">
  85.                 <mx:text>1) Which three groups of the Periodic Table contain the most elements classified as metalloids (semimetals)?</mx:text>
  86.             </mx:Text>
  87.  
  88.             <!-- Wrong -->
  89.             <mx:RadioButton id="q1_a"
  90.                     label="1, 2, and 13"
  91.                     group="{q1_group}" />
  92.             <!-- Wrong -->
  93.             <mx:RadioButton id="q1_b"
  94.                     label="2, 13, and 14"
  95.                     group="{q1_group}" />
  96.             <!-- RIGHT -->
  97.             <mx:RadioButton id="q1_c"
  98.                     label="14, 15, and 16"
  99.                     group="{q1_group}"
  100.                     value="true" />
  101.             <!-- Wrong -->
  102.             <mx:RadioButton id="q1_d"
  103.                     label="16, 17, and 18"
  104.                     group="{q1_group}" />
  105.         </mx:VBox>
  106.  
  107.         <mx:VBox styleName="QuestionVBox" width="100%">
  108.             <mx:Text styleName="QuestionText"
  109.                     selectable="false"
  110.                     width="100%">
  111.                 <mx:text>2) Which element has the highest first ionization energy?</mx:text>
  112.             </mx:Text>
  113.  
  114.             <!-- Wrong -->
  115.             <mx:RadioButton id="q2_a"
  116.                     label="sodium"
  117.                     group="{q2_group}" />
  118.             <!-- Wrong -->
  119.             <mx:RadioButton id="q2_b"
  120.                     label="aluminum"
  121.                     group="{q2_group}" />
  122.             <!-- Wrong -->
  123.             <mx:RadioButton id="q2_c"
  124.                     label="calcium"
  125.                     group="{q2_group}" />
  126.             <!-- RIGHT -->
  127.             <mx:RadioButton id="q2_d"
  128.                     label="phosphorus"
  129.                     group="{q2_group}"
  130.                     value="true" />
  131.         </mx:VBox>
  132.  
  133.         <mx:ControlBar horizontalAlign="right">
  134.             <mx:Button label="Check answers"
  135.                     click="checkAnswers();" />
  136.         </mx:ControlBar>
  137.     </mx:Panel>
  138.  
  139. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: RadioButton, RadioButtonGroup | No Comments » | 1,419 views Tags: , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll