Drag ndrop

Les événements du glisser-déposer

références sur xulplanet

• ondraggesture : intervient quand l'utilisateur a appuyé sur le bouton de la souris, et commence à la bouger sans relâcher le bouton. C'est cet événement qui devra créer la session de glisser-déposer.
• ondragover : intervient pour un objet que l'on survole en glisser-déposer (faut-il que la session ait été déclarée pour que cet événement soit appellé ?). Si l'on peut lâcher l'élément sur cet objet, il faut prévenir la session.
• ondragenter : intervient la première fois que l'on entre dans la zone de survol de l'objet en question en glisser-déposer. Cela permet de modifier l'apparence du curseur ou de l'objet afin d'indiquer (par exemple) la possibilité ou non de lâcher l'objet en glisser-déposer sur l'objet survolé.
• ondragexit : intervient quand on quitte la zone de survol de l'objet en question en glisser-déposer. Cela permet de modifier l'apparence du curseur ou de l'objet afin d'enveler (par exemple) les éléments graphiques que l'on avait changé en entrant dans la zone pour indiquer la possibilité de lâcher l'objet ou non.
• ondragdrop : intervient lorsqu'on lâche finalement le bouton de la souris à la fin d'un glisser-déposer. Cela clôt la session de glisser-déposer. (doit on fermer cette session d'une manière ou d'une autre ?)

Interfaces XPCOM

• nsIDragService : c'est le service qui permet de créer des nsIDragSession quand on en a besoin, et de les détruire en fin d'utilisation. Il permet d'accéder à des constantes durant les sessions de glisser-déposer.
• nsIDragSession : représente une session de glisser-déposer.

Reste à documenter

• l'interface nsITranferable. Son principe.
• Exemples complets minimaux de drag n drop. (avec et sans nsDragnDrop.js?)
• Codes venant de firefox à commenter en exemple.
• Un tutorial (pas à pas) pour ajouter le drag n drop à une application. (avec une check liste des éléments intervenants dans le drag n drop).

Résolution de problèmes

• Attention à la syntaxe, dans le nom des fonctions ou des variables, c'est parfois "flavor" (isDataFlavorSupported), et parfois "flavour" (getSupportedFlavours)... Dans les fonctions utilisées, c'est bien "flavour" qui est le plus utilisé...
• Les exceptions dans les Observeurs sont cachées par l'objet nsDragAndDrop, entourez donc le corps des fonctions de vos observeurs par des blocs try/catch afin d'afficher les erreurs eventuelles ! cela simplifie grandement tout débuggage. Evitez l'utilisation de alert, et privilégiez le dump : ces fonctions sont appellée par des composants XPCOM, et dans le getSupportedFlavours, je plantais immanquablement firefox en utilisant "alert".
• Utilisez dump pour auditer l'appels des fonctions de vos objects , vous aurez peut-être des surprises.

• Exemple de code d'une fonction d'un observeur prêt à être débuggé (Utilisation du try/catch et du dump)

  var boxObserver = {
    getSupportedFlavours : function () {
      dump("<boxObserver>.getSupportedFlavours\n");

      try {

        var flavours = new FlavourSet();
	flavours.appendFlavour("text/unicode");

      } catch (e) {
        dump("exception: " + e + "\n"); // Don't use alert !!!
      };
      return flavours;
    }
  };

• L'object nsDragAndDrop ne fonctionnera pas en dehors d'une application installée. Il faudra pour que le glisser-déposer soit disponible dans une application non enregistrée dans le chrome :
  1. copier les fichiers nsDragAndDrop.js, et nsTransferable.js dans votre application
  2. Modifier ces 2 fichiers afin d'ajouter des lignes demandant les privilèges nécessaires avant toute instruction en ayant besoin.
  3. modifier les préférences de firefox pour autoriser les demandes de privilèges
  1. Ligne pour demander les droits avant une instruction qui en a besoin (code de nsDragAndDrop de firefox 1.0.4 modifié)

      ...
      for (var i = 0; i < count; i++)
        {

          var trans = supportsArray.GetElementAt(i);
          if (!trans) continue;

	  netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

          trans = trans.QueryInterface(Components.interfaces.nsITransferable);
          ...

• Ligne dans le pref.js a modifier pour autoriser aux applications non installées de demander des privilège

   pref("signed.applets.codebase_principal_support", true);

• si vous utilisez un fichier nsDragAndDrop.js personnalisé, il semblerait qu'il y ait parfois confusion entre le fichier nsDragAndDrop.js modifié et celui de firefox. Ainsi si les modifications que vous faites ne semblent pas prises en compte, pensez y. (Je ne sais pas comment j'ai réussi à m'en débarrasser...).

Ressources autour du Drag'n Drop

1. http://www.mozilla.org/xpfe/xptoolkit/in(..)
2. la page de Neil Deakin sur le Drag'n Drop en anglais - la version francaise traduite sur XulFr.org
3. la référence des interfaces Drag n Drop