Setting the data provider of a Flex ButtonBar control to a ViewStack container

The following example shows how you can set the data provider of a ButtonBar control in Flex to a ViewStack container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/setting-the-data-provider-of-a-flex-buttonbar-control-to-a-viewstack-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ButtonBar id="buttonBar"
            dataProvider="{viewStack}"
            buttonHeight="32" />

    <mx:ViewStack id="viewStack">
        <mx:VBox label="Button"
                icon="@Embed('assets/Button.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="Button..." />
        </mx:VBox>
        <mx:VBox label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="ButtonBar..." />
        </mx:VBox>
        <mx:VBox label="CheckBox"
                icon="@Embed('assets/CheckBox.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="CheckBox..." />
        </mx:VBox>
        <mx:VBox label="ColorPicker"
            icon="@Embed('assets/ColorPicker.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="ColorPicker..." />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.