Auteur : Patrick Biker
Date : 26 février 2006
Version : 1.0
Révision : aucune
Ce document s'intéresse au Drag & Drop (Glisser-Déposer) d'objet graphique et plus spécialement au déplacement d'une image mobile vers une image fixe (cible). Le but étant de se donner des outils pour développer avec WinDev des programmes ludiques destinés aux jeunes enfants (2 à 4 ans).
La classe que j'ai développée ne prétend pas couvrir tous les besoins en glisser-déplacer que l'on peut rencontrer. Elle n'est notamment pas adaptée à l'écriture de programme de gestion. Elle a été écrite et testée pour être mise en application dans des logiciels éducatifs ludiques.
Les applications ludiques visées doivent permettre à l'enfant de maitriser les techniques simples de manipulation de la souris :
Les possibilités du glisser-déposer conviennent parfaitement à la réalisation d'applications destinées aux enfant. En voici quelques exemples :
Sur un plateau sont disposés des objets colorés, étoile - rond - carré et les mêmes objets grisés. En utilisant le glisser-déposer, l'enfant doit amener l'objet en couleur sur l'objet grisé correspondant.
Sur le plateau sont disposés un personnage central, entouré de figures grises représentant l'ombre chinoise des personnages. L'enfant doit trouver l'ombre correspondant au personnage central.
La présentation vidéo suivante vous donnera une meilleure idée du type d'application réalisable avec la classe que j'ai développée.
Présentation vidéo : projet illustrant les possibilités de ma classe
Une classe toute seule est peu pratique à utiliser sans exemple. C'est pourquoi vous trouverez en téléchargement non seulement la classe (en fait deux classes) mais aussi d'autres éléments regroupés dans un dictionnaire WinDev. Le dictionnaire que je fournis contient :
Un mini-tutoriel expliquant la mise en oeuvre de la classe est disponible.
Présentation vidéo : mise en oeuvre de la classe.
La mise en ouvre du drag and drop nécessite d'abord un support, une aire sur laquelle les objets seront déplacés.
C'est un champ image, de type "zone de clicage", "prioritaire pour les clics souris". Au niveau de cette image, on utilise les deux codes additionnels suivants :
A l'enfoncement du bouton, on appelle la classe pour démarrer le glisser-déposer, au relachement du bouton on appelle la classe pour terminer le glisser déposer. Un seule ligne de code suffit dans les deux cas.
// bouton enfoncé DragEasy::DragStart(MoiMême..Nom, SourisPosX(), SourisPosY())
// bouton relâché DragEasy::DragStop(MoiMême..Nom, SourisPosX(), SourisPosY())
Les objets mobiles sont aussi des images, mais n'ont pas de gestion propre de la souris. Notamment, et c'est très important, les options suivantes sont désactivées :
En fait, aucun code n'est nécessaire pour les objets mobiles.
Quand on déplace un élément, c'est généralement pour le lâcher sur une zone précise. Cette zone, c'est la cible et c'est aussi une image. Egalement sans gestion propre de la souris et sans code.
La plupart du temps, chaque objet déplacé a une cible unique. La classe a été construite avec ce parti pris. La déclaration d'un objet de la classe attend ainsi le nom de l'image mobile et le nom de la cible.
// Exemple de déclaration DragObj est un objet DragEasy("IMG_1", "IMG_2", "DragAction")
Le troisième paramètre est le nom d'une procédure locale à la fenêtre. C'est dans cette fenêtre, que sera codée la partie personnelle de l'application.
Cette procédure, que j'appelle "callback", est appelée chaque fois qu'un des événements suivants se produit :
La procédure recoit en paramètre le nom de l'objet mobile, le nom de la cible et l'événement sous la forme d'une constante déclarée dans la classe (DRAG_START, DRAG_STOP, DRAG_ON_TARGET, DRAG_ON_WRONG_TARGET).
Avec ces informations, il est possible de coder toute une variété d'applications, comme on peut le constater sur la vidéo de présentation.
Présentation vidéo : projet illustrant les possibilités de ma classe
Et en cas de problème, il suffit de consulter les sources.
Source du projet illustrant les possibilités de la classe
Le dictionnaire contenant les classes est inclus dans le source de ce projet. Il est également possible de le télécharger séparément.
Dictionnaire contenant la classe DragEasy.
Voilà ! N'hésitez pas à vous lancer dans le développement d'applications ludiques grâce à la classe EasyDrag et grâce à WinDev.