I have created a small custom component that internally uses the drawing API on multiple instances of UIComponent (internally using drawRect()).
However, at runtime the component's width and height properties both return zero (0), and when placed inside a container the component does not lay out properly. I have skimmed, without luck, the docs for "Creating and Extending Flex 3 Components <http://livedocs.adobe.com/flex/3/html/Part4_CreateComps_1.html>" among other sources. One thing that really strikes me is that my code is very similar to that used in the example in the Language Reference docs for flash.display.Graphics: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Graphics.html#includeExamplesSummary In the Graphics example when I trace width it returns a value, but in my code below when I trace square.width it returns zero? Any helpful guidance would be appreciated :-) Thanks, g package { import mx.containers.Canvas; import mx.core.UIComponent; public class MyComp extends Canvas { public var squareSize:uint = 10; public var squaresTotal:uint = 13; public var color:uint = 0xf8b34e; private var currentAlpha:Number = 1.0; private var square:UIComponent = new UIComponent(); public function MyComp() { super(); square.graphics.beginFill(color, 1); square.graphics.drawRect(0, 0, squareSize, squareSize); square.graphics.endFill(); square.alpha = currentAlpha; this.addChild(square); for (var i:Number=1; i<(squaresTotal-1); i++) { square = new UIComponent(); currentAlpha = 1.0 - (i * 1/squaresTotal) ; square.graphics.beginFill(color, 1); square.graphics.drawRect( (squareSize*1.25*i), 0, squareSize, squareSize); square.graphics.endFill(); square.alpha = currentAlpha; trace("**MyComp square width: "+ square.width); // RETURNS 0 this.addChild(square); } this.invalidateSize(); //should I override? this.invalidateProperties(); //should I override? this.invalidateDisplayList(); //should I override? this.measure(); //should I override? this.updateDisplayList(unscaledWidth, unscaledHeight); //should I override? trace(">>MyComp height: "+ this.height); // RETURNS 0 trace(">>MyComp width: "+ this.width); // RETURNS 0 trace(">>MyComp measuredWidth: "+ this.measuredWidth); // RETURNS 0 trace(">>MyComp unscaledWidth: "+ this.unscaledWidth); // RETURNS 0 trace(">>MyComp square width: "+ square.width); // RETURNS 0 } } }
