|
|
|
|
|
- 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 Durée de la leçon](https://doc.pcsoft.fr/fr-FR/images/image.awp?langid=5&name=dur%E9e.png&0) 30 mn 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" : - Affichez la page d'accueil de WINDEV (Ctrl + <).
- 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".
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) 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 :
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 : - Cliquez sur
parmi les 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. - Cliquez sur "Fenêtre" puis sur "Fenêtre". L'assistant de création d'une fenêtre s'affiche.
- Sélectionnez "Vierge".
- 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 : - 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é.
- Validez (bouton "OK").
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) 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 : - Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie" (cliquez sur la flèche) : Une liste de champs de saisie prédéfinis s'affiche.
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) 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. - 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.
- Cliquez sur le champ "Saisie simple texte". Le champ en création suit alors le mouvement de la souris.
- 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é.
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) 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. - Faites un clic droit de la souris sur le champ que vous venez de créer. Le menu contextuel du champ s'affiche.
- Dans ce menu contextuel (clic droit), sélectionnez l'option "Description". La fenêtre de description du champ de saisie s'affiche.
- Modifiez les caractéristiques du champ en saisissant les informations suivantes :
- Ce champ a pour nom : "SAI_Prénom" (1).
- Ce champ a pour libellé : "Prénom" (2).
- Ce champ est de type texte (3).
- 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é. Pour afficher correctement le champ : - Si nécessaire, sélectionnez le champ.
- Dans le menu contextuel (clic droit), sélectionnez l'option "Adapter la taille".
- Le champ est immédiatement agrandi et le libellé apparaît en entier.
Second champ : un bouton Pour créer le champ Bouton "Afficher" : - Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur
.
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) A savoir : Vous devez créer un champ ? Affichez le volet "Création" de WINDEV : tous les champs disponibles sont accessibles dans ce volet. - Positionnez le champ dans la fenêtre : cliquez à l'emplacement de création du champ Bouton (par exemple à droite du champ de saisie).
- Cliquez sur le champ que vous venez de créer. Le texte affiché dans le champ passe en édition.
- Saisissez le libellé "Afficher". Le nom du champ Bouton devient automatiquement "BTN_AfficherÂ".
- Vous pouvez voir le nom du champ :
- soit dans la bulle d'aide affichée lors du survol du champ :
- soit dans la barre de message de l'éditeur :
Afficher une informationNous 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. - Sélectionnez à l'aide de la souris le champ Bouton "Afficher".
- Affichez le menu contextuel du champ (clic droit de la souris).
- Sélectionnez l'option "Code". Cette option ouvre l'éditeur de code de WINDEV.
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) Cet éditeur de code permet de saisir toutes les instructions WLangage dans des événements associés aux champs. - 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 : - Cliquez sur
parmi les boutons d'accès rapide (ou utilisez la touche F9). - La fenêtre que vous avez créée est automatiquement sauvegardée puis elle se lance en exécution.
- Saisissez votre prénom.
- Cliquez sur le bouton "Afficher".
- Validez la fenêtre système qui s'affiche (cliquez sur le bouton "OK").
- 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. 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 : - Dans l'éditeur de fenêtres, cliquez sur la fenêtre : des poignées apparaissent autour de la fenêtre.
- 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é.
Maintenant, nous devons empêcher le redimensionnement de la fenêtre par l'utilisateur : une option suffit. - Double-cliquez sur la fenêtre. La fenêtre de description s'affiche.
- Dans l'onglet "Général", décochez l'option "Redimensionnable" (il suffit de cliquer sur l'option).
- Validez.
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) 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 ( ![](https://doc.pcsoft.fr/fr-FR/images/image.awp?langid=5&name=ICO_GO_Fenetre_WD_GAF.jpg&-831413793) ). Le résultat est immédiat. 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. ![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) 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 : - Double-cliquez sur le champ "Prénom". La fenêtre de description du champ s'affiche.
- Dans l'onglet "Général", déroulez la liste "Masque de saisie" et choisissez "1ère lettre maj.".
- Validez la fenêtre de description du champ.
- Sous l'éditeur, le nom du masque apparaît automatiquement dans le champ.
Un test rapide ? - Relancez le test de cette fenêtre pour visualiser le résultat en exécution.
- 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". 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.
![](https://doc.pcsoft.fr/ext/images/fr/note_v2.png?478445243) 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é". 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 : - Affichez la page d'accueil de WINDEV (combinaison de touches Ctrl + <).
- Cliquez si nécessaire sur "Ouvrir un exemple".
- La liste des exemples complets, didactiques et unitaires s'affiche.
- 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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|