Vous êtes sur la page 1sur 68

Transfert de Donnes: drag and

drop et {couper, copier} - coller

Sylvain Malacria - www.malacria.fr

IHM Master 1 informatique - Universit de Lille 1

Adapt de Gry Casiez


Drag and drop

Drag and drop (DnD): glisser-dposer ou cliquer-


glisser en franais est une technique dinteraction
qui permet de prendre un objet et de le dplacer
un autre endroit ou sur un autre objet.

Le Drag and drop et le couper/copier-coller (CCP)


sont des fonctionnalits essentielles de la plupart
des applications.
Exemples
Exemples
Dplacer une icne la corbeille pour supprimer un fichier, sur
imprimante pour imprimer

Dplacer un fichier dun rpertoire un autre ou dune fentre une


autre

Rorganisation de palettes doutils dans un logiciel de dessin

Dplacer un fichier sur une fentre pour voir son contenu

Dplacer des objets (dessin vectoriel)

Dplacer / copier du texte dun document un autre

Ajouter des objets une liste

Dplacer une commande sur un objet


(Exemple: spcifier la couleur dun objet)

Crer un lien dune portion de document une autre


Rel outil doptimisation des interactions

Attachement de fichiers dans un e-mail

Entre par laction vs entre par lobjet


Manipulation directe

3 principes fondamentaux:

Reprsentation permanente des objets dintrt

Actions rapides, incrmentales et rversibles, dont les


actions sur les objets sont immdiatement visibles

Utilisation dactions physiques (ex: pointer, dplacer)


plutt que de commandes la syntaxe complexe

Exemple: dplacer un fichier sur une corbeille plutt que de


taper la commande rm

Traitements de texte, tableurs, jeux vidos, CAO


Couplage perception/action

Agir pour percevoir

Perception de la profondeur par des mouvements de la tte

Perception de la texture dun objet en dplaant le doigt sur


sa surface

Percevoir pour agir

Ajuster les mouvements du bras pour saisir un objet

Importance de la continuit de ce couplage


Le feedback (retour dinformation)

Pointage

Slection

Trac, dplacement,
transformation
Manipulation directe
Sketchpad 1962
Manipulation directe
Avantages
+ Les novices peuvent apprendre rapidement, habituellement
par la dmonstration dun utilisateur expriment

+ Les experts peuvent travailler plus rapidement en menant


une large gamme de tches

+ Les utilisateurs peuvent voir immdiatement le rsultat de


leurs actions

+ Les utilisateurs prennent confiance parce que linterface est


comprhensible et parce que les actions peuvent tre
facilement inverses

+ Les utilisateurs gagnent en confiance et matrise parce


quils sont les initiateurs de leurs actions et quils peuvent
anticiper les rponses de linterface

+ Les messages derreur sont rarement ncessaires


Manipulation directe
Inconvnients
- Utilise beaucoup de place par rapport linterface en ligne
de commande

- Apprentissage de la signification des icnes: autant


dapprentissage sinon plus que lapprentissage dun mot.

- Les reprsentations des icnes peuvent tre trompeuses ou


lutilisateur peut ne pas comprendre la mtaphore visuelle
(utilisation de concepts connus par lutilisateur)

- Demande parfois plus de temps de prendre la souris que


dutiliser le clavier
Historique
Invent par Xerox PARC

Popularis par Apple en 1984

Maintenant utilis par toutes les interfaces graphiques

Java Swing

Apparu dans le JDK 1.2 (~ 10 classes du package


java.awt.dnd.*) DragGestureRecognizer,
DragGestureListener, DragSourceContext

Nouvelle API plus simple et plus lgre dans le JDK 1.4


TransferHandler, Transferable

Nouvelles fonctionnalits dans JDK 1.6

Apparition dans le WEB 2.0


Types de transferts
On parle plus gnralement de transferts de donnes

Utilisation de la manipulation directe

Utilisation du presse-papier par lutilisation de touches ou


icnes de raccourcis

Dplacer (move) (clic souris enfonc)

Action par dfaut

Couper-coller au clavier (crtl-x, crtl-v)

Copier (copy) (clic souris enfonc + ctrl)

Appui de la touche ctrl aprs avoir initi le drag

Copier-coller au clavier (crtl-c, crtl-v)

Lien (link-alias) (clic souris enfonc + crtl + shift)


Type de donnes transfrables
Nimporte quel type:

Texte

Images

Liste de fichiers

Vidos

Son

Couleurs

Personnes
Dirents contextes
Transfrer des informations dune application en interne

Entre composants

Transfrer des informations en externe (entrer ou sortir


des informations de ou vers lapplication)

Entre applications Java

Entre applications natives et applications Java


3 acteurs
3 principaux acteurs

Une source (composant do lobjet est dplac)

Le systme (toolkit et/ou systme de fentrage sous-jacent)


prise en charge des donnes

Une destination (composant sur lequel lobjet est dplac)


Etapes
Le dbut de linteraction (activ en gnral par un
glissement de souris, un bouton particulier tant
maintenu enfonc) durant lequel lobjet dun drag
particulier est spcifi, alors que tous les mcanismes
ncessaires sa ralisation sont mis en place

Le glisser (drag) qui consiste en un dplacement de


souris, bouton toujours enfonc, vers des cibles
potentielles en les notifiant pour quelles puissent se
dclarer intresses

Le dpos (drop) qui consiste eectivement acheminer


les donnes de la source la cible

La finalisation qui permet aux sources et aux cibles de


redevenir passives pour le DnD
Exemple dutilisation
Copie de texte dune liste un champ de texte

1) slection dun item de la liste (source)

2) en cliquant sur le texte, dplacement de la souris: dbut du geste


de drag (drag gesture)

3) la liste regroupe les informations exporter et spcifie le type


daction supporte: copie, dplacement, lien (source action)

4) Lors du dplacement des donnes, Swing calcule en permanence


lemplacement et met jour lachage

5) Si lutilisateur appuie sur shift ou ctrl, cette action de lutilisateur


(user action) est aussi prise en compte

6) Quand lutilisateur arrive sur le champ de texte, la cible (target) est


interroge en permanence pour voir si elle accepte ou refuse un drop
potentiel. La cible fournit un retour dinformation pour montrer
lemplacement de drop (drop location)

7) Quand lutilisateur relche le bouton, le composant de texte


inspecte les actions dclares dans la source et les actions de
lutilisateur

8) Le champ de texte importe les donnes


Fonctionnement du DnD sous X-Window
Le DnD dans le JDK
Se situe dans AWT et Swing

Packages java.awt.dnd et java.awt.datatransfer

javax.swing.TransferHandler

Une donne transfre


java.awt.dataTransfer.Transferable
2 faons de transfrer des informations
Drag and drop en Java

TransferHandler pour le
JComponent A
composant JComponentA.
Drag gesture Les donnes sont
Ex: JTextField, regroupes dans un
JList Transferable

Drop

TransferHandler pour le
composant JComponentB. Jcomponent B

Les donnes sont extraites


partir du Ex: JTextField,
Transferable JList
2 faons de transfrer des informations
(Couper, Copier)-Coller en Java

TransferHandler pour le
JComponent A
composant JComponentA.
Couper / copier Les donnes sont
Ex: JTextField, regroupes dans un
JList Transferable

TransferHandler pour le
composant JComponentB. Jcomponent B

Coller Les donnes sont extraites


partir du Ex: JTextField,
Transferable JList
DnD sans rien coder
Drop et coller supports sans crire une ligne de code
(sauf setDragEnable(true)) :

JEditorPane

JFormattedTextField

JPasswordField

JTextArea

JTextField

JTextPane

JColorChooser
Drag sans rien coder
Pas vident de connatre le comportement par dfaut pour
tous les composants

setDragEnable(true) + qq lignes de code

Jlist

Jtable

JTree
Support par dfaut du DnD

*Activable en utilisant
component.setDragEnabled(true)

** donnes de type
java.awt.Color

*** Export dune liste de


fichiers
La classe TransferHandler

Possibilit de remplacer lobjet TransferHandler par


dfaut ou dajouter le DnD un composant qui ne le
supporte pas par dfaut (ex: le JLabel ne supporte
pas le DnD)

setTransferHandler(TransferHandler): utilise une


importation/exportation personnelle des donnes
(JComponent)
Crer son propre TransfertHandler
Mthode 1: Utiliser le constructeur prenant en paramtre
une proprit Java Bean exporter

Ne fonctionne que pour des DnD entre composants Swing


(ne fonctionne pas avec des applications externes)

Permet dexporter et dimporter des proprits (une seule


proprit)

Crer son propre TransferHandler


Mthode 2: spcifier son propre TransferHandler

setTransferHandler(TransferHandler): utilise une


importation/exportation personnelle des donnes
(JComponent)

Exportation de donnes

Connatre les actions possibles sur la source (None, Copy,


Move, Link ou une combinaison)
int getSourceActions(JComponent c)

Prpare les donnes transfrer


Transferable createTransferable(JComponent c)

Termine le travail: nettoyage si ncessaire


void exportDone(JComponent c, Transferable t, int action)

Fonctionne entre composants Java Swing et avec les


applications externes
DataFlavor
Les donnes glisses sont identifies par des donnes
de type DataFlavor

Un objet DataFlavor est un objet java qui reprsente un


type MIME comparable un identifiant (ne stocke pas
de donnes)

Les types MIME permettent aux applications de


reconnatre des types de donnes ex: text/html,
image/png

Constantes pour les types les plus courants:

stringFlavor pour les chanes de caractres

imageFlavor pour les images

javaFileListFlavor pour les transferts de listes de fichiers


(fonctionne uniquement entre applications Java)
DataFlavor
Pour crer un DataFlavor, il faut fournir la construction
le type MIME

DataFlavor(String mimeType)

Ex: construction dun DataFlavor pour la classe Couleur:

String mimeType = DataFlavor.javaJVMLocalObjectMimeType +


";class=" + Couleur.class.getName();
try {
CouleurFlavor = new DataFlavor(mimeType);
}
catch (ClassNotFoundException e) {
return CouleurFlavor;
}
Interface Transferable
Linterface Transferable soccupe de stocker les donnes
qui sont manipules par le systme de transfert

Implmentations par dfaut

StringSelection: transfert de chaines de caractres

DataHandler: transfert de donnes de nimporte quel type


Transfert de donnes: exportation
Importation de donnes

Utilise pour le drop ou laction de coller

Vrifier que le composant destination peut accepter les


donnes (JDK 1.6)

public boolean
canImport(TransferHandler.TransferSupport info)

Transfert des donnes (JDK 1.6)

public boolean
importData(TransferHandler.TransferSupport info)
La classe TransferSupport
Classe interne de TransferHandler

Regroupe toutes les informations du transfert

Connatre le composant destination du transfert


(getComponent)

Mthode de transfert choisie (getDropAction)

Mthode de transfert choisie par lutilisateur


getUserDropAction

Mthodes de transfert supportes par la source


getSourceDropActions

Direntes mthodes pour connatre le type de donnes


acceptes par la destination: getDataFlavors
Exemple dimportation
DataFlavor personnalis
DataFlavor personnalis
DataFlavor personnalis
DataFlavor personnalis
Listener pour le drag
Lvnement a lieu quand le bouton gauche est enfonc et
que la souris se dplace dau moins 1 pixel

addMouseMotionListener(MouseMotionAdapter)

Mthode public void mouseDragged(MouseEvent e)

exportAsDrag permet dinitier lexport des donnes


Exemple
Retour visuel

Visualisation

Information qui direncie la copie du dplacement

Visualisation pour reprsenter les donnes glisses

Le retour visuel est aussi important pour montrer les


possibilits de drop

Montrer les zones o il est possible de faire un drop

Par dfaut seules les zones o il est possible de faire un


drop fournissent un retour visuel

Possibilit de dsactiver le retour visuel ou de toujours


lactiver en utilisant setShowDropLocation
(couper,copier) - coller

Le CCP utilise le TransferHandler


Ajouter des bindings pour que les actions de CCP sur le


handler soient appeles suite aux raccourcis clavier
CCP sur des champs de texte
Sur les composants texte

Utilisation du DefaultEditorKit qui fournit les actions de CCP

Mmorise le dernier composant qui avait le focus


CCP sur des composants quelconques
Utilisation de la classe ActionMap

La classe ActionMap dfinit des relations entre des Objets

La classe InputMap dfinit des relations entre des


raccourcis claviers et des objets
Le presse papier

Il existe plusieurs presse-papiers

Le presse papier systme


Toolkit toolkit = Toolkit.getDefaultToolkit();
toolkit.getSystemClipboard();

Le presse papier de slection


Toolkit toolkit = Toolkit.getDefaultToolkit();
toolkit.getSelectionClipboard();

Des presses papiers locaux


new Clipboard(String name);
Le presse papier
Le presse papier contient un mme objet sous plusieurs
reprsentations possibles (DataFlavor)

Sous Windows, lorsquune application accde au presse


papier, aucune autre ne peut y accder

Les mthodes daccs en Java renvoient alors lexception


IllegalStateException
Ergonomie du DnD
Source principale: http://www.ergolab.net/
Apprentissage

Courbes dapprentissage trs courtes: une fois que lon sait


excuter le geste sous-jacent, il sut de comprendre que
lon peut glisser dposer des lments pour avoir appris
Deux catgories dobjectifs

Lancer une action sur un objet (ex. ajout au panier)

Dans ce cas dplacement = moyen de lancer une action

Lobjet rfrent reste son emplacement initial mais il


peut tre dupliqu symboliquement

Dplacer un objet

Dans ce cas, dplacement = finalit

On a quune instance de chaque objet


Deux catgories dobjectifs
Dplacer un objet

Exemple: rorganiser une liste

Permet de raliser plus simplement et rapidement


lobjectif
Exemple ngatif
Exemple ngatif
Ajout des lments 1 par 1 au panier




La possibilit de DnD doit tre visible

Besoin de deux connaissances pour utiliser le DnD:

Savoir quil est possible de glisser-dposer des objets

Savoir quels objets peuvent tre glisss dposs

Jouer sur:

Terminologies

les formats de prsentation

Comportements au survol

Message adoss au rcepteur
Adaptation du message suivant
limportance de la fonction

Peut tre ach au survol du rcepteur


Adaptation du message suivant
limportance de la fonction
Aide permanente
La destination doit tre visible
Indiquer la possibilit plutt que
linterdiction

Il vaut mieux indiquer o un objet est dposable,


plutt quo il nest pas dposable
Paramtre influenant lecacit

La destination est dautant plus facile atteindre


quelle est proche et grande

Plus la source est de taille importante, plus elle est


facile prendre

La visibilit simultane de la source et de la


destination
Le dplacement doit tre visible

Fournir un retour dinformation informant


lutilisateur sur le fait quil est en train de dplacer
un lment

Eviter des erreurs du type: je crois dplacer un objet que


jai mal saisi, donc je ne dplace rien

Retour en temps rel sur lecacit de son action de


dplacement

Contrler avec prcision son action en vue de la dpose de


lobjet sa destination
Le dplacement doit tre visible
Problmes lis au DnD

Demande plus deort physique que de dplacer


la souris sans maintenir de bouton enfonc (donc
moins rapide)

Un usage intensif peut tre cause de douleurs

Problme quand la cible est cache sous dautres


objets

Utilisation dExpos sous Mac OS X


Et aussi

DnD rcurssif

Naviguer dans une arborescence en restant quelques


secondes sur un niveau pour pntrer au niveau
darborescence infrieur
Le pick and drop
1997

Utilisation dun stylo pour prendre des donnes


dun ordinateur un autre
Drag and pop
Achage des cibles potentielles suivant la direction du mouvement

Seules les cibles compatibles sont aches


Fold and drop