Flex: How to resize DisplayObject to fit panel in Flex application

Question

I am trying to attach some of my actionscript class, inherited from Sprite, to my Flex application by attaching it to a UIComponent, then add UIComponent to a panel. However, the size of my Sprite class appears to be larger than the panel. So, I try to resize it using DisplayObject.scale property, but I need to know the size of my container. Since I try to make my code reusable, I figure that I should let my Sprite class handle the resize by getting it via its parent property (let's say, I can resize it by set

this.scaleX = this.parent.Width/this.width or something like this)

However, my Sprite class's parent, which is the UIComponent, has width/height of 0. So, my question is: 1) Is there any better way to resize DisplayObject class to fit its container when attached to Flex object? 2) If you know, why my UIComponent's size remain 0 and my DisplayObject still appears at its full size?

Here's my code, using Flash Builder 4:

private var loader:Loader = new Loader();
private function testLoader():void {
  var urlRequest:URLRequest = new URLRequest("http://localhost/welcome.png");
  loader.load(urlRequest);
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaderLoadComplete);
}

private function onLoaderLoadComplete(e:Event):void {
  loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoaderLoadComplete);
  var ui : UIComponent = new UIComponent();
  ui.addChild(loader);
  panelTest.addElement(ui);
  trace("ui.width = " + ui.width);
  trace("ui.height = " + ui.height);
  trace("loader.width = " + loader.width);
  trace("loader.height = " + loader.height);
  trace("panelTest.width = " + panelTest.width);
  trace("panelTest.height = " + panelTest.height);
}

And this is the result when run:

ui.width = 0
ui.height = 0
loader.width = 571
loader.height = 411
panelTest.width = 480
panelTest.height = 320

Answer 1

1. I think it's the other way around: the parent should set the child element size while rendering. You can override the updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) method to set the size of your loader child. See Advanced Visual Components in ActionScript.
2. I guess that the size of your ui is not really 0. The size is updated later after the layout and rendering process. So you have to wait for the layout to complete after adding a component to stage.

Answer 2

About the remaining 0, unfortunately is a known (grrr) problem: http://www.mail-archive.com/[email protected]/msg39998.html

You can try to access it in a hacked way (using the mx_internal namespace): http://stackoverflow.com/questions/1131486/flex-get-width-of-dynamically-created-custom-uicomponent

Adding the sprite directly to the panel may also be helpful. This can be done by adding the loader to the panel's rawChildren: http://www.actionscript.org/forums/showthread.php3?p=728034

Enjoy.