<?xml version="1.0" encoding="utf-8"?>
  <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >
          
   <mx:Tree id="myTreeNav" height="100%" width="100%" selectedIndex="0" labelField="@label" styleName="fseTree" disclosureClosedIcon="{arrowSide}"
           disclosureOpenIcon="{arrowDown}" showRoot="false" dataProvider="{treeNavData}" change="treeChanged(event)" iconField="@icon"  />        
          
  
  <mx:XMLList id="treeNavData">
      <node label="Application" data="0" icon="application"   />
      <node label="Buttons" data="-1" >
              <node label="Button"  data="3" icon="button"  />
              <node label="ButtonBar" data="4" icon="buttonBar"   />
              <node label="LinkBar" data="14" icon="linkBar" />
              <node label="LinkButton" data="15" icon="linkButton"  />
              <node label="PopUpButton" data="20" icon="button"  />
              <node label="ToggleButtonBar" data="26" icon="toggleButtonBar"  />
      </node>
      <node label="Containers" data="-1" >
              <node label="ApplicationControlBar" data="2" icon="applicationControlBar"  />
              <node label="HDividedBox" data="10" icon="hDividedBox"  />
              <node label="Panel" data="19" icon="panel"   />
              <node label="VDividedBox" data="29" icon="vDividedBox"  />
      </node>
     <node label="Form Elements" data="-1" >
              <node label="CheckBox" data="5" icon="checkBox"  />
              <node label="ComboBox" data="7" icon="comboBox" />
              <node label="DateChooser" data="9" icon="dateChooser"  />
              <node label="NumericStepper" data="18" icon="numericStepper" />
              <node label="RadioButton" data="22" icon="radioButton" />
              <node label="TextArea" data="24" icon="textArea"  />
              <node label="TextInput" data="25" icon="textInput"  />
      </node>
      <node label="Lists" data="-1">
              <node label="List" data="16" icon="list"  />
              <node label="Tree" data="28" icon="tree"  />
      </node>
      <node label="Navigators" data="-1" >
              <node label="Accordion" data="1" icon="accordion"  />
              <node label="TabNavigator" data="23" icon="tabNavigator"  />
      </node>
      <node label="Rules" data="-1">
              <node label="HRule" data="11" icon="hRule"  />
              <node label="VRule" data="30" icon="vRule"  />
      </node>
      <node label="ScrollBars" data="-1">
              <node label="HScrollBar" data="12" icon="hScrollBar"  />
              <node label="VScrollBar" data="31" icon="vScrollBar"  />
      </node>
      <node label="Sliders" data="-1">
              <node label="HSlider" data="13" icon="hSlider"  />
              <node label="VSlider" data="32" icon="vSlider"  />
      </node>
       <node label="ColorPicker" data="6" icon="colorPicker"  />
      <node label="DataGrid" data="8" icon="dataGrid"  />
      <node label="MenuBar" data="17" icon="menuBar"   />
      <node label="ProgressBar" data="21" icon="progressBar"   />
      <node label="ToolTip" data="27" icon="toolTipIcon" flag="true" />
  </mx:XMLList>
          
  <mx:Script>
          <![CDATA[
                  
                  import mx.events.FlexEvent;
                  
                  [Bindable]
                  public var currentView:Number = 0;
                  
                  
                  
                    [Bindable]
              public var selectedNode:XML;
         
                   
                  public function treeChanged(event:Event):void {
                  selectedNode=Tree(event.target).selectedItem as XML;
                  currentView = selectedNode.@data;
                  if (currentView != -1) {
                           this.dispatchEvent( new Event("change") );
                  } 
          }
        
          
            [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-disclose-close.png")]
                  public var arrowSide:Class;
                  
                  [Bindable]
                  [Embed(source="lib-flex-style-explorer-assets-disclose-open.png")]
                  public var arrowDown: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;
                  
                  
                  
          ]]>
  </mx:Script>        
  
  <mx:Metadata>
          [Event("change")]
      </mx:Metadata>
  
  </mx:Box>