Creating a bitmap fill on a Spark Application container control bar in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/ -->
<s:Application name="Spark_Application_skinClass_BitmapFill_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"
        controlBarVisible="{chckBx.selected}"
        skinClass="skins.CustomApplicationSkin">
    <s:controlBarContent>
        <s:Button label="Control bar button" />
    </s:controlBarContent>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            left="20" top="20" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/ -->
<s:Skin name="CustomApplicationSkin"
        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.disabled="0.5"
        alpha.disabledWithControlBar="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                bgRectFill.color = getStyle("backgroundColor");
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- fill -->
    <!--- 
    A rectangle with a solid color fill that forms the background of the application.
    The color of the fill is set to the Application's backgroundColor property.
    -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <!--- Application Control Bar -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                 includeIn="normalWithControlBar, disabledWithControlBar" >
 
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
                <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
                <s:fill>
                    <s:BitmapFill source="@Embed('assets/pattern_143.gif')" fillMode="repeat" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    </s:Group>
 
</s:Skin>