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.

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, Editeur de code, 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.

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.

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.

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.

• 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.

• Etat initial du champ à l'ouverture de la fenêtre,
• Visibilité du champ,
• Taille du champ,
• Cadrage, etc.

• paramètres de saisie,
• Drag and Drop, etc.

Le contenu de cet onglet varie beaucoup en fonction du type de champ en cours.

• 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.).

• 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.

• 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.

• 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.

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.

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.
• la grille.
• le correcteur d'interface en temps réel (proposé automatiquement lors d'un positionnement d'un champ).
• le correcteur d'interface avancé.
• les options d'alignement.

Les règles

Sous l'éditeur de fenêtres, il est possible de faire apparaître des règles d'alignement.

• 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é au guide correspondant.

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.

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 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.

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.

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é".

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é".

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.

• 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é.

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.

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é.

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.