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'

Answer 1

Thanks for trying to help guys, but I found the quickest/simple solution to be be just as simple as copying the DefaultComplexItemRender from the SDK into a custom one, and then changing this one line of code

autoDrawBackground="false"

It’s simple and it worked.