Debugging Mouse Events In Flex


One of the points of debugging is to make your life easier…

Have you ever tried to debug the dragOver event on any ListBase Component? It’s a little hard to do… simply because it fires whenever your dragging over anything… whether your just starting to drag, or your over the item you wish to debug. You know… it’s like when your dragging over the item you wish to debug, you want to pause everything, then go over to flex builder, and add a breakpoint, then continue on with dragging over wherever it was when you paused everything….

You may not know what I mean if you haven’t really dealt with a whole lot of drag and drop…

One solution I’ve caught myself doing that has worked out fairly well for me is place a textarea on the screen somewhere, and adding a chunk of code to the dragOver() method i’m calling to just my variables in this text area so I can see them change as I drag over things. The code may look somewhat like this.

tattlerStr = "Selected Item: " + selectedNode + "\n" + "Over Target: " + hoverTarget.level + "\n" + "calculateDropIndex " + rowIndex + "\n" + "halfRow " + halfRow.toString() + "\n" + "certerRowY " + certerRowY.toString() + "\n" + "bottomRowY " + bottomRowY.toString() + "\n" + "mouseY " + currTree.mouseY.toString() + "\n" + "isItemOpen " + currTree.isItemOpen(currNodeOver).toString() + "\n" + "isDebugMode " + currTree.isItemOpen(currNodeOver).toString() + "\n" + "\n"; tattler.text = tattlerStr;

those variables are specific to my example, so don’t try copying and pasting that.

A Simple Solution – Add a Key Listener

This is not the most elegant solution, but might get you through a tough struggle… it’s nothing to leave in your production code… but when in need you can do this when strictly working on your drag and drop task…

  1. use creationComplete to addEventListeners for keyUp, and KeyDown private function init():void{ addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown); addEventListener(KeyboardEvent.KEY_UP,onKeyUp); }
  2. create a bindable var and a static var for your debug status private function init():void{ addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown); addEventListener(KeyboardEvent.KEY_UP,onKeyUp); } [Bindable] private var isDebugMode:Boolean = false; private static var DEBUG:uint = 68; //68 is the d key on the keyboard
  3. create your listeners /*********************listeners*********************/ private function onKeyDown(event:KeyboardEvent):void{ switch(event.keyCode){ case DEBUG: isDebugMode = true; //trace('keyDown'); break; } } private function onKeyUp(event:KeyboardEvent):void{ switch(event.keyCode){ case DEBUG: isDebugMode = false; //trace('keyUp'); break; } }
  4. in your dragOver method that your calling create an if statement where you want to debug like this if (this.isDebugMode){ trace('put your debug point on this line') tattler.text += '\n' + 'put your debug on this line'; }
  5. in flexbuilder put a breakpoint on the trace line inside that if statment in the last step
  6. now you should be able to drag whatever you like over the destination, and whenever you want to hit your breakpoint use your keyboard, and press ‘d’, you should then jump to flex builder to your breakpoint.

it’s not the most elegant solution, but it will work and get you to your debugger when you wish, while dragging and dropping.

Please refer to the link i’ve provided both at the top, and bottom to view the application, and to view the source as well… (I took the example from another blog post I had, so your going to see some code that might not be relevant to this, like the spring loaded folders, but it’s valuable as well)


6 comments on this post.
  1. Hunka:

    Very nicely explained everything. thanks 🙂

  2. Flex 4 WISH!! Debugging Mouse Move Events | Axelology:

    […] your going to then hit debuging before your mouse is where you want!!!! this makes me so angry, so i wrote a solution, but even then the solution sucks, because it’s just too much code, even though it’s […]

  3. Billigflug:

    Great for the discription, man! It works nice:D

  4. Timothy Minger:

    You may not know what I mean if you haven’t really dealt with a whole lot of drag and drop… nice blog


  5. Taschen:

    Flex Developer required by multinational bluechip in central london. The Flex developer will assist with the Flex development of a new video application. The flex developer will be expected to start immediately and this is a truly fantastic opportunity to be part a major organisation that. Premier Group Recruitment is acting as an employment agency in relation to this vacancy…

  6. Gebäudereinigung:

    very good explained. many thanks from germany

Leave a comment