CODEWITHSUNDEEP
apache-flexactionscriptflex4flex-spark
M.D.
M.D.

Reputation: 1896

How to add a 'Graphic' to an itemrenderer at runtime?

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.

Upvotes: 0

Views: 343

Answers (2)

RIAstar
RIAstar

Reputation: 11912

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());

Upvotes: 3

JeffryHouser
JeffryHouser

Reputation: 39408

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);
}

Upvotes: 0

Related Questions