Flex item renderer - change alpha when clicked

Question

I want to change the alpha of Rect when list item is clicked but I could not solve that. And I don't know how exactly do this as I'm doing it on Rectangle inside item renderer, is there any suggestion?

CODE:

<s:List id="list" labelField="name" dataProvider="{items}" top="20" bottom="20" left="20" right="20" 
                contentBackgroundAlpha="0"
                change="list_changeHandler(event)">
            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer width="100%" height="200" autoDrawBackground="false" contentBackgroundAlpha="0">

                        <s:Group width="100%" height="100%">
                            <s:Rect id="rect" left="0" right="0" top="0" bottom="0" alpha="0.3">
                                <s:fill>
                                    <s:SolidColor color="#FFFFFF" 
                                                   />
                                </s:fill>
                            </s:Rect>
                            <s:Image source="{data.icon}" top="30" horizontalCenter="0"/>
                            <s:Label text="{data.name}" top="100" horizontalCenter="0" color="#101010" fontWeight="bold" fontSize="16"/>
                            <s:Label text="{data.line1}" top="130" horizontalCenter="0" color="#343434" fontSize="14"/>
                            <s:Label text="{data.line2}" top="150" horizontalCenter="0" color="#343434" fontSize="14"/>
                        </s:Group>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>
            <s:layout>
                <s:TileLayout requestedColumnCount="3" requestedColumnCount.landscape="4" columnAlign="justifyUsingWidth"/>
            </s:layout>
        </s:List>

score 2 · Accepted Answer · answered Jun 06 '12 at 14:47

2

You can use the ItemRenderer's states for this. Add these states to your ItemRenderer:

<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">
    <s:fill>
        <s:SolidColor color.normal="0x0000ff" 
                      color.hovered="0x00ff00" 
                      color.selected="0xff0000" />
    </s:fill>
</s:Rect>

With this code your renderer will be blue by default; it will turn green when you hover over it; and red when you select it. The same can of course be done with the alpha value.

answered Jun 06 '12 at 14:47

RIAstar

11,912
20
37

+1 from me; I didn't know the ItemRenderer class had states predefined. – JeffryHouser Jun 06 '12 at 14:54
@www.Flextras.com Just take a look at the `ItemRenderer#getCurrentRendererState()` code – RIAstar Jun 06 '12 at 14:55
Thanks! Very helpful example for me to understand the use of states!.. (I don't use them frequently but I think I'll do from now) thanks again! – Zaur Guliyev Jun 06 '12 at 15:00
1

@lbstr The 'new' state mechanism is one of Spark's most powerful features. I use them all the time. You have to realize though that this example is a special case, because the states and their triggers are already predefined in the ItemRenderer class (e.g. user hovers over renderer with mouse > switch to 'hovered' state). In most cases you'll have to set up those triggers yourself. – RIAstar Jun 06 '12 at 15:09

Flex item renderer - change alpha when clicked

1 Answers1