|
|
|
|
|
|
|
|
|
|
- Présentation
- Principe
- Comment le faire ?
- Création du plan
- Paramétrage des places
- Interface de l'utilisateur final : création du champ
- Interface de l'utilisateur final : initialisation du diagramme
- Interface de l'utilisateur final : gestion du clic
- Interface de l'utilisateur final : gestion du survol (WINDEV uniquement)
Créer un diagramme interactif
Le champ Editeur de diagrammes permet aux utilisateurs finaux de créer et de manipuler des diagrammes. Il est par exemple possible de proposer aux utilisateurs un plan (stade, salle de spectacle, bureaux, etc.) lors d'une réservation de places. Dans ce cas, le plan doit être interactif pour permettre aux utilisateurs finaux de sélectionner leurs places directement au clic dans le plan. Remarque : Nous présentons ici le cas de la réservation de places, mais le même principe peut être utilisé dans de nombreux autres types d'applications. L'utilisateur va manipuler le plan via le champ Editeur de diagrammes. Ce plan est en affichage seulement. En effet, l'utilisateur ne doit pas modifier le diagramme mais interagir avec les éléments du diagramme. L'utilisateur doit pouvoir sélectionner des places (par exemple) et non modifier le plan. Le champ Editeur de diagrammes dispose de différents événements qui permettent de gérer les interactions : - double-clic sur une forme,
 survol souris, - bouton gauche relâché,
- sélection d'une forme,
- ...
Il est ainsi possible d'imaginer que : - le survol d'un élément affiche une bulle d'aide.
- le clic ou le double-clic sur une forme (une place par exemple) entraîne sa sélection (pour un éventuel achat). La couleur (ou l'image) de la place peut être modifiée en fonction de son statut (disponible ou réservée).
Création du plan Le plan de la salle est un diagramme créé avec le champ Editeur de diagrammes. Ce plan contient différentes formes qui correspondent aux places disponibles. Ce plan est sauvegardé dans un fichier ".wddiag" afin d'être proposé aux utilisateurs via un champ Editeur de diagrammes pour la sélection de places. Paramétrage des places Lorsque le plan est créé, il faut "paramétrer" chacun des éléments du plan. Dans le cas d'une salle de concert par exemple, chaque place a un nom et un état. L'état peut être stocké facilement dans la propriété Note de la variable de type diagForme. Ces informations doivent être configurées dans le diagramme (dans le fichier ".wddiag" correspondant au plan). Astuces : - Cette opération peut être effectuée via une fenêtre spécifique. Cette fenêtre va permettre au créateur du plan de nommer toutes les places, et si nécessaire de leur associer un commentaire.
- Les places réservées / non réservées peuvent être stockées (par exemple dans un tableau, un fichier, etc.) afin de vérifier simplement si les places sont libres ou non.
Interface de l'utilisateur final : création du champ Pour que l'utilisateur final puisse utiliser le plan pour faire ses réservations, le champ Editeur de diagrammes ne doit pas pouvoir modifier le diagramme affiché. Pour créer le champ Editeur de diagrammes : - Sous WINDEV : sous le volet "Création", dans le groupe "Champs graphiques", déroulez "Bureautique" et sélectionnez "Editeur de diagrammes".
- Sous WEBDEV : sous le volet "Création", dans le groupe "Champs graphiques", cliquez sur "Diagrammes".
Pour rendre le champ Editeur de diagrammes non modifiable : - Affichez la fenêtre de description du champ.
- Pour ne pas afficher les barres d'outils et les panneaux : Dans l'onglet "Général", désactivez l'affichage des barres d'outils et des panneaux.
- Pour que le champ soit en "Lecture seule", utilisez une des méthodes suivantes :
- Méthode 1 : Dans l'onglet "UI" de la fenêtre de description du champ, sélectionnez l'option "Lecture seule".
- Méthode 2 : par programmation, utiliser la propriété Etat pour rendre le champ inactif.
Interface de l'utilisateur final : initialisation du diagramme L'initialisation du diagramme consiste à : - Charger le plan "vide" dans l'interface (fonction DiagrammeCharge) : le plan "vide" correspond au fichier ".wddiag" créé précédemment.
Exemple :
diagChamp est un Diagramme
diagChamp <- EDIAG_Plan
diagChamp.Charge("plan_salle.wddiag")
// Rendre le diagramme inactif si nécessaire
EDIAG_Plan.Etat = Inactif - Initialiser ensuite le plan pour visualiser par exemple les éléments réservés. Pour cela, comme le plan est un diagramme et que chaque place est une forme, il suffit de manipuler la forme correspondant à la place, via une variable de type diagForme. Il est possible de changer la bordure, la couleur de fond, d'associer une note, ...
Exemple :
FormeDuDiagramme est diagForme
POUR TOUT FormeDuDiagramme DE diagChamp.Forme
sNomForme = FormeDuDiagramme.Nom // récupère le nom de la forme
// Comparaison du nom de la forme à la liste des places réservées
// => Traitement spécifique des places réservées :
// colore la place en rouge et associe "Réservé" à la note
// => Traitement standard des places non réservées
FIN
Remarque : la liste des places réservées peut être présente dans un tableau, un fichier, ... Interface de l'utilisateur final : gestion du clic Dans cet exemple, le champ Editeur de diagrammes est en lecture seule : il n'est pas possible de gérer directement la forme sélectionnée grâce à la propriété Sélection. Pour connaître la place cliquée, l'astuce consiste à utiliser la fonction DiagrammeInfoXY. En WINDEV, lorsque l'utilisateur final clique sur une place libre dans le plan, il faut sélectionner cette place. Il suffit d'utiliser l'événement "Bouton gauche relâché" du champ Editeur de diagrammes. La fonction DiagrammeInfoXY permet de récupérer la forme sur laquelle le clic a été effectué.
diagChamp est un Diagramme
...
// Récupère l'indice de la forme sous la souris
nIndice est un entier
nIndice = DiagrammeInfoXY(EDIAG_Plan, SourisPosX(spChamp), SourisPosY(spChamp))
// La forme sélectionnée correspond à diagChamp.Forme[nIndice] Il est alors possible de retrouver toutes les caractéristiques de la forme sélectionnée. En WEBDEV, le fonctionnement est un peu différent. En effet, seul l’événement "Double-clic sur une forme" est disponible en code navigateur. De plus, les variables de type diagForme ne sont pas accessibles en code navigateur. Pour gérer le double-clic, l'astuce consiste à créer un champ Bouton. Ce champ Bouton contient un code serveur et navigateur permettant de récupérer la position de la souris et de gérer la sélection de la place : - Code navigateur :
- Initialisation du champ Bouton (code serveur) :
GLOBAL
posX, posY sont entiers <synchronisé navigateur> - Clic navigateur sur le champ Bouton : Récupération de la position :
(posX, posY) = (SourisPosX(spChamp), SourisPosY(spChamp))
- Clic serveur sur le champ Bouton (AJAX activé) : Récupération de la forme sous la souris :
diagChamp est un Diagramme
...
// Récupère l'indice de la forme sous la souris
nIndice est un entier
nIndice = DiagrammeInfoXY(EDIAG_Plan, posX, posY)
// La forme sélectionnée correspond à diagChamp.Forme[nIndice]
Il est alors possible de retrouver toutes les caractéristiques de la forme sélectionnée. Interface de l'utilisateur final : gestion du survol (WINDEV uniquement) Lorsque l'utilisateur survole une place, il est également possible d'afficher une bulle d'information, grâce à l'événement "Survol souris" du champ Editeur de diagrammes. Comme pour la gestion du clic, il est possible de récupérer la place survolée avec la fonction DiagrammeInfoXY. Il suffit d'utiliser la propriété Bulle du champ Editeur de diagrammes pour afficher les informations voulues.
Documentation également disponible pour…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|