<?xml version="1.0" encoding="utf-8"?>
  <mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" label="Border Style" width="100%" creationComplete="setDefault()" >
          
          <mx:ToggleButtonBar id="togglebar" styleName="fseToggleButtons" itemClick="clickHandler(event);"
                  selectedIndex="{styleValue == 'none'?(0):styleValue == 'solid'?(1):styleValue == 'inset'?(2):3}" >
                  <mx:dataProvider>
                          <mx:Array>
                                  <mx:Object icon="{borderNone}"  toolTip="None"/>                   
                                  <mx:Object icon="{borderSolid}" toolTip="Solid"/>
                                  <mx:Object icon="{borderInset}" toolTip="Inset" />
                                  <mx:Object icon="{borderOutset}" toolTip="Outset" />
                  </mx:Array>
                  </mx:dataProvider>
          </mx:ToggleButtonBar>
          
          <mx:Script>
                  <![CDATA[
                  
                          import mx.events.ItemClickEvent; 
                          import mx.events.FlexEvent;
                          include "lib-flex-style-explorer-as-assets.ax";
                          
                          [Bindable]
                          public var styleValue:String;
                  
                          private function dispatchMyEvent():void {
                  this.dispatchEvent( new Event("dataChange") );
              }
              
               private function clickHandler(event:ItemClickEvent):void {
                       if (event.index == 0) {
                                 styleValue = 'none';
                         } else if (event.index == 1) {
                                 styleValue = 'solid';
                         } else if (event.index == 2) {
                                 styleValue = 'inset';
                         } else if (event.index == 3) {
                                 styleValue = 'outset';
                         }
                 dispatchMyEvent();
              }
             
               [Bindable]
                          public var defaultValue:String;
             
             public function setDefault():void {
                             defaultValue = styleValue;
             }
             
             public function restoreDefault():void {
                             styleValue = defaultValue;
             }
             
                  ]]>
          </mx:Script>
          
          <mx:Metadata>
          [Event("dataChange")]
      </mx:Metadata>
     
  </mx:FormItem>