漂亮的TabNavigator

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TabNavigator {
            backgroundColor: black;
            cornerRadius: 0;
            tabStyleName: "MyTabs";
            firstTabStyleName: "MyFirstTab";
            lastTabStyleName: "MyLastTab";
            selectedTabTextStyleName: "MySelectedTab";
        }

        .MyTabs {
            backgroundColor: black;
            cornerRadius: 0;
            color: black;
        }

        .MyFirstTab,
        .MyLastTab {
            backgroundColor: black;
            cornerRadius: 0;
            color: black;
        }

        .MySelectedTab {
            backgroundColor: haloBlue;
            color: haloBlue;
            textRollOverColor: haloBlue;
        }
    </mx:Style>

    <mx:TabNavigator id="tabNavigator"
            width="100%"
            height="100%"
            tabHeight="40">
        <mx:VBox label="Panel 1" backgroundColor="haloOrange">
            <mx:Label text="TabNavigator container panel 1"/>
        </mx:VBox>
        <mx:VBox label="Panel 2" backgroundColor="haloGreen">
            <mx:Label text="TabNavigator container panel 2"/>
        </mx:VBox>
        <mx:VBox label="Panel 3" backgroundColor="haloBlue">
            <mx:Label text="TabNavigator container panel 3"/>
        </mx:VBox>
        <mx:VBox label="Panel 4" backgroundColor="haloSilver">
            <mx:Label text="TabNavigator container panel 4"/>
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>