Glisser-déposer en JavaFX - Guide étape par étape pour les débutants

As-tu déjà demandé comment Drag et Drop sont réalisés dans une interface graphique? Ce concept n’est pas seulement répandu dans les applications modernes, mais il est également d'une grande importance pour l'expérience utilisateur. Dans ce guide, je vais te montrer comment implémenter le glisser-déposer dans JavaFX, en créant deux rectangles que tu peux déplacer. Ce sera un guide étape par étape, afin que tu puisses facilement suivre toutes les étapes nécessaires.

Principales conclusions

• Le glisser-déposer permet aux utilisateurs de déplacer facilement des objets.
• L’implémentation du glisser-déposer dans JavaFX est facilement réalisable grâce aux gestionnaires d'événements et aux expressions lambda.
• La détection de collision est essentielle pour déterminer si un objet a été déposé dans une zone spécifique.

Guide étape par étape

1. Configuration du projet

Tout d'abord, crée un nouveau projet JavaFX dans ton environnement de développement. Assure-toi que toutes les bibliothèques nécessaires sont intégrées. Nous commencerons par la configuration de base de ton application en créant une classe principale.

2. Créer l'interface utilisateur

Pour notre exemple, nous allons créer deux rectangles: un petit que nous voulons déplacer et un grand qui sert de cible. Le code pour cela est le suivant:

Rectangle recToMove = new Rectangle(50, 50, 50, 50); // petit rectangle
Rectangle recTarget = new Rectangle(150, 150, 100, 100); // grand rectangle

Lors de la création des rectangles, tu définis leur position et leur taille.

3. Définir la position et la scène

Ensuite, tu as besoin de variables pour stocker la position de tes objets. Définit les coordonnées X et Y de la scène. Celles-ci seront utilisées plus tard pour suivre le mouvement durant le processus de glisser-déposer.

double mainX, mainY; 

4. Ajouter des gestionnaires d'événements

La prochaine étape consiste à ajouter des gestionnaires d'événements qui permettent la fonctionnalité de glisser-déposer. Nous commençons par le gestionnaire pour le clic de la souris.

recToMove.setOnMousePressed(event -> { mainX = event.getSceneX(); mainY = event.getSceneY();
});

Ici, tu enregistres la position actuelle de la souris lorsque le bouton de la souris est enfoncé.

5. Implémenter le gestionnaire de glissement

Pour la phase de glissement, nous utilisons un autre gestionnaire d'événements qui te permet de déplacer le rectangle tout en maintenant le bouton de la souris enfoncé.

Tu mets à jour la position du rectangle en fonction du mouvement de la souris actuel.

6. Relâcher le bouton de la souris

Pour prendre en compte le relâchement du bouton de la souris, ajoute un gestionnaire supplémentaire. Celui-ci changera la couleur du rectangle et vérifiera s'il est déposé dans une position cible spécifique.

recToMove.setOnMouseReleased(event -> { // Réinitialiser la couleur recToMove.setFill(Color.BLACK); checkBounce(recToMove);
});

7. Détection de collision

Pour vérifier si le rectangle déplacé a été déposé dans le rectangle cible, tu implémentes une méthode appelée checkBounce.

Ici, tu détectes si les deux rectangles se chevauchent et changes la couleur du rectangle cible en conséquence.

8. Ajouter les objets à la scène

Enfin, tu ajoutes les rectangles créés à ta scène et définis la scène sur la scène.

Résumé - Glisser-déposer avec JavaFX

Avec ce guide, tu as appris à implémenter un système simple de glisser-déposer dans JavaFX. Tu as découvert les bases de la détection de collision ainsi que la gestion des événements de souris. Les fonctionnalités de glisser-déposer sont essentielles pour l’ergonomie de tes applications.