1.2Fenêtres & champs (interface utilisateur)
L'essentiel en 30 secondes
- Les fenêtres se dessinent visuellement (glisser-déposer) et accueillent des champs : libellé, saisie, bouton, table, combo, onglet…
- L'ancrage définit le comportement au redimensionnement : un champ peut s'étirer, se déplacer ou rester fixe — sans lui, l'interface paraît bâclée.
- Nommer explicitement et soigner l'ordre de tabulation : c'est par le nom qu'on manipule un champ en WLangage, et l'ordre Tab conditionne la vitesse de saisie.
Mini-cas filé — Yacine dessine la fenêtre « Fiche commande »
Yacine crée maintenant l'interface de son application de négoce. Il ouvre une fenêtre vide intitulée « Fiche commande » et y dépose des champs par glisser-déposer : un libellé « Client », un champ de saisie, une table pour les lignes d'articles, et des boutons « Valider » et « Annuler ». Il renomme aussitôt chaque champ de façon explicite : SAI_NomClient plutôt que SAI_Sans_nom1. Puis il teste en agrandissant la fenêtre : la table reste tassée en haut à gauche dans un grand vide. Il règle alors l'ANCRAGE : la table s'étire en largeur et en hauteur, les boutons se déplacent vers le bas, le libellé reste fixe. Enfin il vérifie l'ORDRE DE TABULATION : la touche Tab doit passer du nom au téléphone, puis aux articles, dans l'ordre logique de saisie. Yacine retient : des champs bien nommés, un ancrage correct et un Tab cohérent font une interface professionnelle.
Cas autonome de cette section : il revient dans le cours, le schéma, le script et le défi 48h de la section 1.2.
1. Les fenêtres et leurs champs
Les FENÊTRES constituent l'interface de l'application : ce que l'utilisateur voit et manipule. Dans WinDev, on les dessine visuellement, sans code de positionnement. On y dépose des CHAMPS — le terme WinDev pour les composants d'interface.
Les principaux : le libellé (texte fixe), le champ de saisie, le bouton, la combo, l'onglet, et surtout la TABLE — champ majeur en gestion, qui affiche plusieurs enregistrements en lignes et colonnes. Chaque champ a un nom et des propriétés (onglets de description).
2. L'ancrage au redimensionnement
L'ANCRAGE définit ce que devient un champ quand la fenêtre est redimensionnée : s'étirer, se déplacer ou rester fixe. Sans ancrage, agrandir la fenêtre laisse les champs figés en haut à gauche dans un grand vide — le défaut le plus visible d'une application mal finie.
Bonne pratique : faire étirer le champ principal (souvent la table, l'utilisateur voit plus de lignes), faire déplacer les boutons d'action pour qu'ils restent visibles, laisser fixes les petits libellés.
3. Nommage et ordre de tabulation
Nommez les champs de façon explicite, avec une convention de préfixes : SAI_NomClient, BTN_Valider, TABLE_Articles. C'est par ce nom que vous les manipulerez en WLangage ; un nom parlant rend le code lisible et recherchable.
Soignez enfin l'ORDRE DE TABULATION : l'ordre dans lequel la touche Tab fait passer d'un champ au suivant. En gestion, la saisie au clavier est la norme — un ordre qui suit l'ordre logique de saisie change tout pour la rapidité et limite les erreurs.
🔎 Exemple concret — 🔎 Exemple concret — Nommer et ancrer les champs
La convention de Yacine pour la fenêtre « Fiche commande » :
// Convention de nommage des champs
SAI_NomClient : champ de saisie (préfixe SAI_)
BTN_Valider : bouton (préfixe BTN_)
TABLE_Articles : table de données (préfixe TABLE_)
LIB_Titre : libellé (préfixe LIB_)
// Ancrage (redimensionnement)
TABLE_Articles → étirer (largeur + hauteur)
BTN_Valider → déplacer (bas / droite)
LIB_Titre → rester fixeLecture : le nom dit clairement quel champ on manipule, et l'ancrage indique comment l'interface réagit à l'agrandissement.
Réflexe : nommer explicitement et faire étirer le champ principal (la table) dès la création de la fenêtre.
Vocabulaire de la section
- Champ (WinDev)
- Composant d'interface déposé sur une fenêtre : libellé, saisie, bouton, interrupteur, combo, table, image, onglet… Chaque champ a un nom et des propriétés.
Exemple simple : Yacine dépose un champ de saisie SAI_NomClient sur la fenêtre commande.
Ce que ce n'est pas : tout dessiner en dur, sans utiliser de composants d'interface.
Réflexe : composant d'interface → un champ nommé.
- Champ Table
- Champ majeur en gestion : affiche plusieurs enregistrements sous forme de lignes et de colonnes ; peut être lié à un fichier ou à une requête.
Exemple simple : Yacine affiche les lignes d'articles de la commande dans une table.
Ce que ce n'est pas : afficher chaque ligne dans un champ de saisie séparé, sans table.
Réflexe : plusieurs enregistrements → une table.
- Ancrage
- Comportement d'un champ quand la fenêtre est redimensionnée : s'étirer, se déplacer, rester fixe.
Exemple simple : Yacine fait étirer TABLE_Articles en largeur et en hauteur.
Ce que ce n'est pas : agrandir la fenêtre et laisser les champs figés dans un coin vide.
Réflexe : redimensionnement → régler l'ancrage.
- Nommage explicite
- Donner aux champs des noms parlants (SAI_NomClient) avec un préfixe par type, car c'est par ce nom qu'on les manipule en WLangage.
Exemple simple : Yacine renomme SAI_Sans_nom1 en SAI_NomClient.
Ce que ce n'est pas : laisser des noms génériques qui rendent le code illisible.
Réflexe : un champ → un nom explicite.
- Ordre de tabulation
- Ordre dans lequel la touche Tab fait passer d'un champ au suivant ; doit suivre l'ordre logique de saisie.
Exemple simple : Yacine règle Tab : Nom → Téléphone → Articles → Valider.
Ce que ce n'est pas : un Tab qui saute du nom au code postal puis remonte au prénom.
Réflexe : saisie fluide → ordre de tabulation logique.
En pratique — En pratique — Dessiner une fenêtre de saisie
- Créez une fenêtre et déposez les CHAMPS nécessaires depuis le catalogue (libellés, champs de saisie, boutons) par glisser-déposer.
- Renommez chaque champ avec un nom EXPLICITE (convention de préfixes) — c'est ainsi que vous le manipulerez en WLangage.
- Soignez la disposition : ordre logique de saisie, alignement, regroupement des informations liées, libellés clairs.
- Réglez l'ANCRAGE des champs (comportement au redimensionnement) et vérifiez l'ORDRE DE TABULATION pour une saisie fluide au clavier.
Script pas-à-pas — dessiner la fenêtre comme Yacine (4 min)
1) Créez une fenêtre (ex. « Fiche commande ») et déposez les champs nécessaires par glisser-déposer. 2) Renommez chaque champ avec un préfixe explicite (SAI_, BTN_, TABLE_, LIB_). 3) Organisez la disposition dans l'ordre logique de lecture et de saisie. 4) Réglez l'ancrage : champ principal étiré, boutons déplacés, libellés fixes. 5) Vérifiez l'ordre de tabulation en saisissant au clavier.
Une fenêtre se juge à l'usage : noms clairs, ancrage correct et Tab logique dès la première version.
Modèle copier-coller — la check-list de fenêtre de Yacine
[ ] Champs déposés par glisser-déposer (saisie, bouton, table…)
[ ] Nommage explicite avec préfixes (SAI_, BTN_, TABLE_, LIB_)
[ ] Disposition dans l'ordre logique de saisie
[ ] Champ principal ancré pour s'étirer (table)
[ ] Boutons d'action ancrés pour se déplacer
[ ] Libellés fixes ancrés pour ne pas bouger
[ ] Ordre de tabulation vérifié au clavierFenêtre de consultation
Yacine ne met qu'une grande table des commandes, ancrée pour s'étirer, avec peu de champs de saisie.
Fenêtre d'ajout
Yacine dispose les champs de saisie en colonne, dans l'ordre de saisie, avec Valider/Annuler ancrés en bas.
Onglets
Pour une fiche client complète, Yacine répartit les informations en onglets (Identité, Coordonnées, Historique).
Écran d'atelier
Sur un poste en atelier, Yacine agrandit les boutons et soigne l'espacement pour une utilisation confortable.
✓ Bonnes pratiques
- Nommer les champs de façon explicite avec une convention de préfixes.
- Régler l'ancrage : étirer la table, déplacer les boutons, fixer les libellés.
- Vérifier l'ordre de tabulation pour une saisie fluide au clavier.
✗ Pièges fréquents
- Laisser des noms génériques comme SAI_Sans_nom1.
- Oublier l'ancrage : interface tassée dans un coin à l'agrandissement.
- Négliger l'ordre de tabulation (Tab qui saute dans tous les sens).
Points clés à retenir
- Les fenêtres se dessinent visuellement : on y dépose des champs (libellé, saisie, bouton, table, combo, onglet).
- L'ancrage définit le comportement des champs au redimensionnement : étirer, déplacer, rester fixe.
- Nommer explicitement les champs (SAI_NomClient) : c'est par ce nom qu'on les manipule en WLangage.
- Un ordre de tabulation logique conditionne la vitesse et la fiabilité de la saisie au clavier.
Défi 48h — appliquez demain
Prenez une fenêtre existante et rendez-la professionnelle comme Yacine : renommez les champs avec des préfixes explicites, réglez l'ancrage (table étirée, boutons déplacés, libellés fixes) et corrigez l'ordre de tabulation. Écrivez en une phrase ce que change l'ancrage quand on agrandit la fenêtre.
- Je sais créer une fenêtre et y déposer des champs par glisser-déposer.
- Je comprends l'ancrage et je l'utilise pour une interface adaptative.
- Je nomme mes champs explicitement et je règle l'ordre de tabulation.
Questions fréquentes
Qu'est-ce que l'ancrage et pourquoi est-ce indispensable ?
L'ancrage définit comment chaque champ réagit au redimensionnement de la fenêtre : s'étirer, se déplacer ou rester fixe. Sans lui, une fenêtre agrandie affiche des champs figés en haut à gauche avec un grand vide — un défaut très visible. Le cas le plus utile : faire étirer la table principale, car l'utilisateur gagne réellement des lignes visibles. On déplace ensuite les boutons d'action pour qu'ils restent accessibles, et on laisse fixes les libellés.
Pourquoi soigner le nommage des champs et l'ordre de tabulation ?
Le nommage explicite rend le code WLangage lisible et maintenable : c'est par le nom qu'on manipule un champ, donc « SAI_NomClient » s'explique seul là où « SAI_Sans_nom1 » n'a aucun sens six mois plus tard. L'ordre de tabulation, lui, conditionne la vitesse de saisie : en gestion on enchaîne les champs au clavier, et un ordre incohérent fait perdre du temps et provoque des erreurs. Deux détails qui distinguent une application professionnelle d'une application amateur.
À quoi sert l'ancrage d'un champ dans une fenêtre WinDev ?