Adding a control bar to a custom Spark Application component in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/08/adding-a-control-bar-to-a-custom-spark-application-component-in-flex-4/ -->
<comps:FancyApplication name="Spark_Application_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/halo"
        xmlns:comps="comps.*"
        skinClass="skins.FancyApplicationSkin">
    <comps:headerContent>
        <mx:Form styleName="plain">
            <mx:FormItem label="width:">
                <s:HSlider id="sliderW"
                        minimum="100"
                        maximum="1000"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="height:">
                <s:HSlider id="sliderH"
                        minimum="100"
                        maximum="1000"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </comps:headerContent>

    <s:Rect id="rect"
            width="{sliderW.value}"
            height="{sliderH.value}">
        <s:fill>
            <s:LinearGradient rotation="45">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="yellow" />
                <s:GradientEntry color="haloBlue" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

</comps:FancyApplication>

The custom Spark Application class, FancyApplication.as, is as follows:

/** http://blog.flexexamples.com/2009/06/08/adding-a-control-bar-to-a-custom-spark-application-component-in-flex-4/ */
package comps {
    import spark.components.Application;
    import spark.components.Group;

    public class FancyApplication extends Application {

        [SkinPart(required="true")]
        public var headerGroup:Group;

        public function FancyApplication() {
            super();
        }

        private var _headerContent:Array;

        [ArrayElementType("mx.core.IVisualElement")]
        public function get headerContent():Array {
            return _headerContent;
        }

        public function set headerContent(value:Array):void {
            _headerContent = value;

            if (headerGroup) {
                headerGroup.removeAllElements();

                var idx:int;
                var len:int = value.length;
                for (idx = 0; idx < len; idx++) {
                    headerGroup.addElement(value[idx]);
                }
            }
        }

        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);

            if (instance == headerGroup) {
                if (headerGroup) {
                    headerGroup.removeAllElements();

                    var idx:int;
                    var len:int = _headerContent.length;
                    for (idx = 0; idx < len; idx++) {
                        headerGroup.addElement(_headerContent[idx]);
                    }
                }
            }
        }

        override protected function partRemoved(partName:String, instance:Object):void {
            super.partRemoved(partName, instance);

            if (instance == headerGroup) {
                if (headerGroup) {
                    headerGroup.removeAllElements();
                }
            }
        }
    }
}

And the custom skin class, FancyApplicationSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/08/adding-a-control-bar-to-a-custom-spark-application-component-in-flex-4/ -->
<s:Skin name="FancyApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        alpha.disabled="0.5" >

    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.Application")]
        ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!-- fill -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <s:SolidColor color="{hostComponent.backgroundColor as uint}" />
        </s:fill>
    </s:Rect>

    <mx:ApplicationControlBar id="appControlBar" width="100%" cornerRadius="0">
        <s:Group id="headerGroup" left="0" right="0" top="0" />
    </mx:ApplicationControlBar>

    <s:Scroller id="scroller" left="0" right="0" top="{appControlBar.height+4}" bottom="0" minWidth="0" minHeight="0">
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            <s:layout>
                <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
            </s:layout>
        </s:Group>
    </s:Scroller>

</s:Skin>