Creating a vertical ButtonBar in Flex

This is a simpler version of the “Creating a vertical LinkBar in Flex” entry except it uses the Flex ButtonBar control instead of a LinkBar control. Also, instead of embedding the PNG assets in an <mx:Script /> block, I embedded the images inline using @Embed.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-a-vertical-buttonbar-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HBox>
        <mx:ButtonBar id="buttonBar"
                direction="vertical"
                dataProvider="{viewStack}"
                themeColor="haloOrange"
                fontSize="16"
                width="200"
                height="200" />

        <mx:ViewStack id="viewStack"
                backgroundColor="white"
                width="300"
                height="{buttonBar.height}">

            <mx:Canvas id="checkCanvas"
                    label="Success"
                    icon="@Embed('assets/bulletCheck.png')">
                <mx:Label text="Success" />
            </mx:Canvas>

            <mx:Canvas id="warningCanvas"
                    label="Warning"
                    icon="@Embed('assets/bulletWarning.png')">
                <mx:Label text="Warning" />
            </mx:Canvas>

            <mx:Canvas id="criticalCanvas"
                    label="Error"
                    icon="@Embed('assets/bulletCritical.png')">
                <mx:Label text="Error" />
            </mx:Canvas>

        </mx:ViewStack>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: direction