How could i put image in button bar

Question

import events.ToolbarEvent;
import mx.events.FlexEvent;
import mx.events.ItemClickEvent;
import mx.events.SliderEvent;
import mx.core.*;
import spark.skins.spark.ImageSkin;
import ui.presenters.MainPresentationModel;
            [Bindable]
            public var fileButtons:Array = [{label:"Open"},{label:"Save"}];
            [Bindable]
            public var navButtons:Array =
                {label:"Adjust",state:MainPresentationModel.ADJUST_STATE},
                {label:"Touchup",state:MainPresentationModel.TOUCHUP_STATE},
                {label:"Effects",state:MainPresentationModel.EFFECT_STATE}
            [Bindable]
            public var historyButtons:Array = [{label:"Undo"},{label:"Redo"}];
            private function handleFileClick(e:ItemClickEvent):void
                if (e.label == "Open")
                    dispatchEvent(new ToolbarEvent(ToolbarEvent.OPEN));
                else if (e.label == "Save")
                    dispatchEvent(new ToolbarEvent(ToolbarEvent.SAVE));
            private function handleNavClick(e:ItemClickEvent):void
                callLater(handleNavigation,[e.item.state]);
            private function handleNavigation(state:String):void
                if (navBar.selectedIndex == -1)
                    dispatchEvent(new ToolbarEvent(ToolbarEvent.SHOW));
                else
                    dispatchEvent(new ToolbarEvent(ToolbarEvent.SHOW,true,false,state));
            private function handleHistoryClick(e:ItemClickEvent):void
                if (e.label == "Undo")
                    dispatchEvent(new ToolbarEvent(ToolbarEvent.UNDO));
                else if (e.label == "Redo")
                    dispatchEvent(new ToolbarEvent(ToolbarEvent.REDO));
            private function handleZoomChange(e:SliderEvent):void
                dispatchEvent(new ToolbarEvent(ToolbarEvent.ZOOM, true, false, null, e.value));
        ]]>
    </mx:Script>
    <mx:ButtonBar dataProvider="{fileButtons}" itemClick="handleFileClick(event)"   />
    <mx:ToggleButtonBar id="navBar" dataProvider="{navButtons}" toggleOnClick="true"
        creationComplete="event.target.selectedIndex=-1" itemClick="handleNavClick(event)"/>
    <mx:Button label="Show Source" click="dispatchEvent(new ToolbarEvent(ToolbarEvent.SRC))"  />
    <mx:Spacer width="100%" />
    <mx:ButtonBar dataProvider="{historyButtons}" itemClick="handleHistoryClick(event)"  />
    <mx:HSlider value="1.0" minimum="0.1" maximum="3.0" snapInterval="0.1" liveDragging="true" change="handleZoomChange(event)" />
</mx:HBox>
using this code what shoud i do to add image on button bar

Answer 1

I would extend the button bar and in create children I will add the image.