L’API ‘Drag And Drop’ de AIR (2ème Partie)
Cet article a été mis à jour le 13 décembre 2007 afin de respecter les changements qui ont été apportés à la Beta 3 de AIR.
Après avoir vu le glisser/déposer d'un élément d'une application AIR vers une application de l'OS dans la première partie, c'est le chemin inverse qui sera vu dans ce billet : l'action de Drag-In. C'est vraiment pas compliqué , surtout si vous avez déjà assimilé le billet précédent sur le sujet.
Par exemple, imaginons un gestionnaire de bookmarks qui, lorsqu'on dépose une URL dessus, ajoute cette adresse en mémoire. L'opération de Drag-In se déroule en plusieurs étapes:
1. L'utilisateur glisse l'URL depuis la barre d'adresse de son navigateur vers un composant (qui hérite de la classe DisplayObject) de notre AIR , par exemple, un simple TextArea. Celui-ci dispatche alors 2 événements : nativeDragEnter et nativeDragOver. Il faut donc au préalable ajouter des écouteurs d'évenements à ce TextArea :
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="444" height="146" creationComplete="init()">
-
<mx:Script>
-
<![CDATA[
-
import flash.events.NativeDragEvent;
-
-
-
private function init():void
-
{
-
txtField.addEventListener(NativeDragEvent.NATIVE_DRAG_OVER, onDragOver);
-
}
-
-
private function onDragOver(e:NativeDragEvent):void
-
{
-
//L'élément du drag and drop passe au dessus du composant
-
}
-
-
-
]]>
-
</mx:Script>
-
<mx:TextArea id="txtField" x="42.5" y="56" width="357" height="27"/>
-
-
</mx:WindowedApplication>
2. On vérifie dans le gestionnaire d'événements que l'élément glissé au-dessus corresponde bien à celui qu'on recherche. En l'occurrence, du texte pour notre champ texte. La machine virtuelle de AIR s'assure automatiquement de convertir les données transportées en un objet Clipboard, qui a déjà été abordé dans la 1ère partie de cette série d'articles. Pour vérifier que cet emballage contient bien un format de type texte, on se sert de la méthode hasFormat :
-
private function onDragOver(e:NativeDragEvent):void
-
{
-
var objetTransfert:Clipboard = e.clipboard as Clipboard;
-
if( objetTransfert.hasFormat( ClipboardFormats.TEXT_FORMAT ) )
-
{
-
//autoriser l'opération de Drop
-
}
-
-
}
3. On autorise l'opération de Drop grâce à la méthode acceptDragDrop() de la classe NativeDragManager et on en profite pour ajouter un écouteur nativeDragDrop au TextArea qui sera dispatché au moment où le bouton de la souris est relâché sur le composant.
-
private function onDragOver(e:NativeDragEvent):void
-
{
-
var objetTransfert:Clipboard = e.clipboard as Clipboard;
-
if ( objetTransfert.hasFormat( ClipboardFormats.TEXT_FORMAT ) )
-
{
-
txtField.addEventListener( NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop );
-
DragManager.acceptDragDrop( e.target as UIComponent );
-
}
-
-
}
4. On récupère les données dans le format qui nous intéresse grâce à la fonction getData du clipboard.
L'application finale :
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:WindowedApplication xmlns:mx = "http://www.adobe.com/2006/mxml"
-
layout = "absolute"
-
width = "444"
-
height = "146"
-
creationComplete= "init()"
-
>
-
<mx:Script>
-
<![CDATA[
-
import mx.core.UIComponent;
-
import mx.managers.DragManager;
-
import flash.events.NativeDragEvent;
-
-
-
private function init():void
-
{
-
txtField.addEventListener( NativeDragEvent.NATIVE_DRAG_OVER, onDragOver );
-
}
-
-
private function onDragOver(e:NativeDragEvent):void
-
{
-
var objetTransfert:Clipboard = e.clipboard as Clipboard;
-
if(objetTransfert.hasFormat( ClipboardFormats.TEXT_FORMAT ) )
-
{
-
txtField.addEventListener( NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop );
-
DragManager.acceptDragDrop( e.target as UIComponent );
-
}
-
-
}
-
-
private function onDragDrop(e:NativeDragEvent):void
-
{
-
var s:String = String( e.clipboard.getData( ClipboardFormats.TEXT_FORMAT ) );
-
txtField.text = s;
-
txtField.removeEventListener( NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop );
-
}
-
-
-
]]>
-
</mx:Script>
-
<mx:TextArea id="txtField" x="42.5" y="56" width="357" height="27" maxChars="100"/>
-
</mx:WindowedApplication>
Rien de très compliqué au final 
Il reste quelques notions à voir, comme le rendu déferré et la classe DragActions, qui feront l'oeuvre d'une troisième et dernière partie.
L’API ‘Drag And Drop’ de AIR (1ère Partie)
A.I.R., Drag In, Drag Out, DragAndDrop
Souscrire
13 décembre 2007 a 7:50 pm
[…] L’API ‘Drag And Drop’ de AIR (2ème Partie) AIR, desktop, drag and drop Publié dans A.I.R. posséde Laissez un commentaire […]