<?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="100%" styleName="fseTree" selectedIndex="{currentView}"
                  dataProvider="{views}" change="changeView()" itemRenderer="lib_flex_style_explorer_ListRenderer" />
          
          
          
  <mx:Script>
          <![CDATA[
                  
                  import mx.events.FlexEvent;
                  
                  [Bindable]
                  public var views:Array = [
                           {label:"Application", flag:false},
                           {label:"Accordion", flag:false},
                           {label:"ApplicationControlBar", flag:false},
                           {label:"Button", flag:false},
                           {label:"ButtonBar", flag:false},
                           {label:"CheckBox", flag:false},
                           {label:"ColorPicker", flag:false},
                           {label:"ComboBox", flag:false},
                           {label:"DataGrid", flag:false},
                           {label:"DateChooser", flag:false},
                           {label:"HDividedBox", flag:false},
                           {label:"HRule", flag:false},
                           {label:"HScrollBar", flag:false},
                           {label:"HSlider", flag:false},
                           {label:"LinkBar", flag:false},
                           {label:"LinkButton", flag:false},
                           {label:"List", flag:false},
                           {label:"MenuBar", flag:false},
                           {label:"NumericStepper", flag:false},
                           {label:"Panel", flag:false},
                           {label:"PopUpButton", flag:false},
                           {label:"ProgressBar", flag:false},
                           {label:"RadioButton", flag:false},
                           {label:"TabNavigator", flag:false},
                           {label:"TextArea", flag:false},
                           {label:"TextInput", flag:false},
                           {label:"ToggleButtonBar", flag:false},
                           {label:"ToolTip", flag:false},
                           {label:"Tree", flag:false},
                           {label:"VDividedBox", flag:false},
                           {label:"VRule", flag:false},
                           {label:"VScrollBar", flag:false},
                           {label:"VSlider", flag:false}
                  ];
          
                  [Bindable]
                  public var currentView:Number = 0;
                  
                  private function changeView():void {
                  
                        currentView = myListNav.selectedIndex; 
                    this.dispatchEvent( new Event("change") );
          }
          
        
                   
                  
          ]]>
  </mx:Script>        
  
  <mx:Metadata>
          [Event("change")]
      </mx:Metadata>
  
  </mx:Box>