Question

In my MXML file, I have a tab navigator with three vboxes.

<mx:TabNavigator width="624" height="100%">
        <mx:VBox label="Currents Quote" 
            width="100%">            
        </mx:VBox>
        <mx:VBox label="Quote Comparison" 
            width="100%">              
        </mx:VBox>
        <mx:VBox label="Reports" 
            width="100%">            
        </mx:VBox>      
</mx:TabNavigator>

Inside the VBox “Current Quote”, I want a circle to be drawn. How can I achieve it?

Answer 1

There’s no MXML circle defined, so you have to create a circle control yourself and you can then include it in your MXML.

package mypackage
{
    class MyCircle extends UIComponent
    {
        public var x:int;
        public var y:int;
        public var radius:int;

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            graphics.drawCircle(x, y, radius);
        }
    }
}

then in your MXML you can use your custom control if you declare a namespace to refer to it at the top of your containing control…

<mx:VBox label="Currents Quote" width="100%">
    <mycontrols:MyCircle x="30" y="30" radius="30"/>
</mx:VBox>

Code above was typed into the StackOverflow editor, so check it works!

There’s a lot of help on the web for extending UIComponent and Sprite. The Adobe docs are pretty comprehensive.

EDIT:
Include your controls as a namespace in the enclosing control or application

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:mycontrols="mypackage.*" >
<mx:Script>

HTH