DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Editeur de diagrammes
  • Présentation
  • Manipuler le champ Editeur de diagrammes par programmation
  • Présentation
  • Exporter un diagramme sous forme d'image
  • Gestion des bibliothèques de formes
  • Astuces de programmation
  • Comment récupérer les caractéristiques de la sélection dans un champ Editeur de diagrammes ?
  • Utilisation de la propriété Note des différentes formes
  • Comment connaître le type d'une forme ?
  • Spécificités WEBDEV
  • Programmation du champ Editeur de diagrammes sous WEBDEV
  • Exemple : Connaître et modifier la forme sélectionnée
  • Exemple : Récupérer l'indice de la forme ajoutée dans un champ Editeur de diagrammes
  • Propriétés WLangage associées
  • Propriétés spécifiques à la gestion d'un champ Editeur de diagrammes
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
WINDEV et WEBDEV permettent de manipuler un champ Editeur de diagrammes par programmation. Il suffit d'utiliser directement la variable du champ dans le code.
Un champ Editeur de diagrammes peut également être manipulé par programmation grâce aux Fonctions Diagramme.
Cette page d'aide détaille comment manipuler un champ Editeur de diagrammes par programmation.
Manipuler le champ Editeur de diagrammes par programmation

Présentation

Un champ Editeur de diagrammes permet de créer et d'afficher des diagrammes par programmation. Pour cela, le WLangage met à votre disposition :

Exporter un diagramme sous forme d'image

Pour exporter un diagramme sous forme d'image, il est possible d'utiliser la fonction DiagrammeVersImage. Cette fonction permet d'exporter le diagramme sous forme d'une variable de type Image. Il suffit ensuite d'utiliser une des fonctions suivantes pour obtenir l'image du diagramme dans le format voulu :
dSauveImageBMPSauve une image :
  • soit dans un fichier au format BMP.
  • soit en mémoire.
dSauveImageGIFSauve une image :
  • soit dans un fichier au format GIF.
  • soit en mémoire.
dSauveImageICOSauve une image au format icône soit dans un fichier, soit en mémoire.
dSauveImageJPEGSauve une image :
  • soit dans un fichier au format JPEG.
  • soit en mémoire.
dSauveImagePNGSauve une image :
  • soit dans un fichier au format PNG.
  • soit en mémoire.
dSauveImageTIFFSauve une image au format TIFF dans un fichier ou en mémoire.

Gestion des bibliothèques de formes

Par défaut, des bibliothèques de formes sont fournies avec le champ Editeur de diagrammes.
Il est possible de créer sa propre bibliothèque de formes. Une bibliothèque de formes correspond à un diagramme chargé en tant que bibliothèque. Ce diagramme peut être créé :
  • via le champ Editeur de diagrammes :
    1. Créez un diagramme.
    2. Importez les images correspondant aux formes voulues.
    3. Enregistrez le diagramme créé dans un fichier au format ".wddiag".
  • par programmation :
    1. Créez une variable de type Diagramme. Cette variable correspondra à la bibliothèque de formes.
    2. Créez les différentes formes personnalisées.
    3. Ajoutez les formes au diagramme "Bibliothèque".
    4. Enregistrez le diagramme "Bibliothèque" dans un fichier ".wddiag".
Une fois le diagramme "Bibliothèque" créé :
  1. Chargez le diagramme créé en tant que bibliothèque (fonction DiagrammeChargeBibliothèque).
  2. Ajoutez la bibliothèque au tableau des bibliothèques du diagramme final.
Exemple de création d'une bibliothèque par programmation :
sFichier est une chaîne = fRepTemp() + [ fSep ] + "bibli_perso.wddiag"

// Crée une bibliothèque entièrement par programmation
BibliTemp est un Diagramme

D1 est un diagOvale
D1.Largeur = 50
D1.Hauteur = 50
D1.Fond.Couleur = RougeFoncé
Ajoute(BibliTemp.Forme, D1)

D2 est un diagOvale
D2.Largeur = 50
D2.Hauteur = 70
D2.Fond.Couleur = VertFoncé
Ajoute(BibliTemp.Forme, D2)

// Utilise les formes du diagramme temporaire pour créer la bibliothèque
// Sauve le diagramme sur le disque
DiagrammeSauve(BibliTemp, sFichier)

// Charge le diagramme en tant que bibliothèque
MaBibli est un diagBibliothèque
DiagrammeChargeBibliothèque(MaBibli, sFichier)
MaBibli.Nom = "Perso"

// Ajoute la bibliothèque au champ Editeur de diagrammes
Ajoute(EDIAG_Diagramme.Bibliothèque, MaBibli)

ToastAffiche("La bibliothèque personnelle a Ã©té ajoutée dans la liste.")
Remarque : Si vous souhaitez utiliser uniquement vos propres bibliothèques, pensez à supprimer les bibliothèques proposées par défaut par PC SOFT. Pour cela, utilisez la fonction TableauSupprimeTout sur le tableau des bibliothèques de votre diagramme.
Astuces de programmation

Comment récupérer les caractéristiques de la sélection dans un champ Editeur de diagrammes ?

Les caractéristiques de la sélection effectuée dans un champ Editeur de diagrammes peuvent être récupérées via la propriété Sélection utilisée sur le champ. Si la sélection comprend plusieurs formes, il est possible de parcourir le tableau des formes.
Exemple :
// Obtenir la sélection dans un champ Editeur de diagrammes
MaSélection est un diagSélection <- EDIAG_MonDiagramme.Sélection
SI MaSélection.Forme.Occurrence > 0 ALORS
// Obtenir les formes
POUR TOUT stForme DE MaSélection.Forme
LIB_INFO_SELECTION = "Sélection de " + stForme.Nom + 
" [ " + stForme.X + ", " + stForme.Y + " - " + stForme.Largeur + 
"x" + stForme.Hauteur + " ]"
FIN
SINON
LIB_INFO_SELECTION = "Cliquez sur une forme dans le diagramme pour connaître la sélection"
FIN

Utilisation de la propriété Note des différentes formes

Les différentes variables de type diagForme (diagOvale, diagRectangle, ...) possèdent une propriété Note. Cette propriété peut être utilisée pour enregistrer tout type d'informations : numéro de la forme, type de la forme, information métier, ... Si le diagramme est enregistré sous forme d'un fichier "wddiag", les informations précisées à l'aide de la propriété Note sont également enregistrées. Il est ainsi possible de les relire et de les traiter lors du parcours des différentes formes d'un diagramme.
Cette astuce est utilisée dans l'exemple de mise en place d'un diagramme interactif.

Comment connaître le type d'une forme ?

Pour connaître le type d'une forme, il suffit d'affecter la forme aux différentes variables disponibles.
Exemple :
POUR TOUTE forme DE EDIAG_MonDiagramme.Forme
FormeImage est un diagImage <- forme
SI FormeImage <> Null ALORS
  // La forme est une image
FIN
FIN
WEBDEV - Code ServeurWEBDEV - Code Navigateur
Spécificités WEBDEV

Programmation du champ Editeur de diagrammes sous WEBDEV

Le champ Editeur de diagrammes peut être manipulé en code serveur via les différents types de variables et les différentes fonctions WLangage.
En code navigateur, ces fonctions et variables ne sont pas disponibles. L'astuce consiste à utiliser un champ Bouton invisible contenant le code serveur à exécuter. Le code de clic de ce champ Bouton pourra être exécuté depuis le code navigateur grâce à la fonction ExécuteTraitement utilisée avec la constante trtClic.
Remarques :
  • Il est conseillé d'utiliser un code de clic serveur de type "AJAX".
  • Il n'est pas possible d'utiliser la fonction AJAXExécute dans les traitements navigateur.
Par exemple, le code navigateur de double-clic sur une forme peut exécuter le code du champ Bouton BTN_DoubleClic :
// Gère le double clic sur une forme de l'éditeur de diagrammes
ExécuteTraitement(BTN_DoubleClic, trtClic)

Exemple : Connaître et modifier la forme sélectionnée

Dans le champ Editeur de diagrammes d'un site WEBDEV, pour récupérer les caractéristiques de la forme sélectionnée ou les modifier, il est possible d'utiliser la propriété Sélection.
Pour cela, il suffit de :
  • Créer un champ Bouton qui va permettre de récupérer la forme créée.
  • Exécuter le code du bouton depuis le code navigateur "Sélection d'une forme" du champ Editeur de diagrammes.
Le code de clic serveur du champ Bouton est le suivant (option "Ajax" activée):
// Obtenir la sélection
MaSélection est un diagSélection <- EDIAG_MonDiagramme.Sélection
// Vérifie si la sélection contient une seule forme
SI MaSélection.Forme.Occurrence = 1 ALORS
// change les couleurs
MaSélection.Forme[1].Bordure.Couleur = VertClair
MaSélection.Forme[1].Fond.Couleur=RougeClair
SINON
Info("Cliquez sur une forme dans le diagramme pour connaître la sélection")
FIN
Le code navigateur "Sélection d'une forme" du champ Editeur de diagrammes qui permet d'exécuter le code de clic du bouton est le suivant :
ExécuteTraitement(BTN_Sélection, trtClic)
RENVOYER Vrai

Exemple : Récupérer l'indice de la forme ajoutée dans un champ Editeur de diagrammes

Dans le champ Editeur de diagrammes d'un site WEBDEV, il est possible de récupérer l'indice de la forme ajoutée, via l'événement navigateur "Ajout d'une forme" du champ.
Pour cela, il suffit de :
  • Créer un champ Bouton qui va permettre de :
    • récupérer la position de la souris.
    • récupérer la forme créée.
  • Exécuter le code du bouton depuis le code navigateur "Ajout d'une forme" du champ Editeur de diagrammes.
Le code du bouton est le suivant :
  • Code serveur "Initialisation" du champ Bouton BTN_Ajout :
    GLOBAL
    posX, posY sont entiers <synchronisé navigateur>
  • Code navigateur "Clic sur" du champ Bouton BTN_Ajout :
    (posX, posY) = (SourisPosX(spChamp), SourisPosY(spChamp))
  • Code serveur "Clic sur" du champ Bouton BTN_Ajout (option "Ajax" activée):
    MonDiagramme est un Diagramme
    nIndice est un entier

    MonDiagramme <- EDIAG_SansNom1

    nIndice = DiagrammeInfoXY(EDIAG_SansNom1, posX, posY)

    SI nIndice = Null ALORS
    RENVOYER Faux
    FIN

    MaForme est un diagForme <- diagramme.Forme[nIndice]
  • Code navigateur "Ajout d'une forme" du champ Editeur de diagrammes :
    ExécuteTraitement(BTN_Ajout, trtClic)
    RENVOYER Vrai
Propriétés WLangage associées

Propriétés spécifiques à la gestion d'un champ Editeur de diagrammes

Les propriétés suivantes sont spécifiques à la gestion des caractéristiques d'un champ Editeur de diagrammes par programmation :
BibliothèqueLa propriété Bibliothèque permet de manipuler les différentes bibliothèques prédéfinies associées à un champ Editeur de diagrammes. Cette propriété permet d'accéder au tableau des bibliothèques du champ Editeur de diagrammes.
CadrePageVisibleLa propriété CadrePageVisible permet de :
  • savoir si le cadre des pages est affiché dans un champ Editeur de diagrammes.
  • afficher ou non le cadre des pages dans un champ Editeur de diagrammes.
ModeEditionLa propriété ModeEdition permet de connaître et de modifier le mode d'édition du champ Editeur de diagrammes : sélection ou dessin à main levée.
PanneauBibliothèqueVisibleLa propriété PanneauBibliothèqueVisible permet :
  • de savoir si le panneau "Bibliothèque" est affichée dans un champ Editeur de diagrammes.
  • d'afficher ou non le panneau "Bibliothèque" dans un champ Editeur de diagrammes.
PanneauModifieurVisibleLa propriété PanneauModifieurVisible permet de :
  • savoir si le panneau "Modifieur" est affichée dans un champ Editeur de diagrammes.
  • afficher ou non le panneau "Modifieur" dans un champ Editeur de diagrammes.
QuadrillageVisibleLa propriété QuadrillageVisible permet de :
  • Savoir si le quadrillage est visible ou non dans un champ.
  • Modifier la visibilité du quadrillage dans un champ.
SélectionLa propriété Sélection permet d'obtenir les caractéristiques de la sélection (ou du curseur) :
  • dans un champ Traitement de texte.
    Remarque : Cette sélection est située dans la partie en cours d'édition dans le champ (corps, entête ou pied de page).
  • dans un champ Tableur.
  • dans un champ Editeur HTML.
  • dans un champ Editeur de diagrammes.
Pour connaître la liste complète des propriétés du WLangage pouvant être utilisées avec un champ de type Editeur de diagrammes, consultez Propriétés associées au champ Editeur de diagrammes.
Version minimum requise
  • Version 27
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 23/10/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale