Search code examples
actionscript-3apache-flexitemrenderer

swap graphic objects inside a spark ItemRenderer

I'm writing a s:ItemRenderer to render some simple graphical components in my app. Each element can have multiple shapes that can be selected by the user, i.e. a certain element can be a square, or a circle, or a star, or whatever else.

The simplest way I could think for doing this was to include all possible shapes in a s:Group and then manage their visible tag depending on what shape the user has selected. Is there a better way to do that?

Also, if I encapsulate the group in a separate MXML component, how do I propagate the state of the itemRenderer (say "hovered") down to the MXML component that manages the shapes?

thank you!

f

Edited: here's a code snippet to better explain the situation. Let's say you want to display three types of objects alternatively - the IR below with an AS snippet that turns visible to false for 2 out of the 3 objects definitely does the trick, but seems so ugly to me. In the mean time I found setCurrentState(stateName:String, playTransition:Boolean=true) to propagate the state down, so that's solved.

<s:ItemRenderer>
<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
</s:states>
<s:Group width="100%">
    <s:Rect width="20" height="10" radiusX="3" radiusY="3">
        <s:stroke>
            <s:SolidColorStroke color="Black" weight="1" pixelHinting="true"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="red" />
        </s:fill>
    </s:Rect>
    <s:Rect id="square" width="10" height="10" radiusX="3" radiusY="3">
        <s:stroke>
            <s:SolidColorStroke color="Black" weight="1" pixelHinting="true"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="green"/>
        </s:fill>
    </s:Rect>
    <s:Ellipse id="circle" visible="true" width="10" height="10">
        <s:stroke>               
            <s:SolidColorStroke color="Black" pixelHinting="true" weight="1"/>     
        </s:stroke>          
        <s:fill>
            <s:SolidColor color.normal="yellow" color.hovered="0xCEDBEF"/>
        </s:fill>
    </s:Ellipse>
</s:Group>

Solution

  • The simplest way I could think for doing this was to include all possible shapes in a s:Group and then manage their visible tag depending on what shape the user has selected. Is there a better way to do that?

    Yes. Item renderers need to be made as light weight as possible. Using the includeInLayout would be a bit better since it will only add what you need to the display list.

    Also, if I encapsulate the group in a separate MXML component, how do I propagate the state of the itemRenderer (say "hovered") down to the MXML component that manages the shapes?

    I'm not quite sure I understand the question. Item renderer are data driven, so their instances have no reliable state. Renderer instances may display any given data item at any given time. Any information passed to an item renderer should be passed down through it's data item or you will run into syncing errors in your display.