How to write events for a custom component in flex?

Question

I have written a custom component for drawing a circle in Flex. But When I try to write a click event or mouseDown event for that component, it doesn't work.

I have the circle component inside a VBox.

 <mx:VBox label="Currents Quote" width="100%" backgroundColor="#DDDDDD">

<comp:MyCircle id="circlle" x1="175" y1="150" 
                    radius="140" click='{Alert.show("Hello");}'
                    mouseDown="handleMouseDown(event);"/>
<comp:MyLine x1="175" y1="104"/> 
 </mx:VBox>

  private function handleMouseDown(event:MouseEvent):void {

        var pt:Point = new Point(event.localX, event.localY);
        pt = event.target.localToGlobal(pt);   
        pt = circlle.globalToContent(pt);   
        var whichColor:String = "border area";

        if (pt.x < 150) {
            if (pt.y < 150)
                whichColor = "red";
            else
                whichColor = "blue";
        }
        else {
            if (pt.y < 150)
                whichColor = "green";
            else
                whichColor = "magenta";
        }

        Alert.show("You clicked on the " + whichColor);
      }

Circle component:

  package components
  {
 import mx.core.UIComponent;

 public class MyCircle extends UIComponent
 {
       public var x1:int; 
          public var y1:int; 
          public var radius:int; 

          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
         { 
        graphics.lineStyle(1, 0x000000);
        graphics.drawCircle(x1, y1, radius); 

        graphics.lineStyle(1, 0x000000);
        graphics.drawCircle(x1, y1, radius-40); 

        graphics.lineStyle(1, 0x000000);
        graphics.drawCircle(x1, y1, radius-100);
         }
     }
 }

The "Hello" Alert is displayed only at a particular point and guess is, at the point, (175,150) the x, y co-ordinates of the circle. But shouldn't it be displayed wherever I click on the MyCircle component?? how to enable it in that way?

Also the mouseDown function doesn't work for MyCircle,but if have the event for the VBox, the Alerts are displayed. Why so? Can someone guide me?

Should I write events for custom components in a different manner?

Answer 1

I'm not sure if this is applicable or not, but there is a bug where some UIComponents don't recognized click/mouseDown events correctly unless they have a background color. See if adding a background color to your circle helps.

Answer 2

There's also a few errors in your code, for example, you're missing script tags around your actionscript, and you might need to import Alert.

 <mx:VBox label="Currents Quote" width="100%" backgroundColor="#DDDDDD">

<comp:MyCircle id="circlle" x1="175" y1="150" 
                    radius="140" click='{Alert.show("Hello");}'
                    mouseDown="handleMouseDown(event);"/>
<comp:MyLine x1="175" y1="104"/> 
 </mx:VBox>

<mx:Script>
<![CDATA[
  private function handleMouseDown(event:MouseEvent):void {

        var pt:Point = new Point(event.localX, event.localY);
        pt = event.target.localToGlobal(pt);   
        pt = circlle.globalToContent(pt);   
        var whichColor:String = "border area";

        if (pt.x < 150) {
            if (pt.y < 150)
                whichColor = "red";
            else
                whichColor = "blue";
        }
        else {
            if (pt.y < 150)
                whichColor = "green";
            else
                whichColor = "magenta";
        }

        Alert.show("You clicked on the " + whichColor);
      }
]]>
</mx:Script>