Como escrever eventos para um componente personalizado no Flex?

Question

Escrevi um componente personalizado para desenhar um círculo no Flex. Mas quando tento escrever um evento de clique ou evento para esse componente, ele não funciona.

Eu tenho o componente do círculo dentro de um 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);
      }

Componente círculo:

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

O alerta "Hello" é exibido apenas em um ponto específico e o palpite é, no momento, (175.150) as coordenadas x, y do círculo. Mas não deveria ser exibido onde quer que eu clique no componente mycircle? Como habilitá -lo dessa maneira?

Além disso, a função Mousedown não funciona para o MyCircle, mas se tiver o evento para o Vbox, os alertas serão exibidos. Por quê então? Alguém pode me guiar?

Devo escrever eventos para componentes personalizados de uma maneira diferente?

Answer 1

Não tenho certeza se isso é aplicável ou não, mas há um bug no qual alguns uicomponentes não reconheceram os eventos de clique/mousedown corretamente, a menos que tenham uma cor de fundo. Veja se a adição de uma cor de fundo ao seu círculo ajuda.

Answer 2

Há também alguns erros em seu código, por exemplo, você está perdendo tags de script em torno do seu ActionScript e pode precisar importar alerta.

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