3 Replies Latest reply on May 31, 2009 12:38 AM by New_With_Flex

    addEventListener() is not working !!

    New_With_Flex

      Hello Everybody,

       

      I am new in Flex. Trying to add event listener to a custom shape. I was not able to make it working.  Could anybody help me out ? The code is given below.

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

       

       

       

       

      xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute" creationComplete="init();">

      <mx:Script>

      <![CDATA[

       

       

       

       

       

      import mx.controls.Alert;

       

       

       

       

       

      public function handler():void

       

      {

      Alert.show(

       

      "hello..");

       

      }

       

       

      public function init():void

      {

      canvas1.addEventListener(MouseEvent.CLICK,handler);

       

      Alert.show(

       

      "Creation complete");

      }

       

      ]]>

       

      </mx:Script>

      <mx:Canvas

       

       

       

      id="canvas1" width="686" height="204" borderColor="#270D14" backgroundColor="#710404"/>

       

      </mx:Application>

       

      If I add the property to the canvas click="handler();" , then it works. But, it does not work, if added inside the script. Any idea, where I am missing the point.

       

      Thank you in advance.

        • 1. Re: addEventListener() is not working !!
          Michael Borbor Level 4

          Set your event handler function like this

           

          public function handler(e:Event):void

           

          {

          Alert.show(

           

          "hello..");

           

          }

          1 person found this helpful
          • 2. Re: addEventListener() is not working !!
            *Prashant Shelke* Level 4

            Hi,


            your parameter missing in the event listener function... This parameter is required to get information about object from which its generated.


            Thanks.

            1 person found this helpful
            • 3. Re: addEventListener() is not working !!
              New_With_Flex Level 1

              Thank you so much. This was really helpful.

               

              What I am trying to do is, I have created a canvas and the background of that canvas is an Image ( map ). On that map, I have drawn circles and middle of that circle I have added a label.

               

              Now, I can add the event listener to the canvas the way you showed, but can not add to individual circle. The circle is drawn in a seperate AS class. I am trying to click on the circle and the circle will do some effect (zoomin, zoomout etc..).

               

              Could you please help me out.

               

              Thank you so much again.

               

              Let me put the source code here.

              //////////////////

              //Badge.as

              //////////////////

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

              package

               

               

              asset

              {

               

               

              import

              flash.display.Shape;

               

               

              import

              flash.events.MouseEvent;

               

               

               

              import

              mx.controls.Alert;

               

               

               

               

              public class Badge extends

              Shape

              {

               

               

              public function

              Badge()

              {

               

               

              super

              ();

               

               

              //drawBadge();

              }

               

               

              //private function drawBadge():void

               

               

              public function drawBadge(x:int,y:int):

              void

              {

              graphics.clear();

              graphics.lineStyle(1,0xFF0000);

              graphics.beginFill(0xFF0000,1);

              graphics.drawCircle(x,y,10);

              graphics.endFill();

              addEventListener(MouseEvent.MOUSE_OVER,handleEvents);

               

              }

               

               

              private function handleEvents(event:MouseEvent):

              void

              {

              Alert.show(

               

              "from the event handle"

              );

              }

               

              }

               

               

              }

               

               

               

              ////////test.mxml////////////////

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Application

               

               

              xmlns:mx="http://www.adobe.com/2006/mxml

              "

              layout="

               

              vertical

              "

              width="

               

              100%

              "

              height="

               

              100%

              "

              scroll="

               

              true

              "

              creationComplete="drawMarkers()"

               

              >

               

               

               

              <mx:Script>

              <![CDATA[

               

               

              import

              mx.events.EventListenerRequest;

               

               

              import

              mx.collections.ArrayCollection;

               

               

              import

              mx.controls.Text;

               

               

              import

              mx.controls.Label;

               

               

              import

              mx.controls.Alert;

               

               

              import

              mx.core.UIComponent;

               

               

              import

              flash.events.MouseEvent;

               

               

              import

              asset.Badge;

               

              [

               

              Bindable

              ]

               

               

              private var uiComponent:UIComponent = new

              UIComponent();

               

               

              public function handleMouseEvent(event:MouseEvent):

              void

              {

              Alert.show(

               

              "mouse event"

              );

              }

               

               

              private function drawMarkerAt(x:int,y:int,val:int):

              void

              {

              x = x - 50;

               

               

              var bdg:Badge = new

              Badge();

               

               

              //bdg.drawBadge(x-drawingImage.x,y-drawingImage.y);

              bdg.drawBadge(x,y);

              uiComponent.addChild(bdg);

               

               

              var label1:TextField = new

              TextField();

              label1.text=val.toString();

               

               

               

              if

              ( val < 10)

              {

               

               

              //label1.x = x-drawingImage.x-4;

               

               

              //label1.y = y-drawingImage.y-8;

              label1.x = x-4;

              label1.y = y-8;

              }

               

               

              else

              {

               

               

              //label1.x = x-drawingImage.x-7;

               

               

              //label1.y = y-drawingImage.y-8;

              label1.x = x-7;

              label1.y = y-8;

              }

               

               

              var textformat:TextFormat = new TextFormat(null,10,0xFFFFFF,true

              );

              label1.setTextFormat(textformat);

               

              uiComponent.addChild(label1);

               

              drawingImage.addChild(uiComponent);

               

              }

               

               

              private function drawMarkers():

              void

              {

               

               

              //drawingImage.addEventListener(MouseEvent.CLICK,handleMouseEvent);

               

               

               

              var labLocationsX:Array = new

              Array(183,250,310,327,363,394,461,430,286,332,416,247,268,312,315,362,384,429,237,307,247 ,304,301,360,398,428,457);

               

               

              var labLocationsY:Array = new

              Array(221,237,183,225,228,226,228,254,286,287,291,332,332,327,368,366,381,409,430,440,482 ,467,493,485,487,480,592);

               

               

              for(var

              i:int = 0;i<27;i++)

              {

              drawMarkerAt(labLocationsX[i],labLocationsY[i],

               

              /*Math.random()*30*/

              i);

              }

               

              }

              ]]>

               

               

              </mx:Script>

               

               

              <mx:Zoom id="zoomIn" duration="1000

              "

              zoomHeightTo="

               

              2" zoomWidthTo="2"

              />

               

               

              <mx:Zoom id="zoomOut" duration="1000

              "

              zoomHeightTo="

               

              1" zoomWidthTo="1"

              />

               

               

               

              <mx:Canvas id="drawingImage

              "

              backgroundImage="

               

              @Embed(source='map.png')

              "

              width="

               

              592" height="718"

              />

               

               

              <!--click="handleMouseEvent();"/>-->

              </mx:Application>