Xml – way to choose an MXML component at UI construction time based on the value of a field

adobeapache-flexflex3mxml

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>

Best Answer

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.

Related Topic