Créer une skin personnalisée sur le contrôle Spark TabBar dans Flex 4

L’exemple suivant montre comment vous pouvez créer une skin, basée sur le contrôle RadioButton, sur le contrôle Spark TabBar dans Flex 4 en définissant le style skinClass.

L’exemple suivant requiert Flash Player 10 et le SDK Adobe Flex 4. Vous pouvez télécharger la version d’évaluation d’Adobe Flash Builder 4 à l’adresse http://www.adobe.com/products/flex/. Pour télécharger la dernière version du SDK Flex 4, regardez http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex +4.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/creating-a-custom-skin-on-the-spark-tabbar-control-in-flex-4/ -->
<s:Application name="Spark_TabBar_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:VGroup horizontalAlign="center"
            horizontalCenter="0" verticalCenter="0">
        <mx:ViewStack id="vs" width="300" height="100">
            <s:NavigatorContent label="One"
                    backgroundColor="red"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Two"
                    backgroundColor="haloOrange"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Three"
                    backgroundColor="Yellow"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Four"
                    backgroundColor="haloGreen"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Five"
                    backgroundColor="haloBlue"
                    width="100%" height="100%" />
        </mx:ViewStack>
        <s:TabBar dataProvider="{vs}" skinClass="skins.CustomSparkTabBarSkin" />
    </s:VGroup>

</s:Application>

et la classe de skin personnalisée du contrôle TabBar, skins/CustomSparkTabBarSkin.mxml, se présente comme suit:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/creating-a-custom-skin-on-the-spark-tabbar-control-in-flex-4/ -->
<spark:TabBarSkin name="CustomSparkTabBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:spark="spark.skins.spark.*">

    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:RadioButton />
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>

</spark:TabBarSkin>

L’exemple en action

Traduction de l’article de Peter DeHaan:

Creating a custom skin on the Spark TabBar control in Flex 4