Extending UIComponent, createChildren question

Question

All,
I'm trying to make some simple components.  For the sake of making this exercise very simple, I'm using a callout control from Adobe posted here.
http://www.adobe.com/devnet/flex/samples/fig_callout/
The source of that component can be viewed here:
http://www.adobe.com/devnet/flex/samples/fig_callout/srcview/index.html
More specifically, I'm looking at the src/AirportCallout.mxml file.
I'm looking at making a class that extends UIComponent.
public class AlertWrapper extends UIComponent
        private var callout : Callout;
        public function AlertWrapper(){
            super();
            this.buttonMode = true;
            //this.addEventListener(MouseEvent.CLICK, alertClicked);
            this.graphics.drawCircle(25, 25, 5);
       override protected function createChildren():void{
            super.createChildren();
            this.callout = new Callout();
            this.callout.x = 25
            this.callout.y = 25;
            this.addChild(this.callout);
        override protected function measure():void{
            super.measure();
This is obviously a very simple example dumbed down for the sake of figuring out what's going on.  I'm drawing a circle at point (25, 25) with a radius of 5.  I'm then trying to place a callout component (something that adobe made and works well) onto this component as a child.
When I add an instance of the AlertWrapper class to the display list (In the real world situation, I add it to a container using the addChild method), it does not render the callout correctly (it's the wrong size, much smaller than it should be).  I'm stumped trying to figure out why this is.  If I look at the AirportCallout.mxml class, I see that it isn't given a size by default.  If I give it a size of 200, it does render correctly (albeit the wrong size).
Can anyone shed any light of this?  I'm new to designing my own controls that extend UIComponent.
Thanks,
Dan

Answer 1

public class AlertWrapper extends UIComponent
         private var callout : Callout;
        public function  AlertWrapper(){
            super();
            this.buttonMode =  true;
            //this.addEventListener(MouseEvent.CLICK,  alertClicked);
            this.graphics.drawCircle(25, 25, 5);
        override protected function createChildren():void{
             super.createChildren();
            this.callout = new Callout();
             this.callout.x = 25
            this.callout.y = 25;
             this.addChild(this.callout);
         override protected function measure():void{
             super.measure();
            this.measuredHeight = this.callout.getExplicitOrMeasuredHeight();
            this.measuredWidth = this.callout.getExplicitOrMeasuredWidth();
Doing something like this does not render correctly.  It looks cut off like this.
var alertWrapper : AlertWrapper = new AlertWrapper();
var canvas : Canvas = new Canvas();
canvas.addChild(alertWrapper);
When debugging, the alertWrapper measuredHeight and measuredWidth are set to 35 and 32.
It looks like this
If I change the code in alertWrapper and change the createChildren and measure functions to as follows, I can hack my way through it:
override protected function createChildren():void{
             super.createChildren();
            this.callout = new Callout();
             this.callout.x = 25
            this.callout.y = 25;
            //  this.addChild(this.callout);
         override protected function measure():void{
             super.measure();
            // this.measuredHeight =  this.callout.getExplicitOrMeasuredHeight();
             // this.measuredWidth =  this.callout.getExplicitOrMeasuredWidth();
Then, if I add it to my container as such, it renders correctly but I don't understand why.  When I debug with this second method, the measuredWidth and measuredHeight of the alertWrapper are both 0 (which is weird since the circle is being drawn).
var alertWrapper : AlertWrapper = new AlertWrapper();
var canvas : Canvas = new Canvas();
canvas.addChild(alertWrapper);
canvas.addChild(alertWrapper.callout);
This second method seems very hacky and I would like to understand what I have to do to make it work so I only have to add the alertWrapper to the container to get it to render correctly.  Please help!