DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Concepts WINDEV / Partie 1 - Notions de base
  • Créer un champ
  • Les différents types de champs d'une fenêtre
  • Créer un nouveau champ
  • Créer un champ associé à une rubrique
  • Caractéristiques d'un champ
  • Affichage des caractéristiques
  • Caractéristiques par onglet
  • Manipuler les champs sous l'éditeur
  • Les poignées des champs
  • Manipulations disponibles
  • Alignement des champs
  • Les règles
  • Grille magnétique
  • Correcteur d'interface en temps réel
  • Correcteur d'interface avancé
  • Les options d'alignement
  • Options d'édition des champs dans une fenêtre
  • Rendre visible / invisible un champ
  • Verrouiller / Déverrouiller un champ
  • Encadrer ou non un champ
  • Ancrage des champs
  • Ancrer un champ sous l'éditeur
  • Exemple de paramétrage de l'ancrage des champs
  • Exécution automatique d'un champ Bouton
  • Mise en place
  • Programmation
  • FAA : Fonctionnalité Automatique de votre Application
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
11. Les champs en pratique
Page précédenteSommairePage suivante
WINDEV propose de nombreux types de champs, facilement intégrables dans vos fenêtres. Ces champs peuvent être créés directement par le volet "Création" du ruban WINDEV.
Tous les champs peuvent bien sûr être manipulés par programmation.
Créer un champ

Les différents types de champs d'une fenêtre

Les champs disponibles sous l'éditeur de fenêtres de WINDEV sont les suivants :
  • Champ de saisie,
  • Libellé,
  • Bouton,
  • Image,
  • Editeur d'images,
  • Editeur HTML,
  • Sélecteur,
  • Interrupteur,
  • Liste,
  • Combo,
  • Liste image,
  • Boîte à outils,
  • Tiroir,
  • Web Caméra,
  • Champ Conférence,
  • Champ OLE,
  • ActiveX,
  • Forme,
  • Code-barres,
  • Champ d'affichage HTML,
  • Superchamp,
  • Agenda,
  • Planning,
  • Notation,
  • Tableau croisé dynamique,
  • Tableau de bord,
  • Table,
  • Tableur,
  • Traitement de texte,
  • Diagramme de Gantt,
  • Table hiérarchique,
  • Arbre,
  • Editeur de diagrammes,
  • Organigramme,
  • Jauge,
  • Zone répétée,
  • Zone multiligne,
  • Ascenseur,
  • Potentiomètre,
  • Spin,
  • TimeLine,
  • Onglet,
  • Ruban,
  • Champ fenêtre interne,
  • Barre d'outils,
  • Séparateur,
  • Graphe,
  • Carte,
  • Carrousel,
  • Cube,
  • Widget,
  • Xaml,
  • Calendrier,
  • Modèle de champs,
  • Champ Disposition,
  • Panneau dockable,
  • Lecteur de PDF.
  • Kanban
Tous les champs peuvent bien sûr être manipulés par programmation.
Pour plus de détails sur chaque type de champ, leurs principales caractéristiques, ainsi que leur programmation en WLangage, consultez l'aide en ligne.

Créer un nouveau champ

Pour créer un champ :
  1. Sélectionnez le type de champ à créer grâce à l'icône correspondante dans le volet "Création" du menu de WINDEV.
  2. La forme du nouveau champ apparaît sous le curseur de la souris.
  3. Cliquez dans la fenêtre à la future position de création du champ. Le champ est automatiquement créé.
Remarque : D'autres modes de création sont disponibles. Pour plus de détails, consultez l'aide en ligne.

Créer un champ associé à une rubrique

Tous les champs d'une fenêtre peuvent être associés à une rubrique de fichier de données, SAUF :
  • Bouton
  • Timeline
  • Forme
  • Tableau de bord
  • Onglet
  • Xaml
  • Barre d'outils
  • Carrousel
  • Carte
  • Cube
  • Ruban
  • Champ d'affichage HTML
  • Séparateur
  • Champ Disposition

Pour créer un champ associé à une rubrique (ou récupérer une rubrique), plusieurs méthodes sont disponibles :
  • Drag and Drop depuis le volet "Analyse".
  • Utilisation de l'onglet "Fichier" de la fenêtre de description du champ.
Caractéristiques d'un champ
Pour tous les champs d'une fenêtre, il est possible d'afficher la fenêtre de description. Cette fenêtre est une fenêtre à onglets, regroupant toutes les caractéristiques paramétrables d'un ou de plusieurs champs.
Remarque : Il est également possible de visualiser et/ou de modifier les caractéristiques d'un ou de plusieurs champs dans le modifieur. Pour plus de détails, consultez l'aide en ligne.

Affichage des caractéristiques

Pour afficher la fenêtre de description d'un champ :
  • soit double-cliquez sur le champ.
  • soit sélectionnez l'option "Description" du menu contextuel du champ (clic droit de la souris).
  • soit sélectionnez le champ et utilisez le raccourci clavier Alt + Entrée.
Remarques :
  • Il est possible d'afficher la fenêtre de description pour un ensemble de champs sélectionnés. Seules les caractéristiques communes aux différents champs sélectionnés seront affichées.
  • Plusieurs fenêtres de description peuvent être affichées simultanément. Chaque fenêtre de description affiche alors les caractéristiques d'un ou de plusieurs champs.

Caractéristiques par onglet

Ce paragraphe présente rapidement les différentes catégories de caractéristiques affichées par onglet.
Onglet Général
L'onglet "Général" permet de spécifier le nom du champ et toutes les caractéristiques d'affichage du champ (libellé, masque de saisie, etc.).
Onglet UI
L'onglet "UI" permet de définir les différents paramètres de l'interface du champ :
  • Etat initial du champ à l'ouverture de la fenêtre,
  • Visibilité du champ,
  • Taille du champ,
  • Cadrage, etc.
Onglet Détail
L'onglet "Détail" permet de définir les différents paramètres du champ :
  • paramètres de saisie,
  • Drag and Drop, etc.
Le contenu de cet onglet varie beaucoup en fonction du type de champ en cours.
Onglet Liaison
Cet onglet permet de sélectionner la rubrique (d'un fichier de données ou d'une requête) à laquelle le champ est relié. Selon l'enregistrement en cours, le contenu de la rubrique reliée sera affiché dans le champ.
La liaison peut être mono-fichier ou multi-fichier.
Onglet Contenu
L'onglet "Contenu" permet de définir :
  • soit le contenu initial du champ (pour les champs de saisie uniquement).
  • soit la source de données utilisée pour remplir le champ (pour les champs Liste, Combo, Table, etc.).
Onglet Notes
L'onglet "Notes" permet de décrire le fonctionnement détaillé du champ. Ces informations seront imprimées dans les documentations techniques (dossier du projet, dossier de la fenêtre, etc.).
Onglet Aide
L'onglet "Aide" permet de saisir et de configurer tous les types d'aides associées au champ. Un champ peut avoir :
  • Une bulle d'aide, affichée lors du survol du champ.
  • Un message d'aide, affiché dans la barre de message lors de l'entrée dans le champ.
  • Une fenêtre d'aide avec un titre spécifique, affiché lors de l'utilisation de la touche F1.
Un champ peut être également associé à une page d'aide spécifique, présente dans un fichier d'aide au format CHM. Cette page d'aide sera affichée :
  • soit sous forme d'aide contextuelle (bulle d'aide affichée sur demande), si un fichier d'aide a été défini pour la fenêtre.
  • soit sous forme de page d'aide. La fonction WHelp devra être utilisée pour afficher la page d'aide.
Onglet Style
L'onglet "Style" permet de définir le style des différents éléments du champ. Cet écran permet de :
  • Modifier l'aspect d'un champ : il suffit alors de sélectionner l'élément du champ à modifier, puis ses caractéristiques de style. Seul l'aspect du champ en cours est modifié.
  • Appliquer un style existant au champ : il suffit de sélectionner le style à appliquer.
  • Créer ou modifier un style : le style créé ou modifié est mis à jour pour tous les champs du projet utilisant ce style.
Manipuler les champs sous l'éditeur

Les poignées des champs

Lorsqu'un champ vient d'être créé ou lorsqu'il est sélectionné, il s'affiche avec des poignées. Les poignées permettent de :
  • visualiser la taille d'un champ,
  • modifier la taille d'un champ.
Les couleurs des poignées permettent de connaître les actions réalisables :
  • Les poignées noires (ou d'une autre couleur suivant le gabarit utilisé) permettent de visualiser le champ sélectionné et de le redimensionner.
  • Les poignées blanches sont utilisées dans deux cas :
    • sélection simple : le champ sélectionné est uniquement en visualisation. Par exemple, ces poignées peuvent apparaître si le champ est sélectionné et si sa fenêtre de description est affichée. Dans ce cas, le champ ne peut être modifié ou déplacé directement sous l'éditeur.
    • sélection multiple : le champ sélectionné fait partie d'une sélection multiple, mais il n'est pas le premier champ sélectionné.
    Ce type de poignées est aussi affiché lorsqu'une fenêtre est en lecture seulement pour le développeur : les champs ne peuvent pas être modifiés.
  • Les poignées grises indiquent le premier champ sélectionné lors d'une sélection multiple. Ce champ sera le champ de référence.

Manipulations disponibles

L'éditeur de fenêtres permet de :
  • Sélectionner un ou plusieurs champs (par exemple à l'aide du lasso),
  • Regrouper des champs sélectionnés,
  • Déplacer un champ,
  • Modifier le libellé d'un champ,
  • Afficher une bulle d'aide avancée lors du survol d'un champ, contenant : le nom du champ, sa position, sa taille, son ancrage, son état initial.
  • Utiliser un champ hors fenêtre. Ce champ sera visible uniquement en édition et ne sera pas visible en exécution.
Remarque : Un champ "hors fenêtre" permet par exemple de :
  • conserver un champ d'une fenêtre sans le visualiser lors de l'exécution. Il est ainsi possible d'utiliser le contenu du champ en programmation (comme une variable).
  • afficher de nouveaux champs dans une fenêtre lors de la modification de la taille de cette fenêtre.
Alignement des champs
L'alignement des champs permet d'obtenir des interfaces "professionnelles" et harmonieuses. Pour vous aider à concevoir des interfaces standard, WINDEV vous propose les outils suivants :

Les règles

Sous l'éditeur de fenêtres, il est possible de faire apparaître des règles d'alignement.
Dans ces règles, des guides magnétiques sont affichés : tout champ approché d'un guide est automatiquement "attiré" par celui-ci.
Ce magnétisme permet d'utiliser les guides pour faciliter le positionnement, l'alignement ou le redimensionnement des champs de la fenêtre.
Afficher les règles
Pour afficher les règles, sous le volet "Affichage", dans le groupe "Aide à l'édition", cochez l'option "Règles". Deux types de repères peuvent alors être utilisés :
  • les repères, permettant d'aligner et de disposer les champs à l'intérieur des fenêtres grâce aux guides associés.
  • les repères de bordure, permettant de déterminer une bordure de taille identique de chaque côté de la fenêtre. Un guide permet de visualiser la zone de la bordure.
Remarque : L'option "Afficher les guides" du menu contextuel des règles permet de visualiser la fenêtre avec ou sans ses guides. Visibles ou non, les guides sont toujours actifs : un champ déplacé vers un repère est automatiquement accolé à celui-ci.
Par exemple, dans le cas d'une fenêtre :
Manipuler les repères
Les repères sont facilement manipulables à l'aide de la souris dans l'éditeur. Lorsque la souris survole un repère, le curseur se transforme en une double flèche.

Grille magnétique

La grille magnétique permet de placer des repères (verticaux et horizontaux) dans la fenêtre. Les champs créés viennent se placer contre ces repères, comme si les champs et les repères étaient magnétisés. La grille magnétique permet ainsi d'aligner les champs selon les repères.

Correcteur d'interface en temps réel

Lors du déplacement d'un champ dans une fenêtre, le correcteur d'interface en temps réel affiche automatiquement des guides. Ces guides sont magnétisés et permettent d'aligner le champ déplacé avec les champs présents dans la fenêtre.

Correcteur d'interface avancé

Le correcteur d'interface avancé est un outil permettant d'harmoniser la disposition des champs dans les différentes fenêtres d'une application.
Le correcteur d'interface avancé propose pour la fenêtre en cours ou uniquement pour les champs sélectionnés, d'appliquer des règles de présentation d'interface issues du standard Windows : alignement des champs, normalisation de la taille des champs Bouton, etc.

Les options d'alignement

Pour aligner plusieurs champs, WINDEV met à votre disposition :
  • soit un alignement prédéfini (disponible sous le volet "Alignement" ou sous le volet "Modification", dans le groupe "Profondeur et Alignement").
  • soit un alignement personnalisé (disponible sous le volet "Alignement", dans le groupe "Autres alignements").
L'alignement personnalisé permet d'utiliser des propriétés spécifiques d'alignement. Lors de l'alignement personnalisé, il est possible de définir :
  • l'alignement horizontal ou vertical : les champs peuvent être alignés à gauche en fonction du début du champ ou du début de la zone de saisie. Ils peuvent aussi être alignés à droite en fonction de la fin du champ ou de la fin de la zone de saisie.
  • l'espacement uniforme : l'espacement entre les champs est adapté pour être le même entre chaque champ (horizontalement ou verticalement).
  • la taille : la taille des champs sélectionnés est automatiquement adaptée pour obtenir des champs de même hauteur et/ou de même largeur.
  • le champ de référence : pour l'alignement et la taille des champs, le champ de référence est au choix :
    • le premier champ sélectionné (celui qui a les poignées blanches).
    • le dernier champ sélectionné.
    • le plus grand champ sélectionné.
    • le champ situé le plus en haut à gauche des champs sélectionnés.
Options d'édition des champs dans une fenêtre
Les options d'édition permettent de paramétrer :
  • les options d'affichage.
  • le magnétisme des champs.
  • les opérations de clic et de double-clic sur les champs.
  • les options de sélection des champs.
  • la position de la fenêtre à son ouverture.
Ces options d'affichage permettent de personnaliser la manipulation des champs sous l'éditeur de fenêtres.
Pour afficher ces options, sous le volet "Affichage", cliquez sur l'icône de regroupement du groupe "Options".

Rendre visible / invisible un champ

Pour rendre visible / invisible un champ sous l'éditeur de fenêtres :
  1. Sélectionnez le champ sous l'éditeur.
  2. Sous le volet "Modification", dans le groupe "Aide à l'édition", cochez/décochez l'option "Visible (éditeur)".

Verrouiller / Déverrouiller un champ

Pour verrouiller / déverrouiller un champ sous l'éditeur de fenêtres :
  1. Sélectionnez le champ sous l'éditeur.
  2. Sous le volet "Modification", dans le groupe "Aide à l'édition", cochez/décochez l'option "Verrouillé".
Un champ verrouillé est un champ qui ne peut pas être sélectionné au lasso. Il est intéressant par exemple de verrouiller un champ Onglet. Ainsi, lorsque plusieurs champs d'un volet d'onglet sont sélectionnés au lasso, le champ Onglet n'est pas sélectionné automatiquement.
Toutes les autres manipulations sont possibles sur un champ verrouillé.

Encadrer ou non un champ

Pour encadrer ou non un champ sous l'éditeur de fenêtres :
  1. Sélectionnez le champ sous l'éditeur.
  2. Sous le volet "Modification", dans le groupe "Aide à l'édition", cochez/décochez l'option "Encadré".
L'encadrement d'un champ permet de visualiser plus facilement l'ensemble des champs présents dans une fenêtre (notamment pour les champs Image).
Ancrage des champs
Les fenêtres d'une application WINDEV peuvent être redimensionnables à l'exécution. Grâce au mécanisme d'ancrage, la taille et la position des champs s'adaptent automatiquement lors d'un redimensionnement de la fenêtre.
La gestion de l'ancrage d'un champ est constituée de deux paramètres :
  • l'ancrage du champ : permet de définir la modification à appliquer au champ en fonction du changement de la taille de la fenêtre. Le champ peut se déplacer vers la gauche et ou vers le bas, s'agrandir en largeur et/ou en hauteur, etc.
  • le taux d'ancrage : permet de gérer le pourcentage de déplacement ou d'étirement du champ. Grâce à ce paramètre, il est possible par exemple de :
    • laisser un champ centré en largeur dans la fenêtre quelle que soit sa taille.
    • agrandir proportionnellement certains champs de la fenêtre.
Ces paramètres peuvent être configurés :
  • sous l'éditeur de fenêtres.
  • par programmation grâce aux propriétés WLangage.

Ancrer un champ sous l'éditeur

Pour ancrer un champ :
  1. Sélectionnez un ou plusieurs champs à ancrer.
  2. Définissez l'ancrage du / des champs :
    • soit dans l'onglet "UI" de la fenêtre de description du champ (option "Description" du menu contextuel du champ).
    • soit grâce à l'option "Ancrage" du menu contextuel (clic droit) du champ.
  3. Dans cette fenêtre, choisissez le type d'ancrage à utiliser. Les options les plus courantes sont présentées sous forme d'icônes :
    Aucun ancrage : Le champ n'est pas modifié lorsque la taille de la fenêtre est modifiée. Aucune option d'ancrage n'est sélectionnée.
    Largeur : Le champ s'étire vers la droite lorsque la fenêtre s'agrandit. Pour faire varier la vitesse d'étirement du champ par rapport à la fenêtre, utilisez le taux d'ancrage en largeur.
    Droite : Le champ se déplace vers la droite lorsque la fenêtre s'agrandit. Pour que le champ se déplace plus ou moins vite, utilisez le taux d'ancrage à droite.
    Centré en largeur : Le champ reste centré en largeur dans la fenêtre quelle que soit la largeur de la fenêtre.
    Hauteur : Le champ s'étire vers le bas lorsque la hauteur de la fenêtre s'agrandit. Pour faire varier la vitesse d'étirement du champ par rapport à la fenêtre, utilisez le taux d'ancrage en hauteur.
    Largeur et Hauteur : Le champ s'étire vers la droite et vers le bas lorsque la fenêtre s'agrandit. Pour faire varier la vitesse d'étirement du champ par rapport à la fenêtre, utilisez le taux d'ancrage en hauteur et le taux d'ancrage en largeur.
    Hauteur et Droite : Le champ s'étire vers le bas et se déplace vers la droite lorsque la fenêtre s'agrandit. Pour que le champ se déplace plus ou moins vite, utilisez le taux d'ancrage à droite. Pour faire varier la vitesse d'étirement du champ par rapport à la fenêtre, utilisez le taux d'ancrage en hauteur.
    Répartition Verticale : Cette option n'est disponible que lorsque plusieurs champs sont sélectionnés. Les options d'ancrage permettent alors de conserver une répartition verticale des champs sélectionnés lorsque la fenêtre s'agrandit en hauteur.
    Bas : Le champ se déplace vers le bas lorsque la fenêtre est agrandie vers le bas. Pour que le champ se déplace plus ou moins vite, utilisez le taux d'ancrage en bas.
    Largeur et Bas : Le champ s'étire vers la droite et se déplace vers le bas lorsque la fenêtre s'agrandit. Pour que le champ se déplace plus ou moins vite, utilisez le taux d'ancrage en bas. Pour faire varier la vitesse d'étirement du champ par rapport à la fenêtre, utilisez le taux d'ancrage en largeur.
    Droite et Bas : Le champ se déplace vers la droite et vers le bas lorsque la fenêtre s'agrandit. Pour que le champ se déplace plus ou moins vite, utilisez le taux d'ancrage en bas et le taux d'ancrage à droite.
    Centré horizontal en bas : Le champ reste centré en largeur dans la fenêtre quelle que soit la largeur de la fenêtre. Cependant, le champ est ancré en bas et se déplace vers le bas lorsque la fenêtre s'agrandit.
    Pour que le champ se déplace plus ou moins vite, utilisez le taux d'ancrage en bas.
    Centré en hauteur : Le champ reste centré en hauteur dans la fenêtre quelle que soit la hauteur de la fenêtre.
    Répartition Horizontale : Cette option n'est disponible que lorsque plusieurs champs sont sélectionnés. Les options d'ancrage permettent alors de conserver une répartition horizontale des champs sélectionnés lorsque la fenêtre s'élargit.
    Centré vertical à droite : Le champ reste centré en hauteur dans la fenêtre quelle que soit la hauteur de la fenêtre.
    Cependant, le champ est ancré à droite et se déplace vers la droite lorsque la fenêtre est élargie. Pour que le champ se déplace plus ou moins vite, utilisez le taux d'ancrage à droite.
    Centré : Le champ reste centré en hauteur et en largeur dans la fenêtre quelle que soit la taille de la fenêtre.

  4. Définissez si nécessaire les différents taux d'ancrage.
  5. Validez. Si l'option "Ancrage" est activée (sous le volet "Affichage", dans le groupe "Voir (tous les champs)"), les signes d'ancrage apparaissent automatiquement dans le champ (flèches rouges).

Exemple de paramétrage de l'ancrage des champs

Pour illustrer les possibilités d'ancrage des champs dans les fenêtres, voici un exemple détaillé.
Fenêtre originale :
Fenêtre agrandie :
Pour obtenir ce résultat :
  1. Sélectionnez les champs Bouton [<-] et [->] : ces champs doivent être centrés en hauteur et en largeur (option ).
  2. Sélectionnez les deux champs Liste : ces champs doivent être ancrés à droite, en largeur et en hauteur (options "à droite", "en largeur" et "en hauteur" cochées).
  3. Sélectionnez les 3 champs Bouton : ces champs doivent s'étirer à droite proportionnellement (option ).
Remarque : Par programmation, il est possible de configurer l'ancrage des champs grâce à diverses propriétés WLangage.
Exécution automatique d'un champ Bouton
Pour forcer une action sur une fenêtre, il suffit qu'un champ Bouton de cette fenêtre soit en mode "Exécution automatique". Le principe est très simple, si au bout d'une certaine durée, aucun bouton de la fenêtre n'a été utilisé, le code de clic du champ Bouton associé à l' "Exécution automatique" sera automatiquement exécuté.
En exécution, la durée est automatiquement décrémentée. A zéro, le code du champ Bouton est automatiquement exécuté.

Mise en place

Pour exécuter automatiquement le code d'un champ Bouton d'une fenêtre :
  1. Déterminez quel champ Bouton de votre fenêtre doit être exécuté automatiquement.
  2. Dans la description de la fenêtre (onglet "Détail" de la fenêtre de description), indiquez :
    • le temps avant l'exécution automatique du champ Bouton.
    • le nom du champ Bouton à exécuter.
  3. En exécution, le temps restant est automatiquement affiché.

Programmation

Il est possible également de définir un champ Bouton de validation automatique grâce à la fonction DélaiAvantFermeture.

FAA : Fonctionnalité Automatique de votre Application

Cette fonctionnalité est également directement accessible à l'utilisateur. Il peut demander qu'un champ Bouton de l'application s'exécute automatiquement au bout d'une durée spécifique.
Page précédenteSommairePage suivante
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 19/09/2023

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