<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
	
	<mx:List id="myListNav" height="100%" width="40" styleName="fseTree" selectedIndex="{currentView}"
		dataProvider="{views}" change="changeView()" />
	
	
	
<mx:Script>
	<![CDATA[
		
		import mx.events.FlexEvent;
		
		[Bindable]
		public var views:Array = [
		 	{icon:"application", label:""},
		 	{icon:"accordion", label:""},
		 	{icon:"applicationControlBar", label:""},
		 	{icon:"button", label:""},
		 	{icon:"buttonBar", label:""},
		 	{icon:"checkBox", label:""},
		 	{icon:"colorPicker", label:""},
		 	{icon:"comboBox", label:""},
		 	{icon:"dataGrid", label:""},
		 	{icon:"dateChooser", label:""},
		 	{icon:"hDividedBox", label:""},
		 	{icon:"hRule", label:""},
		 	{icon:"hScrollBar", label:""},
		 	{icon:"hSlider", label:""},
		 	{icon:"linkBar", label:""},
		 	{icon:"linkButton", label:""},
		 	{icon:"list", label:""},
		 	{icon:"menuBar", label:""},
		 	{icon:"numericStepper", label:""},
		 	{icon:"panel", label:""},
		 	{icon:"button", label:""},
		 	{icon:"progressBar", label:""},
		 	{icon:"radioButton", label:""},
		 	{icon:"tabNavigator", label:""},
		 	{icon:"textArea", label:""},
		 	{icon:"textInput", label:""},
		 	{icon:"toggleButtonBar", label:""},
		 	{icon:"toolTipIcon", label:""},
		 	{icon:"tree", label:""},
		 	{icon:"vDividedBox", label:""},
		 	{icon:"vRule", label:""},
		 	{icon:"vScrollBar", label:""},
		 	{icon:"vSlider", label:""}
		];
	
		[Bindable]
		public var currentView:Number = 0;
		
		      [Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-application.png")]
		public var application:Class;
        
        [Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-Accordion.png")]
		public var accordion:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-ApplicationControlBar.png")]
		public var applicationControlBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-Button.png")]
		public var button:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-CheckBox.png")]
		public var checkBox:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-ComboBox.png")]
		public var comboBox:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-DataGrid.png")]
		public var dataGrid:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-DateChooser.png")]
		public var dateChooser:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-HRule.png")]
		public var hRule:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-HScrollBar.png")]
		public var hScrollBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-HSlider.png")]
		public var hSlider:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-LinkBar.png")]
		public var linkBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-List.png")]
		public var list:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-MenuBar.png")]
		public var menuBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-NumericStepper.png")]
		public var numericStepper:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-Panel.png")]
		public var panel:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-TabNavigator.png")]
		public var tabNavigator:Class;

		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-TextArea.png")]
		public var textArea:Class;
	
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-TextInput.png")]
		public var textInput:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-Tree.png")]
		public var tree:Class;

		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-VRule.png")]
		public var vRule:Class;
	
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-VScrollBar.png")]
		public var vScrollBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-VSlider.png")]
		public var vSlider:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-RadioButton.png")]
		public var radioButton:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-ProgressBar.png")]
		public var progressBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-ToolTip.png")]
		public var toolTipIcon:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-ToggleButtonBar.png")]
		public var toggleButtonBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-ButtonBar.png")]
		public var buttonBar:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-LinkButton.png")]
		public var linkButton:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-HDividedBox.png")]
		public var hDividedBox:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-VDividedBox.png")]
		public var vDividedBox:Class;
		
		[Bindable]
		[Embed(source="lib-flex-style-explorer-assets-TreeIcons-ColorPicker.png")]
		public var colorPicker:Class;
		
        
         private function changeView():void {
        	  currentView = myListNav.selectedIndex; 
        	  this.dispatchEvent( new Event("change") );
        }
		 
		
	]]>
</mx:Script>	

<mx:Metadata>
        [Event("change")]
    </mx:Metadata>

</mx:Box>