<?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" viewSourceURL="srcview/index.html">

	<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>

