Gotcha Of The Day - Flex: Adding Sprites To Container

I'm puttering away with my Flex app and I ran into a strange error. I wanted to do some hand drawing using the Graphics API. This turned out to be easy, there were lots of examples like:

  var roundObject:Shape = new Shape();

  roundObject.graphics.beginFill(0x00FF00);
  roundObject.graphics.moveTo(250, 0);
  roundObject.graphics.curveTo(300, 0, 300, 50);
  roundObject.graphics.curveTo(300, 100, 250, 100);
  roundObject.graphics.curveTo(200, 100, 200, 50);
  roundObject.graphics.curveTo(200, 0, 250, 0);
  roundObject.graphics.endFill();

  someVBox.addChild(roundObject);

The highlighted line caused my Flex app to crash. For the life of me, I couldn't add a Shape or Sprite to Container

The solution took a bit of Googling, but is well described here:

this.addChild(new Sprite())

looks simple enough doesn't it? especially if you've been working solely in Flash AS3. But if you try this line within a Flex component, you'll receive the error: 'Type Coercion failed: cannot convert flash.display::Sprite@86cc0e1 to mx.core.IUIComponent.'

This is because Flex components implement a different addChild method. although addChild is described as accepting a DisplayObject as a parameter, this DisplayObject must implement the IUIComponent interface.

A solution that worked in a hurry was to change the above to:

  var roundObject:Shape = new Shape();

  roundObject.graphics.beginFill(0x00FF00);
  roundObject.graphics.moveTo(250, 0);
  roundObject.graphics.curveTo(300, 0, 300, 50);
  roundObject.graphics.curveTo(300, 100, 250, 100);
  roundObject.graphics.curveTo(200, 100, 200, 50);
  roundObject.graphics.curveTo(200, 0, 250, 0);
  roundObject.graphics.endFill();

  someVBox.rawChildren.addChild(roundObject);

I have no idea if the above is a good idea - but it certainly let me push past my gotcha, which was much appreciated.