Wednesday, April 20, 2011

Working with clipboard in AIR: Part 7

Today we'll learn about the NativeDragManager class.

The NativeDragManager class is the AIR's manager for performing system-leveled drag-and-drop operations. You need to use this class to start drag-and-dropping operations, as well as to inform the system that the user can now drop the object to the specified target area. To do that, you'll need to use two methods of this class - doDrag() and acceptDragDrop().

When the user initiates the drag and drop operation, for example, clicks an object (mouseDown event), you need to call the method NativeDragManager.doDrag(). It requires 2 parameters - the first one is the reference to the initiator of the dragging, the second is the Clipboard object that contains the data that needs to be transferred.

When we call acceptDragDrop() on an object, we tell the system that the object can be dragged onto. When that happens and the user is dragging something, the cursor over the object changes and visually tells the user that he can drop here.

Let's create a simple example application with an object that you can click, then drag over a text field in the same window, drop - and the textfield gets its text changed.

First, create an object on the screen. Movieclip, button, anything really. Call it myObject.

Let's add a MOUSE_DOWN listener for it:

myObject.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

When mouse is down, we need to create a new clipboard object, add data to it and then perform NativeDragManager.doDrag().

function mDown(MouseEvent):void
{
var myClip:Clipboard = new Clipboard();
myClip.setData(ClipboardFormats.TEXT_FORMAT, "This is some text!");
NativeDragManager.doDrag(myObject, myClip);
}

Create a dynamic text field on stage, call it myField.

We need to add a NATIVE_DRAG_ENTER listener to be able to perform acceptDragDrop() on the field.

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

function onDragIn(evt:NativeDragEvent):void{
NativeDragManager.acceptDragDrop(myField);
}

Now we need something to happen once we actually drop the object onto the field. Listen for NATIVE_DRAG_DROP event:

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

function onDragDrop(evt:NativeDragEvent):void{
myField.text = evt.clipboard.getData(ClipboardFormats.TEXT_FORMAT).toString();
}

And if you test your code now, you'll be able to click on the object, drag onto the field, drop it and the field will get a text value of "This is some text!", the string that we've put into the clipboard.

Full code:

myObject.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

function mDown(MouseEvent):void
{
var myClip:Clipboard = new Clipboard();
myClip.setData(ClipboardFormats.TEXT_FORMAT, "This is some text!");
NativeDragManager.doDrag(myObject, myClip);
}

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

function onDragIn(evt:NativeDragEvent):void{
NativeDragManager.acceptDragDrop(myField);
}

myField.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

function onDragDrop(evt:NativeDragEvent):void{
myField.text = evt.clipboard.getData(ClipboardFormats.TEXT_FORMAT).toString();
}

Thanks for reading!

Related:

Working with clipboard in AIR: Part 1
Working with clipboard in AIR: Part 2
Working with clipboard in AIR: Part 3
Working with clipboard in AIR: Part 4
Working with clipboard in AIR: Part 5
Working with clipboard in AIR: Part 6
Working with clipboard in AIR: Part 8
Working with clipboard in AIR: Part 9
Working with clipboard in AIR: Part 10

No comments:

Post a Comment