DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 2024 !
Aide / Tuto WINDEV / Tuto - A la découverte de WINDEV
  • Leçon 2 - Ma première fenêtre
  • Présentation
  • Ouverture du projet exemple
  • Première fenêtre : saisir et afficher des données
  • Comment créer la fenêtre ?
  • Saisie et affichage de la valeur saisie
  • Améliorations de la fenêtre
  • Modifications à effectuer sur la fenêtre
  • Modifications sur les champs
  • En résumé
  • Pour aller plus loin

Tuto - A la découverte de WINDEV

Leçon 2 - Ma première fenêtre
Ce que vous allez apprendre :
  • Comment créer une fenêtre.
  • Comment saisir un texte et l'afficher.
Durée de la leçon 30 mn
Présentation
Pour commencer à utiliser WINDEV, nous allons simplement créer une fenêtre, la tester et saisir des données. Ces premières manipulations vous permettront de connaître les bases du développement avec WINDEV. Vous pourrez ainsi aborder dans les tutoriels suivants des sujets plus complets.
Rappel : Les fenêtres permettent d'afficher ou de saisir à l'écran des informations. L'utilisateur peut agir directement sur les fenêtres par l'intermédiaire d'objets graphiques appelés "champs", par exemple champs de saisie, boutons, etc.

Ouverture du projet exemple

Dans WINDEV, ouvrez le projet "WD Mes premières fenêtres" :
  1. Affichez la page d'accueil de WINDEV (Ctrl + <).
  2. Cliquez sur "Tutoriel" puis dans la zone "Tuto - Découvrez WINDEV (Leçon 2) : Ma première fenêtre", double-cliquez sur "Mes premières fenêtres - Exercice".
Dans cette leçon, nous nous concentrons sur la création de fenêtres simples. Nous allons donc manipuler un projet vide, déjà créé.
La création de projet sera abordée dans le tuto Créer un projet WINDEV et son analyse.
Première fenêtre : saisir et afficher des données
Nous allons créer la fenêtre suivante :
Ma première fenêtre
Cette fenêtre permet à l'utilisateur de saisir son prénom et d'afficher un message de bienvenue grâce au bouton "Afficher".

Comment créer la fenêtre ?

La création d'une fenêtre se fait directement depuis les boutons d'accès rapide :
  1. Cliquez sur Créer un élément parmi les boutons d'accès rapide :
    Boutons d'accès rapide
    La fenêtre de création d'un nouvel élément s'affiche. Cette fenêtre permet de créer tous les éléments pouvant être associés à un projet.
  2. Cliquez sur "Fenêtre" puis sur "Fenêtre". L'assistant de création d'une fenêtre s'affiche.
  3. Sélectionnez "Vierge".
    Assistant de création d'une fenêtre
  4. Validez (bouton "OK").
La fenêtre est automatiquement créée sous l'éditeur. La fenêtre de sauvegarde de l'élément créé apparaît. Cette fenêtre permet de renseigner :
  • Le titre de l'élément. Pour une fenêtre, ce titre sera affiché dans la barre de titre de la fenêtre.
  • Le nom de l'élément. Ce nom correspond au nom logique de l'élément. Ce nom sera utilisé pour manipuler l'élément par programmation.
  • L'emplacement de l'élément. Cet emplacement correspond au répertoire de sauvegarde de l'élément.
Pour notre exemple :
  1. Indiquez le titre de l'élément "Ma première fenêtre" (ici, l'élément correspond à la fenêtre WINDEV). Le nom de l'élément "FEN_Ma_première_fenêtre" est automatiquement proposé.
    Sauvegarde de la fenêtre
  2. Validez (bouton "OK").
A savoir :
Le nom de la fenêtre (qui sera utilisé par exemple en programmation) est automatiquement déduit du titre de l'élément. Si ce nom ne vous convient pas, il est possible de le modifier et de spécifier un nom différent du titre de l'élément.

Saisie et affichage de la valeur saisie

Notre première fenêtre est créée. Nous allons maintenant créer les différents champs de la fenêtre. Ces champs vont permettre de saisir et d'afficher des informations.
La fenêtre est constituée des champs suivants :
  • un champ dans lequel l'utilisateur va saisir son prénom. Ce type de champ est donc un "champ de saisie".
  • un champ Bouton permettant d'afficher le prénom saisi.
Premier champ : un champ de saisie
Commençons par créer le champ de saisie qui va permettre à l'utilisateur de s'identifier :
  1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie" (cliquez sur la flèche) :
    Créer un champ de saisie
    Une liste de champs de saisie prédéfinis s'affiche.
    A savoir
    Cette liste propose différents champs de saisie directement utilisables (Champs Métier). Pour tester ces champs, il suffit de cliquer sur l'icône "GO" apparaissant au survol du champ.
  2. Dans la zone de recherche en haut de la liste des champs prédéfinis, saisissez "Saisie simple texte". Le champ correspondant apparaît dans la liste.
  3. Cliquez sur le champ "Saisie simple texte". Le champ en création suit alors le mouvement de la souris.
  4. Cliquez dans la fenêtre pour créer le champ (par exemple en haut de la fenêtre). Le champ est créé et des poignées sont affichées pour indiquer que le champ est sélectionné.
    Champ sélectionné
Comment sélectionner un champ ?
Pour sélectionner un champ, il suffit de cliquer sur le champ avec la souris. Des poignées de sélection apparaissent alors sur les différents côtés du champ. Si le champ est déjà sélectionné, un clic sur le champ permet d'éditer le libellé (nous le verrons dans la suite de ce tuto).
Par défaut, le champ créé a pour libellé "Texte". Nous allons modifier ce libellé pour afficher "Prénom". Pour cela, nous allons utiliser la fenêtre de description du champ.
  1. Faites un clic droit de la souris sur le champ que vous venez de créer. Le menu contextuel du champ s'affiche.
  2. Dans ce menu contextuel (clic droit), sélectionnez l'option "Description". La fenêtre de description du champ de saisie s'affiche.
  3. Modifiez les caractéristiques du champ en saisissant les informations suivantes :
    Description d'un champ de saisie
    • Ce champ a pour nom : "SAI_Prénom" (1).
    • Ce champ a pour libellé : "Prénom" (2).
    • Ce champ est de type texte (3).
  4. Validez la fenêtre de description du champ (bouton "OK"). Le champ apparaît sous l'éditeur de fenêtres.
Le libellé du champ de saisie a bien été modifié dans l'éditeur de fenêtres, mais il apparaît tronqué.
Libellé tronqué
Pour afficher correctement le champ :
  1. Si nécessaire, sélectionnez le champ.
  2. Dans le menu contextuel (clic droit), sélectionnez l'option "Adapter la taille".
  3. Le champ est immédiatement agrandi et le libellé apparaît en entier.
    Champ redimensionné
Second champ : un bouton
Pour créer le champ Bouton "Afficher" :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton.
    A savoir :
    Vous devez créer un champ ? Affichez le volet "Création" de WINDEV : tous les champs disponibles sont accessibles dans ce volet.
  2. Positionnez le champ dans la fenêtre : cliquez à l'emplacement de création du champ Bouton (par exemple à droite du champ de saisie).
  3. Cliquez sur le champ que vous venez de créer. Le texte affiché dans le champ passe en édition.
  4. Saisissez le libellé "Afficher". Le nom du champ Bouton devient automatiquement "BTN_Afficher­".
  5. Vous pouvez voir le nom du champ :
    • soit dans la bulle d'aide affichée lors du survol du champ :
      Bulle d'aide lors du survol du champ
    • soit dans la barre de message de l'éditeur :
      Barre de message

Afficher une information
Nous allons afficher le texte saisi dans une boîte de dialogue (une mini-fenêtre proposée par le système). Pour cela, nous allons utiliser notre première fonction WLangage, la fonction Info.
  1. Sélectionnez à l'aide de la souris le champ Bouton "Afficher".
  2. Affichez le menu contextuel du champ (clic droit de la souris).
  3. Sélectionnez l'option "Code". Cette option ouvre l'éditeur de code de WINDEV.
    Cet éditeur de code permet de saisir toutes les instructions WLangage dans des événements associés aux champs.
  4. Dans l'événement "Clic sur BTN_Afficher", saisissez le code WLangage suivant :
    Info("Bonjour", SAI_Prénom)
La fonction Info affiche le message passé en paramètre sur une ou plusieurs lignes. Notre message est construit à partir du texte "Bonjour " et de la valeur du champ "SAI_Prénom". Le signe "," sépare les paramètres de la fonction Info. Chaque paramètre est affiché sur une ligne différente.
Premier test
Nous allons tester la fenêtre :
  1. Cliquez sur Tester une fenêtre parmi les boutons d'accès rapide (ou utilisez la touche F9).
  2. La fenêtre que vous avez créée est automatiquement sauvegardée puis elle se lance en exécution.
    Go de la fenêtre
  3. Saisissez votre prénom.
  4. Cliquez sur le bouton "Afficher".
  5. Validez la fenêtre système qui s'affiche (cliquez sur le bouton "OK").
  6. Fermez la fenêtre de test : cliquez sur le bouton de fermeture système de la fenêtre (bouton "x" situé dans la barre de titre).
L'éditeur de WINDEV réapparaît. Fermez l'éditeur de code : sous le volet "Accueil", dans le groupe "Général", cliquez sur "Fermer".
Une erreur est affichée dans le volet "Erreurs de compilation". Cette erreur indique que la fenêtre est redimensionnable mais qu'aucun ancrage n'est défini. Ne vous inquiétez pas : nous allons traiter cette erreur dans la suite de ce tuto.
Lors du développement d'une application, WINDEV vous informe au fur et à mesure du développement des problèmes potentiels de votre application via le volet "Erreurs de compilation". Pour plus de détails, consultez Compilation du projet : Warning, Erreur, Informations, Norme de programmation, etc..
Améliorations de la fenêtre
Lors de ce premier test, vous avez remarqué que :
  • votre fenêtre est trop grande,
  • votre fenêtre peut être redimensionnée alors qu'elle ne contient que deux champs,
  • le prénom saisi est affiché avec la casse utilisée dans le champ de saisie. Nous allons forcer l'utilisation d'une majuscule en début de mot.
Nous allons revoir rapidement l'UI de cette fenêtre.

Modifications à effectuer sur la fenêtre

Nous allons tout d'abord réduire la taille de la fenêtre sous l'éditeur. Comme l'éditeur correspond à ce que nous voyons en exécution, la fenêtre sera également redimensionnée en exécution :
  1. Dans l'éditeur de fenêtres, cliquez sur la fenêtre : des poignées apparaissent autour de la fenêtre.
  2. Cliquez sur la poignée située en bas à droite et réduisez la taille de la fenêtre en maintenant le bouton gauche de la souris enfoncé.
    Redimensionnement de la fenêtre
Maintenant, nous devons empêcher le redimensionnement de la fenêtre par l'utilisateur : une option suffit.
  1. Double-cliquez sur la fenêtre. La fenêtre de description s'affiche.
  2. Dans l'onglet "Général", décochez l'option "Redimensionnable" (il suffit de cliquer sur l'option).
  3. Validez.
    Nous approfondirons les conseils d'UI et d'ergonomie dans un prochain tutoriel.
Pour visualiser le résultat en exécution, relancez le test de cette fenêtre (). Le résultat est immédiat.
Ma première fenêtre
Revenez sous l'éditeur en fermant la fenêtre de test.

Modifications sur les champs

Nous allons maintenant forcer l'utilisation d'une majuscule lors de la saisie et de l'affichage du prénom.
WINDEV propose la gestion d'un masque de saisie pour un champ. Le masque de saisie permet de mettre en forme la valeur saisie, automatiquement et sans aucune ligne de code.
Pour modifier le masque de saisie du champ :
  1. Double-cliquez sur le champ "Prénom". La fenêtre de description du champ s'affiche.
  2. Dans l'onglet "Général", déroulez la liste "Masque de saisie" et choisissez "1ère lettre maj.".
    Masque de saisie
  3. Validez la fenêtre de description du champ.
  4. Sous l'éditeur, le nom du masque apparaît automatiquement dans le champ.
Un test rapide ?
  1. Relancez le test de cette fenêtre pour visualiser le résultat en exécution.
    Test d'une fenêtre
  2. Validez le message et fermez la fenêtre de test (cliquez sur la croix en haut, à droite de la fenêtre). L'éditeur réapparaît.
Fermez la fenêtre "FEN_Ma_première_fenêtre" affichée sous l'éditeur : sous le volet "Accueil", dans le groupe "Général", cliquez sur "Fermer".
Fermez le projet : sous le volet "Accueil", dans le groupe "Général", cliquez sur "Fermer" et sélectionnez "Fermer le projet".
En résumé
La création d'un première fenêtre nous a permis de voir plusieurs fonctionnalités de WINDEV :
  • la création de fenêtres.
  • la création des champs de saisie et des champs Bouton.
  • l'éditeur de fenêtres WYSIWYG.
  • les possibilités des masques de saisie.
Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Découvrez WINDEV (Leçon 2) : Ma première fenêtre", double-cliquez sur "Mes premières fenêtres - Corrigé".
Pour aller plus loin
WINDEV propose plus d'une cinquantaine de champs. Pour découvrir l'utilisation de chaque type de champ, des exemples unitaires sont à votre disposition.

Pour ouvrir un exemple unitaire :
  1. Affichez la page d'accueil de WINDEV (combinaison de touches Ctrl + <).
  2. Cliquez si nécessaire sur "Ouvrir un exemple".
  3. La liste des exemples complets, didactiques et unitaires s'affiche.
  4. Dans la catégorie "Exemples unitaires", sélectionnez l'exemple voulu (par exemple "Le champ Arbre (Treeview)") et double-cliquez sur son nom : la fenêtre correspondante s'ouvre automatiquement sous l'éditeur.
Remarque : Pour simplifier, tous les exemples unitaires correspondant aux champs contiennent le nom du champ : Arbre, Caméra, etc.
Leçon précédenteSommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 13/12/2023

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