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

The following example shows how you can set a bitmap background fill on a Spark List control in Flex 4 by creating a custom Spark List skin with a BitmapFill object and setting a custom item renderer.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

The custom Spark List skin file, skins/CustomListSkin.mxml, is as follows:

<?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>

And the custom item renderer, skins/CustomItemRenderer.mxml, is as follows:

<?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>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

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

  1. Hi Peter,

    could you give me a hint on how the item renderer has access to the property selectionColor for example? I’m using the Flex 4.0 SDK 14159 and the compiler produces an error 1120: Access of undefined property selectionColor. I have the same issue with contentBackgroundColor and rollOverColor. In your online example it works perfectly and I have tried to rebuild that example without any changes but it won’t run. Do you think it is a problem with the SDK version? Even if it would run I’d wonder how the item renderer can be aware of these properties?!

    Thanks and best regards!
    Thilo

    1. @Thilo,

      Nope, just looks like the APIs changed between the time I originally wrote the example and when Flex 4.0 shipped.
      I updated the code above so it should work in the final Flex 4.0.0.14159 SDK and the Flex 4.1.0.16076 SDK. I’ll work on updating the SWF/ZIP too at some point.

      Peter

  2. You can also create a custom bitmap fill item renderer in ActionScript, as seen in the following example:

    package {
        import mx.graphics.BitmapFill;
        import mx.graphics.BitmapFillMode;
        import spark.components.ResizeMode;
        import spark.skins.spark.ListSkin;
     
        public class CustomListSkinAS extends ListSkin {
            protected var bmpFill:BitmapFill;
     
            [Embed("pattern_149.gif")]
            protected const img:Class;
     
            public function CustomListSkinAS() {
                super();
     
                bmpFill = new BitmapFill();
                bmpFill.alpha = 0.3;
                bmpFill.fillMode = BitmapFillMode.REPEAT;
                bmpFill.source = img;
                background.fill = bmpFill;
            }
        }
    }

    Peter

Comments are closed.