How to add a 'Graphic' to an itemrenderer at runtime? - apache-flex

Question

May be this is very simple but right now I am unable to put a solution for it. Here is brief description of my problem:
I have a dictionary of clipart objects as:
clipartDict['cat'] = Cat; //Cat.mxml
clipartDict['dog'] = Dog; //Dog.mxml
Cat.mxml:
<s:Graphic>
<s:Path x="2.86723" y="-0.000106812" data="M3.45943 80.3419C3.06051 77.3605 0.002399>
</s:Path>
</s:Graphic>
MyView.mxml (relevant code):
<s:SkinnableDataContainer width="300" dataProvider="{clipArts}">
<s:layout>
<s:TileLayout requestedColumnCount="1"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
import models.vo.ClipArtVO;
// (data as ClipArtVO).clipArtFileName represents the 'key' in dictionary.
// Now, how can I display the relevent clipart from dict based on the key
// this.addElement throws an Type Coercion error
]]>
</fx:Script>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:SkinnableDataContainer>
Can anyone suggest me a solution or any idea to implement it in any different way?
Thanks.

Answer 1

What you've put in that Dictionary are Class references and not instances. You'll have to create an instance of the desired Graphic to add it to the displayList. So there are two methods to fix your issue.
Method 1
Put instances of the Graphics in the Dictionary (instead of Class references):
clipartDict['cat'] = new Cat();
clipartDict['dog'] = new Dog();
Then simply add it to the displayList:
var graphic:Graphic = clipartDict[(data as ClipArtVO).clipArtFileName];
addElement(graphic);
Method 2
Create an instance of the Class reference on the fly. We keep the Dictionary as it was:
clipartDict['cat'] = Cat;
clipartDict['dog'] = Dog;
and create an instance and add it to the displayList like this:
var Graphic:Class = clipartDict[(data as ClipArtVO).clipArtFileName];
addElement(new Graphic());

Answer 2

You should be able to wrap your cat.mxml file inside a SpriteVisualElement. It's a bit of tedium, but basically do this:
protected var sprite :SpriteVisualElement;
protected var class : Class;
protected var graphicInstance : Graphic;
protected function dataChangeMethod():void{
// (data as ClipArtVO).clipArtFileName represents the 'key' in dictionary.
// You told us about the key, but not the value. I'm assuming the value is an actual class
// and not an instance of the class
class = (data as ClipArtVO).clipArtFileName;
// create an instance of the class
graphicInstance = new class();
// create the new spriteVisualElement instance
sprite = new SpriteVisualElement();
// Add the graphic instance as a child to the spriteVisualElement
// you may need to do any sizing of the graphicInstance before adding it
sprite.addChild(graphicInstance);
// add the Sprite Visual Element as a child to your container
this.addElement(sprite);
}