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

    Adding MouseEvent Support

    =VA=FyreHeart Level 2

      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() {
                  super();
              }//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

          Group.

          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:

               

              package
              {
                   import flash.events.MouseEvent;
                   
                   import mx.core.UIComponent;
                   
                   public class SuperRect extends UIComponent
                   {
                        public function SuperRect()
                        {
                             super();
                             
                             addEventListener('click', clickHandler);
                        }
                        
                        override protected function updateDisplayList(w:Number, h:Number):void 
                        {
                             super.updateDisplayList(w,h);
                             
                             graphics.clear();
                             graphics.beginFill(0xFFFFFF, 1);
                             graphics.lineStyle(1, 0x000000, 1);
                             graphics.drawRect(0,0,w,h);
                             graphics.endFill();
                        }
                        
                        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?

                 

                -John

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