PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Ouverture du projet
  • Ma première fenêtre : saisir et afficher des données
  • Présentation
  • Création de la fenêtre
  • Saisie et affichage de la valeur saisie
  • Améliorations de la fenêtre
  • WINDEV : Concepts de base et terminologie
  • Concepts de base
  • Terminologie
Leçon 1.2. Ma première fenêtre
Ce que vous allez apprendre dans cette leçon
  • Comment créer une fenêtre.
  • Comment saisir un texte et l'afficher.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Pour commencer à utiliser WINDEV, nous allons simplement créer une fenêtre.

Note

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 de champs, de boutons, ...
Nous allons voir comment :
  • Ouvrir un projet,
  • Créer et enregistrer une fenêtre,
  • Saisir et afficher 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 parties suivantes des sujets plus complets.

Ouverture du projet

  • Lancez WINDEV 23 (si ce n'est déjà fait). Si nécessaire, affichez la fenêtre de bienvenue de WINDEV : utilisez la combinaison de touches Ctrl + <.
  • Ouvrez le projet "WD Mes Premières Fenêtres".
    Pour cela, dans la fenêtre de bienvenue, cliquez sur "Cours d'auto-formation" et sélectionnez le premier projet "Mes premières fenêtres (Exercice)".
    Astuce : si la fenêtre de bienvenue n'est pas affichée, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez l'option "Mes premières fenêtres (Exercice)".

Important

Dans cette partie, nous nous concentrons sur la création de fenêtres simples. Le projet "WD Mes Premières Fenêtres" est un projet vide, déjà créé. La création de projet sera abordée dans une prochaine leçon.

Corrigé

Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette partie (ainsi que dans la partie 2). Pour ouvrir le projet corrigé :
  • dans la fenêtre de bienvenue, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "Mes premières fenêtres (Corrigé)".
  • sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez "Mes premières fenêtres (Corrigé)".
Ma première fenêtre : saisir et afficher des données

Présentation

Voici la fenêtre que vous allez créer :
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".
Vous pouvez être tenté de dire que c'est trop simple, trop basique, mais nous vous conseillons de réaliser cette fenêtre. Vous risquez d'être surpris par la facilité et l'intuitivité de l'éditeur de WINDEV. De plus, cette fenêtre vous permettra de découvrir des concepts fondamentaux pour la suite de ce cours.

Création de la fenêtre

  • Pour créer la fenêtre :
    1. Cliquez sur Création parmi les boutons d'accès rapide du menu de WINDEV :
      Création d'une fenêtre
    2. 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.
    3. Cliquez sur "Fenêtre" puis sur "Fenêtre". L'assistant de création de fenêtres s'affiche.
    4. Sélectionnez "Vierge" dans la liste des fenêtres "standard" affichée sur la gauche. Dans la liste des gabarits présente sur la droite, le gabarit "Elegant" est sélectionné par défaut. Vous pouvez choisir un autre gabarit proposé dans la liste.
      Assistant de création d'une fenêtre

      Note

      Les gabarits permettent de créer rapidement des interfaces professionnelles. Un gabarit définit le look de la fenêtre mais également le look de tous les champs qui seront utilisés dans cette fenêtre. Ainsi, aucune faute de goût n'est possible.
    5. Validez l'assistant de création de fenêtre (bouton vert). 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.
    6. 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é.

      Note

      Observez bien le nom de la fenêtre que WINDEV propose par défaut : ce nom commence par les lettres "FEN_". Ce préfixe est automatiquement ajouté car le projet utilise une charte de programmation.
      La charte de programmation permet de définir un préfixe pour chaque type d'objet et ainsi d'identifier rapidement l'élément manipulé :
      • une fenêtre commence par "FEN_",
      • un bouton commence par "BTN_",
      • etc.
      Si vous ne voulez pas utiliser cette charte, il suffit de la débrancher : sous le volet "Projet", dans le groupe "Autres actions", déroulez "Charte" et décochez l'option "Utiliser la charte".

      Express

      En version Express, le nom de tous les éléments du projet (fenêtres, états, ...) est préfixé par "EXPRESS_".
    7. Pour cet exemple, nous voulons utiliser un nom de fenêtre plus court : remplacez "FEN_Ma_première_fenêtre" par "FEN_Bienvenue".
      Sauvegarde d'un élément
    8. Validez les informations affichées dans la fenêtre de sauvegarde en cliquant sur le bouton vert.

Saisie et affichage de la valeur saisie

Pour gérer la saisie et l'affichage de la valeur saisie, vous allez créer :
  • un champ dans lequel l'utilisateur va saisir son prénom. Ce type de champ est donc un "champ de saisie".
  • un bouton permettant d'afficher le prénom saisi.
  • Pour créer le champ de saisie :
    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
      La liste des champs de saisie proposés par défaut s'affiche.
    2. Cliquez sur "Texte simple" dans la liste des champs. Le champ en création suit alors le mouvement de la souris.
    3. Déplacez la souris dans la fenêtre vers la position où le champ doit être créé (par exemple en haut de la fenêtre). Pour poser le champ dans la fenêtre, il suffit de faire un nouveau clic gauche de souris.
    4. Faites un clic droit de la souris sur le champ que vous venez de créer. Le menu contextuel du champ s'affiche. Dans le menu contextuel affiché, sélectionnez l'option "Description". La fenêtre de description du champ de saisie s'affiche.
    5. 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).
    6. Validez la fenêtre de description du champ (bouton vert). Le champ apparaît sous l'éditeur de fenêtres.
Le libellé du champ apparaît tronqué sous l'éditeur.
  • Pour afficher correctement le champ :
    1. Sélectionnez le champ (il suffit de cliquer dessus avec la souris).
    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.
    Remarque : Il est également possible d'agrandir manuellement la zone de saisie du champ :
    1. Sélectionnez le champ.
    2. Positionnez le curseur de la souris au-dessus d'une des poignées situées à droite du champ (petit carré). Le curseur de la souris se transforme en flèche.
    3. Cliquez avec le bouton gauche de la souris et maintenez le bouton enfoncé pendant le déplacement permettant d'agrandir le champ.
    4. Lorsque le champ a atteint la taille voulue, relâchez le bouton de la souris.
  • Pour créer le bouton "Afficher" :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Bouton.
    2. Positionnez le champ dans la fenêtre. Cliquez à l'emplacement de création du bouton (par exemple à droite du champ de saisie).
    3. Cliquez sur le bouton que vous venez de créer. Le texte affiché dans le bouton passe en édition.

      Astuce

      Pour éditer rapidement le libellé d'un champ, il est également possible de :
      • Sélectionner le champ.
      • Appuyer sur la touche Entrée ou Espace.
    4. Saisissez le libellé "Afficher". Le nom du bouton devient automatiquement "BTN_Afficher­".
    5. Vous pouvez voir le nom du bouton :
      • soit dans la bulle d'aide affichée lors du survol du champ :
        Bulle d'aide
      • soit dans la barre de message de l'éditeur :
        Barre de message

        Note

        Si vous utilisez un écran 4K, les éléments de l'éditeur sont automatiquement zoomés. Le pourcentage de zoom utilisé dépend des paramètres d'affichage de Windows.
  • 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.

Note

Le WLangage est le langage de programmation fourni avec WINDEV. C'est un langage de 5ème génération (L5G), possédant des ordres évolués.
Conventions du WLangage à connaître
  • Le WLangage n'utilise pas de caractère de terminaison de fin de ligne.
  • Les caractères ‘//' permettent de mettre des lignes de code en commentaire. Ces lignes de code ne sont pas interprétées. Elles permettent une meilleure lisibilité du code.
  • Dans les fonctions WLangage, les parenthèses entourent les paramètres passés à la fonction.
  • Le caractère virgule sert de séparateur de paramètres.
  • Le WLangage n'est pas sensible à la casse.
  • Les caractères "espace" ne sont pas interprétés.
  • Le point est le séparateur décimal.
  • Le nom des fonctions WLangage est en français. Il est également disponible en anglais en standard.
  • Le nom des fonctions WLangage utilise un préfixe afin de regrouper les fonctions par famille ("Fen" pour les fonctions manipulant les fenêtres, "email" pour les fonctions manipulant les emails, ...).
  1. Sélectionnez à l'aide de la souris le 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 permet de saisir toutes les instructions WLangage.

    Note

    L'éditeur de code propose différents traitements pour chaque type de champ. Ces traitements correspondent aux événements liés au champ.
    Ainsi, pour le champ "Bouton", deux traitements sont affichés :
    • Initialisation,
    • Clic sur le bouton, exécuté lorsque l'utilisateur clique sur le bouton.
    Remarque : Des traitements supplémentaires peuvent être ajoutés si nécessaire.
  4. Dans le traitement "Clic sur BTN_Afficher", saisissez le code suivant :
    Info("Bonjour", SAI_Prénom) 
Remarque sur l'aide à la saisie : Dès la saisie des deux premiers caractères, WINDEV propose tous les mots du vocabulaire WLangage contenant ces caractères. L'assistance au développement est poussée très loin. Vous ne pouvez plus vous tromper en saisissant le nom d'un élément : les erreurs de syntaxe sont minimisées. Il suffit de sélectionner le mot désiré et de valider par la touche Entrée. Vous pourrez ainsi vous concentrer sur l'algorithme.

Note

C'est pour cela que la charte de programmation est très importante. Tous les éléments manipulés dans le code de l'application utilisent la même norme et peuvent ainsi être facilement retrouvés lors de la saisie du code.

Note

En saisissant ce code sous l'éditeur de code, vous constatez que les différents éléments saisis utilisent des couleurs différentes. C'est la coloration syntaxique. L'éditeur de code permet ainsi d'identifier rapidement les différents éléments manipulés par le code. Ainsi, dans l'éditeur de code utilisant le thème clair :
  • les fonctions du WLangage apparaissent en bleu,
  • les chaînes de caractères (entre guillemets) apparaissent en violet,
  • les noms de champs apparaissent en cyan.
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

Note

Dans cet exemple, le texte saisi est affiché dans une fenêtre système, mais il est également possible de l'afficher dans une fenêtre créée avec WINDEV.
  • Nous allons tester la fenêtre :
    1. Cliquez sur Go de 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.
    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").
Tout développeur sait que tester un programme est souvent long, voire fastidieux. Avec WINDEV, en UN CLIC, vous testez la fenêtre, l'état ou la procédure que vous êtes en train de réaliser. C'est à la fois simple et rapide !
  • 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 le paragraphe suivant.

Note

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".
Ce volet présente différents types d'erreurs :
  • Erreurs de compilation : Les erreurs signalent un problème grave (erreur de programmation, ...). Le test ou l'exécution du projet ne pourra pas fonctionner.
  • Warning de compilation : Les warnings signalent des cas de programmation pouvant entraîner des comportements inattendus.
  • Informations de compilation : Les informations expliquent les choix du compilateur ou présentent d'éventuels conseils pour améliorer le code.
  • Erreurs d'IHM : Les erreurs de compilation d'IHM vous informent des problèmes potentiels détectés sur vos interfaces : images inexistantes, libellés tronqués, ...
  • Erreurs de norme de programmation : Ces erreurs vous informent en cas de non respect des normes de programmation sélectionnées dans la description du projet (onglet “Compilation”).
  • Erreurs des tests automatiques : Ces erreurs signalent un problème lors de l'exécution des tests automatiques.

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'interface de cette fenêtre.
  • Pour réduire la taille de la fenêtre sous l'éditeur :
    1. 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é.
  • Pour que la fenêtre ne soit pas redimensionnable pendant l'exécution :
    1. Double-cliquez sur la fenêtre. La fenêtre de description s'affiche.
    2. Dans l'onglet "IHM", décochez l'option "Redimensionnable" (il suffit de cliquer sur l'option).
    3. Validez.

      Note

      Nous approfondirons les conseils d'interface et d'ergonomie dans un prochain chapitre de ce cours.
  • Pour visualiser le résultat en exécution, relancez le test de cette fenêtre.
  • Revenez sous l'éditeur en fermant la fenêtre de test.
  • Nous allons maintenant forcer l'utilisation d'une majuscule lors de la saisie et de l'affichage du prénom.

    Note

    Par défaut, les caractères seront saisis en majuscules ou en minuscules selon la position de la touche [CAPSLOCK] du clavier. Ce type de saisie peut poser problème lors d'une recherche par exemple.
    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 :
    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.
  • Relancez le test de cette fenêtre pour visualiser le résultat en exécution.
    Test d'une fenêtre
Vous venez de créer rapidement et avec succès votre première fenêtre. Nous allons dans la suite de ce cours découvrir de nouveaux concepts de WINDEV.
  • 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_Bienvenue" affichée sous l'éditeur : sous le volet "Accueil", dans le groupe "Général", cliquez sur "Fermer".

Note

Un exemple pour chaque type de champ
Dans cette leçon, nous avons utilisé deux types de champs : un champ de saisie et un bouton.
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 fenêtre de bienvenue de WINDEV (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") 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 commencent par les mots "Le champ ". Vous pouvez saisir ces mots dans le champ de recherche de la fenêtre de bienvenue.
  • Fermez le projet : sous le volet "Accueil", dans le groupe "Général", déroulez "Fermer" et sélectionnez "Fermer le projet".
WINDEV : Concepts de base et terminologie
Après la pratique, revenons à un peu de théorie pour aborder les concepts de base de WINDEV et la terminologie spécifique à WINDEV.

Concepts de base

WINDEV permet de créer simplement une application. Mais que recouvre exactement ce terme Application ?
Une application est un outil qui permet de réaliser des tâches, des actions automatiquement. Une application est constituée d'un programme exécutable (ou d'un ensemble de programmes exécutables), de librairies, de fichiers de données, ...
Un programme exécutable est un fichier composé d'éléments directement manipulables par l'utilisateur (fenêtres, états imprimés, ...). C'est ce que lance l'utilisateur final d'une application.
Pour créer un exécutable, WINDEV propose de créer un projet. Un projet relie entre eux les différents éléments du programme et les organise. C'est à partir du projet que pourra être créé le programme exécutable.
Si votre application manipule des données, WINDEV permet de définir la structure de la base de données grâce à l'analyse. L'analyse WINDEV contient la description des fichiers (appelés souvent "Tables" dans de nombreuses bases de données). Ces fichiers contiendront les données de l'application.

Note

La description des fichiers de données dans l'analyse n'entraîne pas leur création. Les fichiers de données sont créés physiquement uniquement à l'exécution de l'application.
Un ou plusieurs projets WINDEV peuvent être liés à la même analyse. Dans ce cas, on parle d'analyse partagée. Par exemple, une application de gestion commerciale peut être séparée en plusieurs modules exécutables. Chaque module utilise la même analyse (et en exécution, chaque exécutable peut également utiliser les mêmes fichiers de données).
Projet WINDEV et Analyse

Terminologie

Comme nous venons de le voir, un projet WINDEV (lié si nécessaire à une analyse) permet de créer une application. Avant de commencer réellement à travailler avec WINDEV, revenons sur les termes utilisés dans WINDEV. En effet, si vous avez travaillé avec d'autres outils, de nombreux termes sont spécifiques à WINDEV et ne recouvrent pas toujours la même signification que dans d'autres logiciels.
Dans l'analyse, les termes utilisés sont les suivants :
  • Fichier : L'analyse permet de décrire la structure des fichiers de la base de données. Le terme "Fichier" correspond dans certaines bases de données à "une table".
    Dans WINDEV, le terme "Table" est réservé pour désigner un objet graphique permettant de visualiser le contenu d'un fichier de données sous forme de tableau, et/ou de saisir des lignes. Par exemple, une table peut permettre de saisir le détail d'une commande.
  • Enregistrement : Un enregistrement est quelquefois également appelé ligne. L'enregistrement d'un fichier de données correspond à l'ensemble des rubriques définies pour le fichier.
  • Rubrique : Dans l'analyse, le terme rubrique désigne une zone d'un fichier de données. L'ensemble des rubriques d'un fichier de données permet de définir la structure d'un enregistrement.
  • Clé/Index : Avec WINDEV et sa base de données HFSQL, la notion d'index est liée à la notion de clé. La notion de clé fait partie des caractéristiques d'une rubrique. Les clés permettent d'accélérer les accès aux données ou de faciliter les parcours des fichiers de données. En WINDEV, si un fichier de données HFSQL a plusieurs rubriques clés, en exécution, un seul fichier d'index sera créé.
Dans les fenêtres et les états, les termes utilisés sont les suivants :
  • Fenêtre : Les fenêtres permettent d'afficher ou de saisir à l'écran des informations. Les fenêtres sont également appelées "Écrans" ou "Boites de dialogue". L'utilisateur peut agir directement sur les fenêtres par l'intermédiaire de champs, de boutons, ...
  • Etat : Les états permettent d'obtenir une vue personnalisée d'informations. Ces informations peuvent provenir de la base de données, de fichiers texte, de champs présents dans les fenêtres, ... Les états peuvent être visualisés à l'écran, imprimés sur papier, générés en PDF ou en HTML, ...
  • Champ : Le mot "champ" est le terme utilisé pour désigner les différents objets graphiques affichés dans une fenêtre ou dans un état.
  • Gabarit : Le gabarit permet de définir le "look" de l'application : apparence visuelle des fenêtres, des boutons, des champs, ...
  • Style : Le style regroupe les caractéristiques graphiques d'un élément : image de fond, bordure, police, ... Les styles des différents éléments constituant l'interface d'une application WINDEV sont regroupés dans une feuille de styles.

Important

Dans une application, l'entité "NomClient" peut correspondre par exemple :
  • au nom d'un champ d'une fenêtre,
  • au nom d'un champ d'un état,
  • à la rubrique d'un fichier de données,
  • à une variable définie par le programmeur.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire