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

Take a look at Degrafa.

Answer 2

So in Flex this is a possibility:

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(30, 30, 30);
this.addChild(mySprite);

That should work :)

Answer 3

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 public 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 4

Embellishing for drag and drop etc...

Yes, pretty much anything is possible. If you don't want to use a pie chart (which I recommend you look at because it might make a lot of the drawing code very simple) then you need to embellish the MyCircle class above to trap the mouseDown event and to enable dragging from it using a DragSource object.

package mypackage
{
    class MyCircle extends UIComponent
    {
        ...snip...

        // to initiate a drag from this object
        private function MouseDown(e:MouseEvent):void
        {
            var ds:DragSource = new DragSource();
            if (data)
            {
                 // I'm adding the object's data to it, but you need to decide what you want in here
                ds.addData(data, "MyDragAction");
                mx.managers.DragManager.doDrag(this, ds, e);
            }
        }

        // to handle a drop
        private function HandleDrop(e:DragEvent):void
        {
            mx.managers.DragManager.acceptDragDrop(e.currentTarget);
            // you can get at whatever you put in the drag event here
        }
    }
}

You'll need to set these functions (and whichever else you wind up supporting for drag/drop) as event listeners on this object. You can do that in the object's constructor, you just have to make sure you are listening for the right event.

You have some digging to do, and the adobe docs are your friend, but it is all perfectly possible. As you add more to MyCircle you will get greater benefit from having it factored out into a separate control.