Is there a way to choose an MXML component at UI construction time based on the value of a field?

Question

I have a flex MXML UI that is building a set of radio buttons using the Repeater component:

<mx:Repeater id="radios"
             dataProvider="{_lists.(@id == _question.single.@response_list).group.listItem}">
    <mx:RadioButton groupName="responses"
                    label="{radios.currentItem.@text}"
                    data="{radios.currentItem.@level}"/>
</mx:Repeater>

What I want to do is have the component within the repeater -- the RadioButton in this example -- be chosen based on the value of a property of radios.currentItem: If the value of currentItem is "foo", for example, I want a Button there, or if it's "bar" I want a RadioButton. Is it possible to perform this kind of conditional construction in an MXML component, or must I revert to ActionScript to do it?

I'm thinking of something along these lines:

<mx:Repeater id="r" dataProvider="{list}">
    <mx:If test="{r.currentItem.@type == 'radio'}">
        <mx:RadioButton label="{r.currentItem.@text}" />
    </mx:If>
    <mx:If test="{r.currentItem.@type == 'specify'}">
        <custom:Specify label="{r.currentItem.@text}" />
    </mx:If>
</mx:Repeater>

Answer 1

I think you have to use action script for any conditions. An conditional statement doesn't seem to exist in mxml. Although you could include both elements and use inline as to set the visible state.

<mx:Repeater id="r" dataProvider="{list}">
   <mx:RadioButton label="{r.currentItem.@text}" visible="{r.currentItem.@type == 'radio'}" />
   <custom:Specify label="{r.currentItem.@text}" visible="{r.currentItem.@type == 'specify'}" />
</mx:Repeater>

See http://www.firemoss.com/post.cfm/Powerful-MXML-Bindings-with-Ternary--Operators for more examples.

Answer 2

I would use AS3 for this. My opinion is that its best to use mxml for the display and AS3 for the logic... similar to how in .Net you have the code-behind

Answer 3

The right (and really only sensible) way to do it would be with a plain ol' for loop and ActionScript:

for each (var o:Object in yourDataProvider)
{
    if (o.someProperty)
    {
     var rb:RadioButton = new RadioButton();
     yourContainer.addChild(rb);
    } 
    else
    {
     var s:Specify = new Specify();
     yourContainer.addChild(s);
    }
}

You could do as slashnick suggests, and just add both components with each iteration of the Repeater, toggling their display based on a test of some sort (in which case I'd probably suggest including the includeInLayout attribute as well), but you'd be bloating your display list by doing so, and it doesn't scale -- eventually, you just end up doing it in ActionScript anyway.