PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • 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 bouton
  • Mise en place
  • Programmation
  • FAA : Fonctionnalité Automatique de l'Application
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
10. Les champs en pratique
Chapitre précédentSommaireChapitre suivant
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,
  • Sélecteur,
  • Interrupteur,
  • Liste,
  • Combo,
  • Liste image,
  • Boîte à outils,
  • Tiroir,
  • Web Caméra,
  • Champ Conférence,
  • Champ OLE,
  • ActiveX,
  • Forme,
  • Code-barres,
  • Champ HTML,
  • Superchamp,
  • Agenda,
  • Planning,
  • Notation,
  • Tableau croisé dynamique,
  • Tableau de bord,
  • Table,
  • Tableur,
  • Traitement de texte,
  • Lecteur de PDF,
  • Diagramme de Gantt,
  • Table hiérarchique,
  • Arbre,
  • 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,
  • Fenêtre interne,
  • Modèle de champs,
  • Champ Disposition.
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 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, ...).
Onglet IHM
L'onglet "IHM" 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, ...
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, ...
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 rubrique) à 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
Cet onglet est disponible uniquement pour les champs des fenêtres.
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 listes, les combos et les tables uniquement).
Onglet Notes
L'onglet "Notes" permet de décrire le fonctionnement détaillé du champ. Ces informations seront imprimées dans les dossiers de programmation (dossier du projet, dossier de la fenêtre, ...).
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 permettent de visualiser et de redimensionner un champ.
  • Les poignées blanches permettent uniquement de visualiser un champ. Par exemple, lors de la sélection de plusieurs champs, les poignées blanches indiquent qu'il est impossible de modifier la taille des champs sélectionnés.
    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 guides peuvent alors être utilisés :
  • les guides, permettant d'aligner et de disposer les champs à l'intérieur des fenêtres.
  • les guides de bordure, permettant de déterminer une bordure de taille identique de chaque côté de la fenêtre.
Remarque : L'option "Guide visible" 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 boutons, ...

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 "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", 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 onglet. Lorsque plusieurs sélections au lasso des champs affichés dans l'onglet sont effectuées, l'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", 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, ...
  • 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 "IHM" 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 boutons [<-] et [->] : ces champs doivent être centrés en hauteur et en largeur (option ).
  2. Sélectionnez les deux listes : 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 boutons : 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 bouton
Pour forcer une action sur une fenêtre, il suffit de définir un bouton de cette fenêtre 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 traitement du bouton "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 bouton est automatiquement exécuté.

Mise en place

Pour exécuter automatiquement un bouton d'une fenêtre :
  1. Déterminez quel 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 bouton.
    • le bouton à exécuter.
  3. En exécution, le temps restant est automatiquement affiché.

Programmation

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

FAA : Fonctionnalité Automatique de l'Application

Cette fonctionnalité est également directement accessible à l'utilisateur. Il peut demander à ce qu'un bouton de l'application s'exécute automatiquement au bout d'une durée spécifique.
Chapitre précédentSommaireChapitre suivant
Version minimum requise
  • Version 9
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire