Tuto - A la découverte de WINDEV

Comment créer la fenêtre ?

1. 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.
2. Cliquez sur "Fenêtre" puis sur "Fenêtre". L'assistant de création d'une fenêtre s'affiche.
3. Sélectionnez "Vierge".
   
4. Validez (bouton "OK").

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

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

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

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

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

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

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

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.
   

1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
   
   

   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 :
     
   • soit dans la barre de message de l'éditeur :
     

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)

1. Cliquez sur 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").
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).

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

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

Modifications à effectuer sur la fenêtre

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

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.

Modifications sur les champs

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.

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.".
   
3. Validez la fenêtre de description du champ.
4. Sous l'éditeur, le nom du masque apparaît automatiquement dans le champ.

1. Relancez le test de cette fenêtre pour visualiser le résultat en exécution.
   
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.

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

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.