How to draw a circle in a 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 the circle to be drawn. How can i achieve this?

Answer 1

There is no MXML circle there, so you need to create an environment control yourself, and then you can 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 own control if you declare a namespace to link 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>

The code above was introduced into the StackOverflow editor, so check if it works!

UIComponent Sprite. Adobe .

EDIT:

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

Answer 2

, eclipse

( )

:

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

Answer 3

:

        <s:Ellipse x="60" y="60" width="80" height="80">
            <s:stroke>                  
                <s:LinearGradientStroke rotation="90">
                    <s:entries>
                        <s:GradientEntry color="white" ratio="0.5"/>
                        <s:GradientEntry color="black" ratio="0.5" />
                    </s:entries>
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>

Answer 4

, Flex :

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

:)

Answer 5

..

, . ( , ), MyCircle , mouseDown DragSource.

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 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
        }
    }
}

( , ) . , , .

- , adobe docs - , . MyCircle, , .

Answer 6

Degrafa.