How to draw a circle in Flex MXML file?

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

Answer 2

There can be one more option to create a circle, eclipse

Create Box with background color (if you want to fill it with any color) and with specific width and height and provide corner radius with exactly half of width

example :

<mx:Box cornerRadius="3"  borderStyle="solid" borderColor="0x5F4C0B" backgroundColor="0x5F4C0B" width="6" height="6" />