Blog sur Flash,Flex,Papervision,A.I.R., …

L’API ‘Drag And Drop’ de AIR (1ère Partie)

19 juin 2007 par PeZ

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.

Pour changer un peu des panoramas et de Papervision3D, regardons ce qui se passe du côté de l'Adobe Integrated Runtime, disponible depuis peu en version beta 3 sur le labs, et plus particulièrement sur le support du Drag And Drop.

Cette API vous permet de transférer des données entre une application AIR et des applications externes au runtime (par ex: l'explorateur de fichiers, le navigateur, un logiciel de retouche photo,...) par un mouvement de "Glisser/déposer".

On peut transférer :

  • Des images
  • Des fichiers
  • Du texte
  • Du texte HTML (Depuis la Beta 3)
  • Des URLs
  • Des objets sérialisés (AMF)
  • Des références d'objets

Deux types de Drag&Drop sont possibles :

  • Le Drag-out qui permet le transfert de données vers une application exterieure.
  • Le Drag-in qui permet le transfert de données depuis une application exterieure.

Ce premier billet de la série décrit la réalisation d'une opération de Drag-Out.

1. Principe

Pour mettre en place une opération de drag and drop depuis une application AIR, on suit ce cheminement :

1. Ajout d'un écouteur souris sur le composant à dragger.
2. Lorsque l'événement souris est déclenché, on prépare l'objet à transférer.
3. On appelle la méthode doDrag du DragManager pour démarrer l'opération de drag.

Commençons simplement par une application qui affiche une image et qui permet de la copier vers le bureau ou vers un soft de retouche d'image comme Photoshop ou Microsoft Paint pour les plus costauds.

J'utilise actuellement la beta de Flex Builder 3 pour réaliser les exemples , mais libre à vous de faire autrement.

2. Ajout d'un écouteur souris sur le composant à dragger.

Choisissez une belle image et créez un nouveau projet AIR, donnez lui un nom du genre 'DragOutExemple' et spécifiez un fichier mxml du même nom comme point d'entrée du programme. Donnez lui une taille correspondant à la taille de l'image par exemple.
Nous allons créer un composant en AS3 que l'on intègrera dans ce fichier. Créez une classe DragOutImage qui hérite de UIComponent , qui charge votre image lors de l'instanciation et qui l'affiche. Jusque là rien de vraiment difficile et vous devriez avoir quelque chose qui ressemble à ceci :

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.desktop.Clipboard;
  4.     import flash.desktop.ClipboardFormats;
  5.     import flash.desktop.NativeDragManager;
  6.     import flash.display.Bitmap;
  7.     import flash.display.Loader;
  8.     import flash.events.Event;
  9.     import flash.events.MouseEvent;
  10.     import flash.filesystem.File;
  11.     import flash.net.URLRequest;
  12.    
  13.     import mx.core.UIComponent;
  14.  
  15.     public class DragOutImage extends UIComponent
  16.     {
  17.         private var image:Bitmap;
  18.         private var imageURL:String = "app:/chateau.jpg";
  19.    
  20.         public function DragOutImage()
  21.         {
  22.             creerImage();   
  23.         }
  24.        
  25.         private function creerImage():void
  26.         {
  27.             var requete:URLRequest = new URLRequest( imageURL );
  28.             var loader:Loader = new Loader();
  29.             loader.contentLoaderInfo.addEventListener( Event.COMPLETE, chargementComplet );
  30.             loader.load( requete );
  31.         }
  32.        
  33.         private function chargementComplet(e:Event):void
  34.         {
  35.             image = e.target.loader.content;
  36.             var conteneurImage:UIComponent = new UIComponent();
  37.             conteneurImage.addChild( image );
  38.             addChild( conteneurImage );
  39.             conteneurImage.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown );
  40.         }
  41.        
  42.         private function onMouseDown(e:MouseEvent):void
  43.         {
  44.             //la suite arrive...
  45.         }
  46.        
  47.     }
  48.  
  49.    
  50. }

3. Préparation de l'objet à transférer.

Pour préparer l'objet qu'on s'apprête à transférer , il faut utiliser une instance de la classe Clipboard. Grâce à cette classe, on peut transférer notre information dans de multiples formats. On augmente ainsi les chances pour qu'une autre application puisse la recevoir.
5 formats sont disponibles :

  • texte (sous forme de chaines de caractères)
  • texte formaté en HTML
  • url (simple chaine url)
  • image (grâce à l'objet bitmapData)
  • liste de fichiers (objets File dans un Array)

Ces formats sont accessibles depuis les constantes de la classe ClipboardFormats à savoir :

  • ClipboardFormats.TEXT_FORMAT
  • ClipboardFormats.URL_FORMAT
  • ClipboardFormats.BITMAP_FORMAT
  • ClipboardFormats.FILE_LIST_FORMAT
  • ClipboardFormats.HTML_FORMAT

Pour notre image, nous allons la transférer sous forme d'image et sous forme de fichier :

PLAIN TEXT
Actionscript:
  1. private function onMouseDown(e:MouseEvent):void
  2. {
  3.     var objetTransfere:Clipboard = new Clipboard();
  4.     objetTransfere.setData( ClipboardFormats.BITMAP_FORMAT, image.bitmapData, false );//sous forme d'image pour les logiciels de retouche par ex.
  5.            
  6.     var fichierImage:File = new File( imageURL );
  7.     objetTransfere.setData( ClipboardFormats.FILE_LIST_FORMAT, new Array( fichierImage ), false );//vers un dossier
  8.  
  9. }

4. Appel à la méthode doDrag du NativeDragManager pour démarrer l'opération de drag.

L'opération de Drag&Drop démarre au moment ou la méthode doDrag est appelée. Cette méthode prend plusieurs paramètres :

  • dragInitiator de type InteractiveObject qui représente l'objet de départ du drag.
  • clipboard , l'objet Clipboard crée plus haut et qui contient l'objet à transférer dans éventuellement plusieurs formats.
  • des paramètres optionnels comme le dragImage(l'icone qui apparait lorsqu'on commence le drag), offset(les coordonnées de l'icone par rapport au pointeur de la souris), actionsAllowed (objet de type NativeDragOptions qui spécifie quelles sont les opérations valides pour le drag).

On va se contenter du minimum pour ce simple exemple:

PLAIN TEXT
Actionscript:
  1. NativeDragManager.doDrag( this ,objetTransfere );

Sauvegardez le fichier, et créez une instance dans votre mxml :

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="450" width="600" xmlns:local="*">
  3.     <local:DragOutImage />
  4. </mx:WindowedApplication>

Lancez l'appli et essayer de déplacer l'image vers le bureau ou photoshop :)

Ceci est un exemple basique de Drag And Drop depuis une appli AIR. Dans une deuxième partie , on verra le Drag And Drop vers une appli AIR.

Téléchargez les sources.

L'API 'Drag And Drop' de AIR (2ème Partie)

Technorati , ,
Publié dans A.I.R. posséde

8 Responses

  1. ASTROIS BLOG » Blog Archive » L’API ‘Drag And Drop’ de AIR (2ème Partie) dit:
    13 décembre 2007 a 9:15 pm

    […] L’API ‘Drag And Drop’ de AIR (1ère Partie) A.I.R., Drag In, Drag Out, DragAndDrop Publié dans A.I.R. posséde One Response […]

  2. ASTROIS BLOG » Blog Archive » Mise à jour de 3 articles dit:
    13 décembre 2007 a 9:53 pm

    […] 1ére partie 2éme partie 3éme partie […]

  3. simon dit:
    14 décembre 2007 a 6:41 pm

    Bonjour
    J’ai éssayé ton code depuis AIR b3, mais j’ai une erreur sur la classe UIComponent :
    La définition de la classe de base UIComponent est introuvable.
    Merci d’avance

  4. PeZ dit:
    14 décembre 2007 a 6:49 pm

    Salut,

    Peut-être as-tu oublié de rajouter la ligne d’import pour le UIComponent :

    import mx.core.UIComponent;

    ?

  5. simon dit:
    14 décembre 2007 a 7:17 pm

    Non, et comme je suis avec Flash, j’ai également essayé :
    import fl.core.UIComponent;

  6. simon dit:
    14 décembre 2007 a 7:59 pm

    En fait, comme tu utilises UIComponent comme conteneur, j’ai remplacé le conteneur par la classe Sprite, mais j’ai un nouveau problème, c’est maintenant les classes desktop.TransferableData et desktop.TransferableFormat dont la définition de la classe est introuvable, alors que la classe DragManager ne semble pas poser de problème ???

  7. PeZ dit:
    14 décembre 2007 a 9:34 pm

    Re salut,

    Enfait les sources à télécharger n’ont pas été mises à jour par rapport à la beta 3.

    Par exemple, La classe TransferableData n’existe plus dans la beta 3 et a été remplacé par la classe Clipboard.

    Donc tu peux soit lire l’article et adapter les sources en fonction, soit attendre que je remplace les sources (dimanche ou lundi).

    A+

  8. simon dit:
    16 décembre 2007 a 12:20 pm

    Bonjour
    Je vois que tu as mis a jour ton code en utilisant la classe Clipboard, j’ai lu attentivement et mis en place le code de la doc en ligne, mais je bloque sur la ligne : var fichierImage:File = new File( fileURL );
    j’ai une erreur :
    ArgumentError: Error #2004: L’un des paramètres n’est pas valide.
    at Error$/throwError()
    at flash.filesystem::File/set nativePath()
    at flash.filesystem::File()
    at DragOutExample/onMouseDownn()
    avec le code de la doc et le tien.
    Si ça te dit quelque chose, merci d’avance

Laissez un commentaire

Note: La modération des commentaires est activée et votre envoi peut-etre différé.

Posts récents

Catégories:

Archives :

Recherche:

Méta :

© 2007 Fesseler Florian / ASTrois Blog . Ported to Wordpress by Kaushal Sheth design by Arcsin. Seminaire referencementCe site est listé dans la catégorie Programmation informatique : Programmation Flash Dictionnaire du Net