APPLICATION - SOURCE

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)

APPLICATION - SOURCE