How to set DefaultComplexItemRenderer background alpha to 0

Question

I have a simple list with a tileLayout of images. From the examples I've looked at it looks like i'm supposed to use the DefaultComplexItemRenderer. It works, and my array of images loads fine, but each item has a solid background. I need the background behind each image to have an alpha of 0. How Can I set that?

In the past i've just made a custom itemRenderer, and overrided the drawBackground function on itemRenderers, but DefaultComplexRenderer doesn't have a drawBackground function to override.

Is there another simple solution in the flex code? OR it would be awesome if someone could show me how to make a custom DefaultComplexRenderer.

NOTE: This is a Flex MOBILE project. I know some itemRenderer's aren't friendly with mobile. Adobe says to "always do item renderers in AS3 rather than mxml" so, keep that in mind.

Thanks!

Here's my code:

    <fx:Declarations>
        <s:ArrayList id="arrList">
            <s:BitmapImage source="assets/images/one.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/two.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/three.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/four.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
        </s:ArrayList>
    </fx:Declarations>



<s:List id="extrasList_list" width="100%" height="100%"
                        dataProvider="{arrList}"
                        itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
                        horizontalCenter="0"
                        verticalCenter="0">
                    <s:layout>
                        <s:TileLayout requestedColumnCount="-1"
                                      requestedRowCount="-1"
                                      horizontalGap="10"
                                      verticalGap="10"
                                      orientation="rows"
                                      columnAlign="justifyUsingWidth" 
                                      />
                    </s:layout>
                </s:List>

Things I've tried:

this in my main css file...

s|DefaultComplexItemRenderer {
    contentBackgroundAlpha:0;
}

but i get this warning, and it doesn't work...

-Cannot resolve namespace qualified type 'DefaultComplexItemRenderer' in CSS selector 'DefaultComplexItemRenderer'

Sunil D. Sunil D. · Accepted Answer · 2012-04-28T06:01:59

[Edit] The contentBackgroundAlpha and contentBackgroundColor styles for a Flex List are somewhat misleading! You generally want to style the item renderers. In the context of a list, these styles only affect a tiny bit of "chrome" that can appear around the list. See below for details on styling the renderers.

If you just want to show an image, the IconItemRenderer is the way to go. It extends LabelItemRenderer so it's optimized for mobile and also has two text fields as well.

Flex List components recycle item renderers to be efficient, and only create as many renderers as needed to display what is currently visible. To do this, the list populates the renderer's data property. So you want to configure your item renderer using this data property.

An efficient way to do that is to override the setter function for data. Create a new Actionscript class that extends IconItemRenderer add this to it:

override public function set data(value:Object):void
{
    super.data = value;
    // IconItemRenderer already has a BitmapImage component, it's property name is iconDisplay
    // your ArrayList should therefore only contain Strings representing the image sources
    // note how I've changed your ArrayList in the declarations tag below
    iconDisplay.source = data.imageSource;
}

You'll likely want to configure that iconDisplay BitmapImage to look how you want it. The method above may get called frequently, so you can put code that only needs to happen once somewhere else... by overriding a Flex component lifecycle method like createChildren():

override protected function createChildren():void
{
    super.createChildren();
    iconDisplay.scaleMode="letterbox";
    iconDisplay.smooth=true;
}

Now tell the List to use your renderer w/syntax like this:

<s:List itemRenderer="com.yourdomain.or.whatever.MyIconItemRendererClass" />

Styling the renderer:

<s:List alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" selectionColor="#FF0000" />

Another way is to override the mobile item renderer's drawBackground() and/or drawBorder() protected methods and draw your own stuff w/the graphics api (or nothing at all).

Supplying the data:

Instead of giving the list an array of BitmapImage components, you give it an array of objects that contain your data. It's better to use strongly typed objects, but this works too:

<fx:Declarations>
        <s:ArrayList id="arrList">
            <fx:Object imageSource="assets/images/one.png" />
            <fx:Object imageSource="assets/images/two.png" />
            <fx:Object imageSource="assets/images/three.png" />
        </s:ArrayList>
</fx:Declarations>

I like writing renderers in Actionscript... But there is also an MXML example in the link to IconItemRenderer docs at the top. It also shows how you to set the values of the two text areas in this renderer (with labelField and messageField). You can also specify a function that returns the label/message/icon values (with labelFunction, messageFunction, and iconFunction).

How to set DefaultComplexItemRenderer background alpha to 0

3 Answers