Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I recommend you to refer to the <a href="http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/" rel="nofollow">following sample</a> and add <code>RadioButtonGroup</code> to your repeater groups and listen to <code>change</code> events instead of <code>click</code>. You can listen <code>change</code> event right in <code>RadioButtonGroup</code> and check <code>if (radioGroup.selectedValue.correct)</code> for correctness of new selection. See <a href="http://www.igorcosta.com/flex3/doc/mx/controls/RadioButtonGroup.html" rel="nofollow">corresponding documentation</a>.</p> <p>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.</p> <p>Lets look at the code.</p> <p>First, our inner component which serves answers:</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"&gt; &lt;mx:Metadata&gt; [Event(name="rightAnswerEvent", type="AnswerEvent")] &lt;/mx:Metadata&gt; &lt;mx:Script&gt; &lt;![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)); } ]]&gt; &lt;/mx:Script&gt; &lt;mx:RadioButtonGroup change="answerGroup_changeHandler(event)" id="answerGroup" /&gt; &lt;mx:Repeater dataProvider="{answers}" id="answersRepeater"&gt; &lt;mx:RadioButton group="{answerGroup}" label="{answersRepeater.currentItem.text}" value="{answersRepeater.currentItem}" /&gt; &lt;/mx:Repeater&gt; &lt;/mx:VBox&gt; </code></pre> <p>It gets <code>answers</code> collection as input and fires our custom event to inform some components about right answer (see <code>Metadata</code> tag).</p> <p>Our custom event is pretty simple an looks like the following:</p> <pre><code>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); } } } </code></pre> <p>So now our top level component:</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application layout="vertical" xmlns:local="*" xmlns:mx="http://www.adobe.com/2006/mxml"&gt; &lt;mx:Script&gt; &lt;![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var questions:ArrayCollection = new ArrayCollection(); [Bindable] private var scoreCounter:int; ]]&gt; &lt;/mx:Script&gt; &lt;mx:Label text="{'Score ' + scoreCounter}" /&gt; &lt;mx:Repeater dataProvider="{questions}" id="questionRepeater"&gt; &lt;mx:Label text="{questionRepeater.currentItem.question}" /&gt; &lt;local:AnswerGroup answers="{questionRepeater.currentItem.answers}" rightAnswerEvent="scoreCounter++" /&gt; &lt;/mx:Repeater&gt; &lt;/mx:Application&gt; </code></pre> <p>I omitted initialization code to populate our <code>Question</code> and <code>Answer</code> domain objects with data from XML (see previous thread).</p> <p>So now we have compact modularized code where every part solves its own task.</p> <p>Hope this helps!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload