<mx:Array> comes in handy for States

December 2nd, 2008

Consider this situation:

You have an MXML component with multiple states. Each of these states has an associated error state that’s based on one of the other states. The overrides for each of the error states is identical – all that’s different is which state each error state is based on. Instead of duplicating the overrides for each error state, you can declare the overrides in an <mx:Array> tag, and use data binding to set the overrides property of each error state to the same array.

Alright, talking about this abstractly is kinda confusing. It will make perfect sense as soon as you see an example:

<mx:Array id="errorOverrides">
    <mx:AddChild relativeTo="{msgWrapper}">
        <mx:Label text="The following errors occurred:" styleName="popupMessageError"/>
    </mx:AddChild>
    <mx:AddChild relativeTo="{msgWrapper}">
        <mx:VBox paddingLeft="15">
            <mx:Repeater id="errorRepeater" dataProvider="{errors}" recycleChildren="true">
                <mx:Text width="{msgWrapper.width-45}" text="{errorRepeater.currentItem}"/>
            </mx:Repeater>
        </mx:VBox>
    </mx:AddChild>
</mx:Array>

<states>
    <mx:State name="twitterBroadcast">
        <mx:SetProperty target="{this}" name="bodyContent" value="{twitterBroadcastBodyContent}"/>
        <mx:SetProperty target="{this}" name="title" value="Broadcast to Twitter"/>
    </mx:State>

    <mx:State name="facebookBroadcast">
        <mx:SetProperty target="{this}" name="bodyContent" value="{facebookBroadcastBodyContent}"/>
        <mx:SetProperty target="{this}" name="title" value="Broadcast to Facebook"/>
    </mx:State>

    <mx:State name="shareError" overrides="{errorOverrides}"/>
    <mx:State name="twitterError" basedOn="twitterBroadcast" overrides="{errorOverrides}"/>
    <mx:State name="facebookError" basedOn="facebookBroadcast" overrides="{errorOverrides}"/>
</states>

This solution seems obvious as soon as you think about how you would go about declaring these states in Actionscript, but in MXML it’s really easy to feel like you would need to declare the overrides over again inside each <mx:State> tag.

Maybe I’m late to the party and everyone else figured this out already, but if not, hopefully this post will help you think about MXML in a new way.

Posted by Katy Richard
Filed in Development, Flex
No Comments »

Leave a Reply