6 Replies Latest reply on Aug 26, 2010 1:58 PM by supersonicecho

    Adding MouseEvent Support


      I frequently find myself in the situation where I want a compenent that doesn't natively support mouse events to respond to them. I've never successfully extended a component to actually respond to MouseEvents, though.


      I add [Event] metadata to the AS class, but all that does is prevent a compiler error. As far as I can tell, it doesn't actually make the class respond to mouse clicks.


      For example, I'm trying to make a rectangle respond to clicks. Here's my code:


           import spark.primitives.Rect;


          [Event(name="click", type="flash.events.MouseEvent")]
          [Event(name="doubleClick", type="flash.events.MouseEvent")]
          public class ClickRect extends Rect {
              public function ClickRect() {
              }//End constructor
          }//End ClickRect class

      How do I do this?


      Thanks, John.

        • 1. Re: Adding MouseEvent Support
          Flex harUI Adobe Employee

          If an object does not extend InteractiveObject it will be a lot of work oto

          get it to respond to mouse clicks.


          The recommended practice is to wrap the Rect in a Group and listen to the


          1 person found this helpful
          • 2. Re: Adding MouseEvent Support
            =VA=FyreHeart Level 2

            Well, that's a usable workaround. I'm not sure it will work in every situation I need it (example: a datagrid cell?) but it'll work in this situation. Thanks.

            • 3. Re: Adding MouseEvent Support
              supersonicecho Level 2

              The Rect class doesn't support mouse interaction.  The lowest level class [I think at least!] that responds to mouse interaction is the flash.display.InteractiveObject class. 


              I thin the best way to create custom components in the FLEX environment that respond to mouse events is to extend the UIComponent class. You could use a Sprite class, which is a lower level class, but pretty much everything in the framework extends UIComponenet, so you will be in good company.


              If you want a Rectangle that responds to mouse events, try this:


                   import flash.events.MouseEvent;
                   import mx.core.UIComponent;
                   public class SuperRect extends UIComponent
                        public function SuperRect()
                             addEventListener('click', clickHandler);
                        override protected function updateDisplayList(w:Number, h:Number):void 
                             graphics.beginFill(0xFFFFFF, 1);
                             graphics.lineStyle(1, 0x000000, 1);
                        private function clickHandler(e:MouseEvent):void 
                             trace('i have been clicked');

              1 person found this helpful
              • 4. Re: Adding MouseEvent Support
                =VA=FyreHeart Level 2

                Thanks, Scipio, that's quite helpful.


                I've extended UIComponent before for that reason, but I didn't this time b/c I was already extending Rect. Is there an Interface I could implement that would give me that functionality, since I can't extend both Rect and UIComponent simultaneously?



                • 5. Re: Adding MouseEvent Support
                  Flex harUI Adobe Employee

                  If you want to use Rect in a DG cell, use MXDataGridItemRenderer to wrap the

                  Rect and listen for events on the MXDGIR

                  • 6. Re: Adding MouseEvent Support
                    supersonicecho Level 2

                    I don't think you can add mouseSupport to s:Rect without a large amount of work.  I would strongly advise you not to do it this way becuase it will be a lot of work and then your SuperRectanlge may not play nice with the rest of the framework.


                    Sometimes Flex can seem a bit bloated because the lowest level component is pretty huge (UIComponenet... Group is even bigger), but once you accept it and work with the framework, life gets much easier.  My 2 cents.