Drag'n drop avec GhostGlassPane

**Ghorin** · 01/12/2009, 22h12

Bonjour,
Je suis en train d'essayer d'implémenter le drag'n drop qu'on trouve sur http://gfx.developpez.com/tutoriel/java/swing/drag/ et qui utilise un GhostGlassPane pour faire quelque chose de plutôt joli/intuitif visuellement. Sauf que je ne m'en sors pas malgré les explications.

Voici une description de mon appli (copie d'écran en pièce jointe).
Un écran swing avec :
- à gauche : le dessin d'une silhouette humaine et comprenant 4 ronds qui servent à indiquer le matériel porté sur la tête (casque par exemple), sur le corps (une armure par exemple) et aux deux mains (une épée, une hache ...)
- à droite : un tableau listant l'équipement disponible (sous forme d'images)
- On peut drag'n dropper un équipement du tableau vers un des 4 ronds de la silhouette humaine. En faisant cela, l'image de l'équipement choisi apparait dans le rond.

J'ai réussi à implémenter une partie puisque j'ai bien le drag qui s'active avec l'image de l'équipement qui suit la souris, c'est ce qu'on voit dans la pièce jointe avec une hache que j'ai glisser depuis le tableau jusqu'à la main gauche.
Par contre le drop ne fonctionne pas correctement : il s'active à n'importe quel endroit où je droppe alors que je veux qu'il ne fonctionne que sur les 4 ronds de la silhouette et qu'en plus il ne s'active que pour le 4 du drop. Or actuellement non seulement il droppe n'importe où mais en plus il ne détecte pas le composant sur lequel il droppe (même quand je droppe au dessus d'un rond).

Merci d'avance pour votre aide

Voici une version simplifiée de mon code :
// Toutes les classes de http://gfx.developpez.com/tutoriel/java/swing/drag/
GhostPictureAdapter ...
GhostGlassPane ...
GhostDropAdapter ...
...

// SlotEquipement
// Composant swing personnalisé
// => Dessine un rond avec l'image de l'équipement porté si il y en a un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
public class SlotEquipement extends JComponent {
	private Image	image;
 
	public SlotEquipement() {
		super();
		this.image =  null;
	}
 
	public SlotEquipement(Image image) {
		super();
		this.image =  image;
	}
 
	public void setImage(Image image) {
		this.image =  image;
	}
 
	@Override
	public void paintComponent(Graphics g) {
		Graphics2D g2d = (Graphics2D)g;
		g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
 
		// ----------------------------------------
		// DESSINER LE ROND
		// ----------------------------------------
		g2d.setColor(Color.BLACK);
		g2d.drawOval(0, 0, 60, 60);
 
		g2d.setColor(new Color(10, 10, 10, 15));
		g2d.fillOval(0, 0, 60, 60);
 
		// ----------------------------------------
		// DESSINER L'IMAGE
		// ----------------------------------------
		if(image!=null) g2d.drawImage(image, 5, 5, null);
	}
}

// FichePersonnage
// La classe affichant la fenêtre swing et son contenu (silhouette humaine, ronds de l'équipement porté, tableau de l'équipement disponible)
// Je ne mets pas dans le code la gestion du positionnement des objets swing (pas de layout ...) car ça n'a pas de rapport avec le pb

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
public class FichePersonnage extends JInternalFrame {
	private	JPanel			panel;
 
	private	GhostGlassPane		glassPane;
 
	private	GhostDropListener	listenerTete;
	private	GhostDropListener	listenerCorps;
	private	GhostDropListener	listenerMainGauche;
	private	GhostDropListener	listenerMainDroite;
 
	private	Personnage 		personnage;
 
	public FichePerso(Personnage personnage) {
		this.personnage	= personnage;
 
		glassPane		= new GhostGlassPane( );
		setGlassPane(glassPane);
		...
		afficheSilhouette();
		afficheTableau();
		...
	}
 
	// Affiche la silhouette et les ronds d'équipement
	// Pour chaque rond, on lui affecte un "listener de drop"
	public void afficheSilhouette() {
		// Ajout de la silhouette
		JLabel lbSilhouette	= new JLabel(new ImageIcon("silhouette.jpg");
		panel.add(lbSilhouette);
 
		// Ajout du slot d'équipement pour la tête
		SlotEquipement slotTete	= new SlotEquipement();
		panel.add(slotTete);
		listenerTete = new GhostDropManager(slotTete);
 
		// Ajout du slot d'équipement pour le corps
		SlotEquipement slotCorps	= new SlotEquipement();
		panel.add(slotCorps);
		listenerCorps = new GhostDropManager(slotCorps);
 
		// Ajout du slot d'équipement pour la main gauche
		SlotEquipement slotMainGauche= new SlotEquipement();
		panel.add(slotMainGauche);
		listenerMainGauche = new GhostDropManager(slotMainGauche);
 
		// Ajout du slot d'équipement pour la main droite
		SlotEquipement slotMainDroite= new SlotEquipement();
		panel.add(slotMainDroite);
		listenerMainDroite = new GhostDropManager(slotMainDroite);
	}
 
	// Affiche le tableau avec les équipements disponibles//
	// chaque équipement est représenté par son image (jlabel)
	// Pour chaque équipement, on créé un mouse adapter qui affichera l'image en cours de drag'n drop. Et on ajoute les listener de drop des 4 ronds de la silhouette.
	public void afficheTableau() {
		JPanel panelTableau	= new JPanel();
		for(Equipement equip:personnage.getListeEquip()) {
			JLabel lbBien	= new JLabel(equip.getImage());
			panelTableau.add(lbBien);
 
			GhostDropAdapter pictureAdapter	= new GhostPictureAdapter(glassPane, equip.getNom(), equip.getImage());
		        pictureAdapter.addGhostDropListener(listenerTete);
		        pictureAdapter.addGhostDropListener(listenerCorps);
		        pictureAdapter.addGhostDropListener(listenerMainGauche);
		        pictureAdapter.addGhostDropListener(listenerMainDroite);
 
			lbBien.addMouseListener(pictureAdapter);
			lbBien.addMouseMotionListener(new GhostMotionAdapter(glassPane));
		}
		panel.add(panelTableau);
	}
}

**Ghorin** · 07/12/2009, 06h41

Finalement j'ai résolu mon pb tout seul même si ça n'a pas été simple. Si il y en a que ça intéresse, je mettrai ici la solution que j'ai trouvé.

**Ghorin** · 23/03/2010, 20h10

Ainsi que demandé, voici un morceau de code que j'avais écris pour voir comment implémenter le drag and drop avec un ghostPane.
Chez moi, il fonctionne, il faut néanmoins y rajouter :
- le .jar de swingX (version 1.6 dans mon projet)
- 3 images à mettre dans le répertoire des classes (new_sale.png, view_sale.png, quit.png)
Ensuite il y a un petit bug : je ne sais pas pourquoi mais dans mon exemple le drop sur la 2nde cible marche quand on lache la souris un peu en dessous de la cible.

Si ce code ne suffit pas, je peux essayer d'extraire le code de mon vrai projet mais ça me prendrait du temps.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 
package draganddrop.elb;
 
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.BoxLayout;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.border.LineBorder;
 
import draganddrop.librairie.GhostDropListener;
import draganddrop.librairie.GhostDropManager;
import draganddrop.librairie.GhostGlassPane;
import draganddrop.librairie.GhostMotionAdapter;
import draganddrop.librairie.GhostPictureAdapter;
 
 
public class DragnGhostElb extends JFrame {
	private static final long serialVersionUID = 1L;
 
	private	JPanel				panelPrincipal;
	private	JPanel				panelSources;
	private	JPanel				panelCibles;
 
	private GhostGlassPane 			glassPane;
	private	GhostPictureAdapter		pictureAdapter;
	private	GhostDropListener 		listener1;
	private	GhostDropListener 		listener2;
 
	// ================================================
	// CONSTRUCTEUR
	// ================================================	
	public DragnGhostElb() {
		this.setSize(300, 200);
 
		glassPane = new GhostGlassPane();
		setGlassPane(glassPane);
 
		afficher();
	}
 
	// ================================================
	// AFFICHAGE
	// ================================================	
	private void afficher() {
		panelPrincipal	= new JPanel(new BorderLayout());
		setContentPane(panelPrincipal);
 
		afficherCibles();
		afficherSources();
 
	}
 
	private void afficherSources() {
		panelSources			= new JPanel();
		BoxLayout	layout		= new BoxLayout(panelSources, BoxLayout.Y_AXIS);
		panelSources.setLayout(layout);
 
		JLabel	source1		= new JLabel("source1");
		JLabel	source2		= new JLabel("source2");
		JLabel	source3		= new JLabel("source3");
 
		BufferedImage	img1	= null;
		BufferedImage	img2	= null;
		BufferedImage	img3	= null;
		try {
			img1	= ImageIO.read(new File("new_sale.png"));
			img2	= ImageIO.read(new File("view_sale.png"));
			img3	= ImageIO.read(new File("quit.png"));
		} catch (IOException e1) {
			e1.printStackTrace();
		}
		source1.setIcon(new ImageIcon(img1));
		source2.setIcon(new ImageIcon(img2));
		source3.setIcon(new ImageIcon(img3));
 
		source1.setBorder(new LineBorder(Color.BLACK));
		source2.setBorder(new LineBorder(Color.BLACK));
		source3.setBorder(new LineBorder(Color.BLACK));
 
		panelSources.add(source1);
		panelSources.add(source2);
		panelSources.add(source3);
 
		panelPrincipal.add(panelSources, BorderLayout.WEST);
 
		// GESTION DU DRAG DE LA SOURCE
		// SOURCE 1
		source1.addMouseListener(pictureAdapter = new GhostPictureAdapter(glassPane, "source1", img1));
        pictureAdapter.addGhostDropListener(listener1);
        pictureAdapter.addGhostDropListener(listener2);
        source1.addMouseMotionListener(new GhostMotionAdapter(glassPane));
 
		// SOURCE 2
		source2.addMouseListener(pictureAdapter = new GhostPictureAdapter(glassPane, "source2", img2));
        pictureAdapter.addGhostDropListener(listener1);
        pictureAdapter.addGhostDropListener(listener2);
        source2.addMouseMotionListener(new GhostMotionAdapter(glassPane));
 
		// SOURCE 3
		source3.addMouseListener(pictureAdapter = new GhostPictureAdapter(glassPane, "source3", img3));
        pictureAdapter.addGhostDropListener(listener1);
        pictureAdapter.addGhostDropListener(listener2);
        source3.addMouseMotionListener(new GhostMotionAdapter(glassPane));
	}
	private void afficherCibles() {
		panelCibles				= new JPanel();
		BoxLayout	layout		= new BoxLayout(panelCibles, BoxLayout.Y_AXIS);
		panelCibles.setLayout(layout);
 
		JLabel	cible1			= new JLabel("cible 1");
		JLabel	cible2			= new JLabel("cible 2");
		cible1.setName(cible1.getText());
		cible2.setName(cible2.getText());
		cible1.setMinimumSize(new Dimension(50, 50));
		cible2.setMinimumSize(new Dimension(50, 50));
		cible1.setPreferredSize(new Dimension(50, 50));
		cible2.setPreferredSize(new Dimension(50, 50));
		cible1.setMaximumSize(new Dimension(50, 50));
		cible2.setMaximumSize(new Dimension(50, 50));
		cible1.setBorder(new LineBorder(Color.BLACK));
		cible2.setBorder(new LineBorder(Color.BLACK));
		panelCibles.add(cible1);
		panelCibles.add(cible2);
 
		panelPrincipal.add(panelCibles, BorderLayout.EAST);
 
		// GESTION DU DROP DE LA CIBLE
		listener1 = new GhostDropManager(cible1);
		listener2 = new GhostDropManager(cible2);
	}
 
 
	// ================================================
	// MAIN
	// ================================================	
	public static void main(String[] args)
	{
		DragnGhostElb demo = new DragnGhostElb();
		demo.setVisible(true);
	}
}

Drag'n drop avec GhostGlassPane

AWT/Swing Java

Discussions similaires

Partager

Partager