Creating a bitmap background fill on a Spark List control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_background_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">
 
    <s:List id="list"
            itemRenderer="skins.CustomItemRenderer"
            skinClass="skins.CustomListSkin"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>The</fx:String>
                <fx:String>Quick</fx:String>
                <fx:String>Brown</fx:String>
                <fx:String>Fox</fx:String>
                <fx:String>Jumps</fx:String>
                <fx:String>Over</fx:String>
                <fx:String>The</fx:String>
                <fx:String>Lazy</fx:String>
                <fx:String>Dog</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minWidth="112"
        alpha.disabled="0.5"
        blendMode="normal">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.List")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For list, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["scroller", "background"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [];
 
            override public function get contentItems():Array {
                return contentFill;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    scroller.minViewportInset = 1;
                } else {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    scroller.minViewportInset = 0;
                }
 
                borderStroke.alpha = getStyle("borderAlpha");
                borderStroke.color = getStyle("borderColor");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component id="dropIndicator">
            <s:Group minWidth="3" minHeight="3" maxWidth="3" maxHeight="3">
                <s:Rect left="0" right="0" top="0" bottom="0">
                    <s:fill>
                        <!--- Defines the color of the background. -->
                        <s:SolidColor color="0xBBBBBB" />
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke color="0x868686" weight="1"/>
                    </s:stroke>
                </s:Rect>
            </s:Group>
        </fx:Component>
    </fx:Declarations>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the background appearance of the list-based component. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <s:BitmapFill id="bgFill" source="@Embed('pattern_149.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!--- The Scroller component to add scroll bars to the list. -->
    <s:Scroller id="scroller"
                left="0" top="0" right="0" bottom="0"
                minViewportInset="1"
                hasFocusableChildren="false">
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
            <s:layout>
                <!--- The default layout is vertical and measures at least for 5 rows.
                When switching to a different layout, HorizontalLayout for example,
                make sure to adjust the minWidth, minHeihgt sizes of the skin -->
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
 
</s:SparkSkin>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="false">
    <!-- states -->
    <s:states>
        <s:State name="normal" stateGroups="normalStates" />
        <s:State name="hovered" stateGroups="hoveredStates" />
        <s:State name="selected" stateGroups="selectedStates" />
        <s:State name="normalAndShowsCaret" stateGroups="normalStates,caretStates" />
        <s:State name="hoveredAndShowsCaret" stateGroups="hoveredStates,caretStates"/>
        <s:State name="selectedAndShowsCaret" stateGroups="selectedStates,caretStates"/>
    </s:states>
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke.caretStates>
            <s:SolidColorStroke color="{getStyle('selectionColor')}"
                    weight="1"/>
        </s:stroke.caretStates>
        <s:fill>
            <s:SolidColor color.normalStates="{getStyle('contentBackgroundColor')}"
                    color.hoveredStates="{getStyle('rollOverColor')}"
                    color.selectedStates="{getStyle('selectionColor')}"
                    alpha="0.5"/>
        </s:fill>
    </s:Rect>
 
    <s:Label id="labelDisplay"
            verticalCenter="0"
            left="3" right="3" top="5" bottom="4" />
 
</s:ItemRenderer>