Creating a vertical LinkBar in Flex

I was playing around with the Flex LinkBar control this morning and somehow I never noticed it had a direction property. Well, it does, so I made a quick little app which filters an XML data provider based on which tab you’re on.

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            public var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            public var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            public var BulletCritical:Class;
        ]]>
    </mx:Script>

    <mx:XML id="itemsXML">
        <items>
            <item label="Item 1" status="warning" />
            <item label="Item 2" status="critical" />
            <item label="Item 3" status="critical" />
            <item label="Item 4" status="check" />
            <item label="Item 5" status="warning" />
            <item label="Item 6" status="check" />
            <item label="Item 7" status="check" />
            <item label="Item 8" status="critical" />
        </items>
    </mx:XML>

    <mx:String id="CHECK">check</mx:String>
    <mx:String id="WARNING">warning</mx:String>
    <mx:String id="CRITICAL">critical</mx:String>

    <mx:XMLListCollection id="checkColl"
            source="{itemsXML.item.(@status == CHECK)}" />

    <mx:XMLListCollection id="warningColl"
            source="{itemsXML.item.(@status == WARNING)}" />

    <mx:XMLListCollection id="criticalColl"
            source="{itemsXML.item.(@status == CRITICAL)}" />

    <mx:HBox>
        <mx:LinkBar id="linkBar"
                direction="vertical"
                dataProvider="{viewStack}"
                themeColor="haloOrange" />

        <mx:ViewStack id="viewStack"
                width="200"
                height="120"
                backgroundColor="white">
            <mx:Canvas id="checkCanvas"
                    label="Success ({checkColl.length})"
                    icon="{BulletCheck}"
                    width="100%"
                    height="100%">
                <mx:DataGrid id="checkGrid"
                        dataProvider="{checkColl}"
                        width="100%"
                        height="100%" />
            </mx:Canvas>
            <mx:Canvas id="warningCanvas"
                    label="Warning ({warningColl.length})"
                    icon="{BulletWarning}"
                    width="100%"
                    height="100%">
                <mx:DataGrid id="warningGrid"
                        dataProvider="{warningColl}"
                        width="100%"
                        height="100%" />
            </mx:Canvas>
            <mx:Canvas id="criticalCanvas"
                    label="Critical ({criticalColl.length})"
                    icon="{BulletCritical}"
                    width="100%"
                    height="100%">
                <mx:DataGrid id="criticalGrid"
                        dataProvider="{criticalColl}"
                        width="100%"
                        height="100%" />
            </mx:Canvas>
        </mx:ViewStack>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.