pictogram Auteur : Patrick Biker
Date : 26 février 2006
Version : 1.0
Révision : aucune

Au sommaire : POO, classe, WinDev et Drag & Drop

Drag & Drop pour applications ludiques destinées aux jeunes enfants

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.

But pédagogique

Les applications ludiques visées doivent permettre à l'enfant de maitriser les techniques simples de manipulation de la souris :

Exemples d'application

Les possibilités du glisser-déposer conviennent parfaitement à la réalisation d'applications destinées aux enfant. En voici quelques exemples :

Association de paires

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.

Choix de la bonne forme

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

Utilisation de la classe avec WinDev

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.

Principe de fonctionnement

La mise en ouvre du drag and drop nécessite d'abord un support, une aire sur laquelle les objets seront déplacés.

Le support du glisser-déposer

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

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.

Les cibles

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.

Déclarations des objets

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.

La procédure Callback

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.