Creating a semi-transparent item renderer on a Spark List control in Flex 4

The following example shows how you can create a semi-transparent item renderer on a Spark List control in Flex 4 by creating a custom Spark List skin and a custom item renderer which sets the alpha property on the selected/hovered states.

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/2010/04/06/creating-a-semi-transparent-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_alpha_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="lst"
            itemRenderer="skins.CustomItemRenderer"
            skinClass="skins.CustomListSkin"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List skin (which defines a background image fill for the List), skins/CustomListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/06/creating-a-semi-transparent-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<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">
    <!-- states -->
    <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.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <!--- 
        Defines the appearance of the the List's drop indicator.
        To customize the drop indicator appearance, create a custom ListSkin class.
        The List's layout takes care to size and position the dropIndicator.
        The size of the <code>dropIndicator</code> is typically set to the size of the gaps between the items.
        The minimum and maximum settings are typically respected only in the direction
        along the major axis (the gap axis).  For example a VerticalLayout ignores the 
        <code>minWidth</code> and <code>maxWidth</code> settings, 
        but respect <code>minHeight</code> and <code>maxHeight</code>.
        -->
        <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('assets/pattern_143.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 Spark item renderer, skins/CustomItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/06/creating-a-semi-transparent-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<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">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
 
    <s:Rect left="0" right="0" top="0" bottom="0"
            includeIn="hovered,selected">
        <s:fill>
            <s:SolidColor color="haloBlue"
                    alpha="0.4" alpha.selected="0.6" />
        </s:fill>
    </s:Rect>
 
    <s:Label text="{data.label}"
            left="2" right="2" top="4" bottom="4" />
 
</s:ItemRenderer>

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.

One thought on “Creating a semi-transparent item renderer on a Spark List control in Flex 4

Comments are closed.