How to move Icon to the end of TabBar's label in flex 3

Question

I'm newbie to Flex. How to move the icon to the end of the TabBar's label. The TabBars label area comes like first icon image and then label text. I want to have their label first and then the icon image. how to interchange their positions?

and particularly when i click on the icon(exactly on the icon only not including the TabBar's Label) i want to show a alert box.

Please help me to find the solution to this problem. Thanks in Advance.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
      <![CDATA[
                    import mx.controls.Alert;

        [Bindable]
        [Embed(source="/assets/graphics/arrowRight.jpg")]                 
        public var myIcon1:Class;
        [Embed(source="/assets/graphics/btn_done_off.gif")]                 
        public var myIcon2:Class;
        [Embed(source="/assets/graphics/btn_exit_off.gif")]                 
        public var myIcon3:Class;
        [Embed(source="/assets/graphics/arrowRightBig.jpg")]                 
        public var myIcon4:Class;
        [Embed(source="/assets/graphics/question2.gif")]                 
        public var myIcon5:Class;





    ]]>
</mx:Script>
<mx:Spacer height="1000" >

</mx:Spacer>
<mx:TabNavigator width="50%" height="50%" >
    <mx:VBox id="one" label="one" icon="{myIcon1}" click="Alert.show('Tab1');" />
    <mx:VBox id="two" label="two" icon="{myIcon2}" click="Alert.show('Tab2');" />
    <mx:VBox id="three" label="three" icon="{myIcon3}" click="Alert.show('Tab3');" />
    <mx:VBox id="four" label="four" icon="{myIcon4}" click="Alert.show('Tab4');" />
    <mx:VBox id="five" label="five" icon="{myIcon5}" click="Alert.show('Tab5');" />
</mx:TabNavigator></mx:Application>

Answer 1

Try this,

<mx:canvas creationComplete="init()">
            <mx:Script> <![CDATA[
                                import mx.controls.Alert;

                    [Bindable]
                    [Embed(source="/assets/graphics/arrowRight.jpg")]                 
                    public var myIcon1:Class;
                    [Embed(source="/assets/graphics/btn_done_off.gif")]                 
                    public var myIcon2:Class;
                    [Embed(source="/assets/graphics/btn_exit_off.gif")]                 
                    public var myIcon3:Class;
                    [Embed(source="/assets/graphics/arrowRightBig.jpg")]                 
                    public var myIcon4:Class;
                    [Embed(source="/assets/graphics/question2.gif")]                 
                    public var myIcon5:Class;

                    private function init():void {
                       var tab:Tab;
                       var len:uint = tabBar.numChildren;
                       for (i=0; i<len; i++) {
                           tab = tabBar.getChildAt(i) as Tab;
                           tab.labelPlacement = "left";
                        }
        ]]>
        </mx:Script>
        <mx:Spacer height="1000" >

        </mx:Spacer>
        <mx:TabNavigator id="tabBar" width="50%" height="50%" >
            <mx:VBox id="one" label="one" icon="{myIcon1}" click="Alert.show('Tab1');" />
            <mx:VBox id="two" label="two" icon="{myIcon2}" click="Alert.show('Tab2');" />
            <mx:VBox id="three" label="three" icon="{myIcon3}" click="Alert.show('Tab3');" />
            <mx:VBox id="four" label="four" icon="{myIcon4}" click="Alert.show('Tab4');" />
            <mx:VBox id="five" label="five" icon="{myIcon5}" click="Alert.show('Tab5');" />
        </mx:TabNavigator>
    </mx:canvas>

Hope it helps.