Setting a custom skin class on a Spark CheckBox control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/setting-a-custom-skin-class-on-a-spark-checkbox-control-in-flex-4/ -->
<s:Application name="Spark_CheckBox_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="skinClass:">
                <s:ButtonBar id="btnBar"
                        requireSelection="true"
                        selectedIndex="1"
                        change="btnBar_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:Object label="spark.skins.spark.CheckBoxSkin" />
                            <fx:Object label="skins.CustomCheckBoxSkin" />
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="tgBtn" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|CheckBox {
            skinClass: ClassReference("skins.CustomCheckBoxSkin");
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import flash.utils.getDefinitionByName;
            import skins.CustomCheckBoxSkin;
            import spark.events.IndexChangeEvent;
            import spark.skins.spark.CheckBoxSkin;
 
            protected function btnBar_changeHandler(evt:IndexChangeEvent):void {
                var clazz:Class = getDefinitionByName(btnBar.selectedItem.label) as Class;
                styleManager.getStyleDeclaration("spark.components.CheckBox").setStyle("skinClass", clazz);
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup id="chGr1"
                gap="0"
                left="10" right="10" top="10" bottom="10">
            <s:CheckBox id="ch1" label="CheckBox One" enabled="{tgBtn.selected}"/>
            <s:CheckBox id="ch2" label="CheckBox Two" enabled="{tgBtn.selected}" selected="true" />
            <s:CheckBox id="ch3" label="CheckBox Three" enabled="{tgBtn.selected}" selected="true" />
            <s:CheckBox id="ch4" label="CheckBox Four" enabled="{tgBtn.selected}" selected="true" />
            <s:CheckBox id="ch5" label="CheckBox Five" enabled="{tgBtn.selected}" />
            <s:CheckBox id="ch6" label="CheckBox Six" enabled="{tgBtn.selected}" />
            <s:CheckBox id="ch7" label="CheckBox Seven" enabled="{tgBtn.selected}" selected="true" />
            <s:CheckBox id="ch8" label="CheckBox Eight" enabled="{tgBtn.selected}" selected="true" />
            <s:CheckBox id="ch9" label="CheckBox Nine" enabled="{tgBtn.selected}" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/setting-a-custom-skin-class-on-a-spark-checkbox-control-in-flex-4/ -->
<s:SparkSkin name="CustomCheckBoxSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.CheckBox")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. 
               For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the symbol fill items that should be colored by the "symbolColor" style. */
            static private const symbols:Array = [];
 
            override public function get symbolItems():Array {
                return symbols;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            private static const focusExclusions:Array = ["labelDisplay"];
 
            override public function get focusSkinExclusions():Array {
                return focusExclusions;
            }
        ]]>
    </fx:Script>
 
    <s:Group verticalCenter="0" width="16" height="16">
        <s:BitmapImage source="@Embed('skins/bullet_red.png')"
                source.upAndSelected="@Embed('skins/bullet_green.png')"
                source.overAndSelected="@Embed('skins/bullet_green.png')"
                source.downAndSelected="@Embed('skins/bullet_green.png')"
                source.disabled="@Embed('skins/bullet_white.png')"
                source.disabledAndSelected="@Embed('skins/bullet_black.png')" />
    </s:Group>
 
    <!-- Label -->
    <s:Label id="labelDisplay"
            textAlign="start"
            verticalAlign="middle"
            maxDisplayedLines="1"
            left="18" right="0" top="3" bottom="3" verticalCenter="2" />
 
</s:SparkSkin>