PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Création d'une fenêtre listant les produits
  • Création de la fenêtre
  • Création des champs
  • Test de la fenêtre
  • Création d'une fenêtre "Fiche produit"
  • Création de la fenêtre
  • Création des champs de saisie
  • Création des boutons
  • Améliorations de l'interface de la fenêtre
  • Affichage de la fiche depuis la liste des produits
  • Gestion de la modification d'un produit
  • Modification de l'image du produit
  • Validation des modifications du produit
  • Test de la modification d'un produit
  • Création d'un nouveau produit
  • Ajout d'un bouton
  • Ajout dans le fichier de données
  • Test de l'ajout d'un produit
  • Visualiser les enregistrements saisis
Leçon 4.2. Fenêtres d'ajout et de modification
Ce que vous allez apprendre dans cette leçon
  • Création d'une fenêtre de menu listant les produits.
  • Création d'une fiche produit.
  • Gestion de l'ajout et de la modification d'un produit.

Durée estimée : 50 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Nous allons créer les différentes fenêtres permettant de lister, ajouter, modifier des produits. Ces manipulations vous feront découvrir plusieurs aspects de la gestion des fichiers de données et vous feront également utiliser certaines fonctionnalités bien utiles de WINDEV­.
  • Si vous n'avez pas ouvert le projet "WD Application Complète" dans la leçon précédente :
    1. Si nécessaire, fermez le projet en cours pour faire apparaître la fenêtre de bienvenue.
    2. Dans la fenêtre de bienvenue, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "Application complète (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 "Application complète (Exercice)".

Corrigé

Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez "Application complète (Avec fenêtres)".
Création d'une fenêtre listant les produits
Pour créer la fenêtre listant les produits, nous allons tout d'abord créer une fenêtre vierge, puis ajouter tous les champs : nous verrons ainsi toutes les étapes nécessaires à la création d'une telle fenêtre.

Création de la fenêtre

  • Pour créer une fenêtre listant les produits :
    1. Créez une nouvelle fenêtre vierge.
      • Cliquez sur Création parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + N).
      • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Fenêtre" puis sur "Fenêtre".
      • Dans l'assistant, cliquez sur l'onglet "Basée sur un modèle" et choisissez "Utiliser : FENMOD_Modèle". Validez.

        Note

        Les modèles de fenêtres
        Un modèle de fenêtres permet de donner un look homogène aux différentes fenêtres d'une application.
        Un modèle de fenêtres contient tous les éléments graphiques communs à l'ensemble des fenêtres de l'application. Un modèle de fenêtres peut également contenir du code. Dans ce cas, ce code sera également commun à toutes les fenêtres de l'application.
        Pour cet exemple nous avons créé le modèle de fenêtres FENMOD_Modèle. Ce modèle contient un logo qui apparaîtra sur toutes les fenêtres :
        Modèle de fenêtres
    2. La nouvelle fenêtre apparaît sous l'éditeur. La fenêtre de sauvegarde de l'élément créé apparaît.
    3. Dans cette fenêtre, indiquez le titre de la fenêtre : "Menu".
      Sauvegarde d'un élément
    4. Le nom de la fenêtre (qui sera utilisé par exemple en programmation) est automatiquement déduit du titre de la fenêtre. Si ce nom ne vous convient pas, il est possible de le modifier et de spécifier un titre différent du nom de la fenêtre.
    5. Validez.

Note

Nous avons appelé cette fenêtre "Menu" car cette fenêtre est la fenêtre principale de notre application. Elle va servir de menu mais également afficher des informations.

Création des champs

Pour créer la liste des produits, nous allons utiliser un champ Table. Ce champ va être lié au fichier de données "Produit".

Note

Qu'est-ce qu'un champ Table ?
Il ne faut pas confondre "Table" et "champ Table".
  • On parle de Table pour une base de données de type SQL.
  • On parle de champ Table pour visualiser en tableau des données (ou "browse" ou encore "feuille de données"). Dans ce cas, ces données peuvent être saisies ou provenir d'un fichier de données (ou d'une table).
Le champ Table de WINDEV permet de visualiser ou de modifier des données :
  • en mémoire : on parle alors de champ Table mémoire ou champ Table remplie par programmation.
  • provenant de fichiers de données ou de requêtes : on parle alors de champ Table fichier.
  • provenant de variables WLangage : on parle alors de champ Table sur source.
  • Pour créer le champ Table :
    1. Sous le volet "Création", dans le groupe "Données", déroulez "Table et liste" et sélectionnez "Table (Verticale)". Le champ en création suit alors le mouvement de la souris.
    2. Cliquez dans la fenêtre : l'assistant de création du champ Table se lance.
    3. Le champ Table que nous sommes en train de créer doit afficher les enregistrements du fichier de données "Produit". Dans l'assistant, sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante". Passez à l'étape suivante en cliquant sur la flèche en bas de l'assistant.
      Assistant de création d'un champ Table
    4. L'étape suivante de l'assistant propose les différents fichiers de données et les requêtes présents dans le projet en cours. Dépliez "Analyse" si nécessaire et sélectionnez le fichier "Produit". Passez à l'étape suivante.
    5. L'assistant propose la liste des rubriques présentes dans le fichier "Produit". Par défaut, toutes les rubriques sont cochées pour être affichées dans le champ Table. Dans notre cas, nous allons afficher toutes les rubriques SAUF l'identifiant "IDProduit" qui correspond à l'identifiant automatique du fichier de données.
      Assistant de création d'un champ Table
      Décochez "IDProduit" et passez à l'étape suivante.
    6. L'assistant propose ensuite de sélectionner la rubrique de tri. Cette rubrique va être utilisée pour trier les données affichées dans le champ Table. Les rubriques proposées dans l'assistant correspondent à des rubriques définies comme clés dans l'analyse. Nous allons trier les produits selon leur libellé.
      Assistant de création d'un champ Table
      Cliquez sur la ligne "Libellé" et passez à l'étape suivante.
    7. Les étapes suivantes correspondent à des paramètres supplémentaires. Conservez les options par défaut jusqu'à la fin de l'assistant puis validez l'assistant.
    8. Le champ Table est automatiquement créé dans la fenêtre. Le champ est automatiquement positionné et agrandi afin d'occuper tout l'espace disponible dans la fenêtre.
      Fenêtre sous l'éditeur
Arrêtons-nous un instant sur le champ que nous venons de créer : les données sont déjà affichées dans le champ, même sous l'éditeur. C'est le concept du "Live data" : le contenu des fichiers de données présents sur le poste de développement est utilisé dans les fenêtres ou les états manipulés sous l'éditeur. Cette fonctionnalité est très intéressante par exemple pour définir la taille des champs présents dans une fenêtre.

Test de la fenêtre

  • Nous allons tout de suite tester la fenêtre que nous venons de créer.
    1. Cliquez sur Go de fenêtre parmi les boutons d'accès rapide.
    2. La fenêtre apparaît automatiquement avec ses données en exécution.
    3. Vous pouvez faire défiler les produits grâce à l'ascenseur (ou à l'aide des flèches du clavier).
  • Mettons-nous quelques instants à la place de l'utilisateur final pour voir les possibilités du champ Table en exécution.
    Test de la fenêtre
Quelques remarques :
  • Tout d'abord, en exécution le champ Table a le même aspect que sous l'éditeur : c'est la notion de WYSIWYG ("What You See Is What You Get") : ce que vous voyez correspond à ce que vous obtenez.
  • Des petits pictogrammes apparaissent en haut des colonnes :
    • la double flèche indique que la colonne peut être triée (colonne "Référence" ou "Libellé" par exemple).
      Double flèche
      Par exemple, cliquez deux fois successivement sur la colonne "Libellé" : les données affichées sont triées différemment. Une flèche à gauche de la colonne indique que la colonne est triée ainsi que le sens de tri.
    • la loupe indique qu'une recherche peut être réalisée directement dans la colonne.
      Loupe
      Par exemple, cliquez sur la loupe de la colonne "Référence". Une zone de saisie apparaît et vous permet de saisir la référence recherchée. Saisissez "REF-010". Automatiquement, le produit correspondant à cette référence est affiché.
      Recherche dans une colonne
  • Un menu contextuel est disponible sur le champ Table et sur chacune de ses colonnes. Ce menu contextuel peut être affiché :
    • par un clic droit sur la colonne du champ Table.
    • par clic sur la flèche située à l'extrémité des entêtes de colonnes.
  • Ce menu contextuel permet notamment d'exporter le contenu du champ Table au format Excel, de l'imprimer, ...
    Menu contextuel du champ
En quelques minutes, nous venons de voir et de tester quelques fonctionnalités qui sont automatiquement incluses avec le champ Table. Vous n'avez rien à programmer pour proposer ces fonctionnalités à vos utilisateurs. Ces fonctionnalités sont appelées "FAA" (Fonctionnalités Automatiques de votre Application).

Note

De nombreux champs proposent des FAA par défaut. Si ces fonctionnalités ne doivent pas être proposées (pour des raisons de sécurité ou de confidentialité), il est possible de les désactiver sous l'éditeur ou par programmation.
Avoir la liste des produits, c'est bien, mais pouvoir modifier un produit, c'est mieux. Maintenant, nous allons créer une fenêtre affichant le détail du produit afin de pouvoir le modifier.
  • Fermez la fenêtre en cours de test grâce à la croix située en haut de l'écran. L'éditeur de WINDEV réapparaît.
Création d'une fenêtre "Fiche produit"

Création de la fenêtre

  • Pour créer une fenêtre affichant le détail d'un produit :
    1. Ouvrez si nécessaire le projet "WD Application Complète".
    2. Créez une nouvelle fenêtre vierge.
      • Cliquez sur Création parmi les boutons d'accès rapide.
      • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Fenêtre" puis sur "Fenêtre".
      • L'assistant de création de fenêtres se lance.
      • Dans l'onglet "Basée sur un modèle", choisissez "Utiliser : FENMOD_Modèle" et validez l'assistant.
    3. La fenêtre de sauvegarde apparaît. Saisissez le titre de la fenêtre : "Fiche du produit". Le nom "FEN_Fiche_du_produit" est automatiquement proposé.
    4. Validez la fenêtre de sauvegarde.

Création des champs de saisie

La fenêtre que nous allons créer est destinée à afficher les caractéristiques du produit sélectionné dans le champ Table. Ce type de fenêtre est appelé une "Fiche" simplement car elle correspond à une fiche descriptive de l'élément voulu.
Dans notre cas, cette fenêtre va afficher le contenu des différentes rubriques présentes dans le fichier de données "Produit".
  • Pour créer les champs dans la fenêtre :
    1. Affichez si nécessaire le volet "Analyse" : sous le volet "Accueil", dans le groupe "Environnement", déroulez "Volets" et sélectionnez "Analyse". Les différents fichiers de données décrits dans l'analyse "WD Application Complète" apparaissent dans le volet.
    2. Cliquez sur l'icône Flèche à gauche du fichier "Produit" : les rubriques du fichier de données sont listées.
      Volet Analyse
    3. Sélectionnez à l'aide de la souris l'ensemble des rubriques affichées dans le volet (sauf la rubrique "IDProduit"). Vous pouvez par exemple utiliser la multisélection en maintenant la touche Ctrl enfoncée.
    4. Effectuez un "Drag and Drop" (glisser/déplacer) de ces rubriques vers la fenêtre que vous venez de créer.
      Drag and Drop des rubriques
    5. Différents champs sont automatiquement créés dans la fenêtre. Ces champs sont automatiquement liés à la rubrique correspondante dans le fichier de données. Pour le vérifier :
      • Sélectionnez par exemple le champ "Référence".
      • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Description".
      • Affichez l'onglet "Liaison" de la fenêtre de description :
        Description du champ
        Cet onglet permet de voir que le champ de saisie en cours est lié à la rubrique "Référence" du fichier de données "Produit".
    6. Fermez la fenêtre de description.
    7. Enregistrez la fenêtre.
  • Repositionnez les champs dans la fenêtre et redimensionnez la fenêtre afin d'obtenir l'interface suivante :
    Interface sous l'éditeur

Création des boutons

La fenêtre "FEN_Fiche_du_produit" va permettre d'ajouter un nouveau produit ou encore de modifier un produit présent dans la liste.
Nous allons tout de suite ajouter un bouton de validation et un bouton d'annulation.
  • Pour créer le bouton "Valider" :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" (cliquez sur la flèche située sous Champ Bouton).
    2. La liste des boutons prédéfinis s'affiche.
    3. Cliquez sur "Valider" : la forme du bouton apparaît sous la souris.
    4. Cliquez ensuite à droite des champs de saisie pour créer le bouton.
  • Ajoutez le bouton "Annuler" en utilisant le même principe.
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" (cliquez sur la flèche située sous Champ Bouton).
    2. Dans la liste des boutons prédéfinis, cliquez sur "Annuler" : la forme du bouton apparaît sous la souris.
    3. Cliquez ensuite en dessous du bouton "Valider" pour créer le bouton.
      Interface sous l'éditeur

Améliorations de l'interface de la fenêtre

Cette fenêtre étant une fenêtre relativement simple, essayons d'améliorer son interface. De nombreux petits détails peuvent vite devenir gênants pour l'utilisateur, alors autant les traiter dès le début.
Alignement des champs
  • Une des premières optimisations à faire consiste à aligner les champs et à leur donner la même taille :
    1. Sélectionnez le champ "Libellé" puis tous les autres champs de saisie de la fenêtre (par exemple en maintenant la touche Ctrl appuyée et en cliquant sur les différents champs). Le premier champ sélectionné va servir de référence pour la taille des autres champs.
    2. Dans le ruban, affichez le volet "Alignement" de WINDEV. Ce volet contient toutes les options d'alignement disponibles pour les champs.
      Volet Alignement
    3. Nous voulons que les bords externes et internes des champs soient alignés. Cliquez sur l'option "Justifier (Int. et Ext.)".

      Note

      Si vous ne savez pas quel alignement choisir, survolez les différentes options proposées par le volet "Alignement" de WINDEV. Lors du survol avec la souris d'une option, les champs sélectionnés dans la fenêtre sont automatiquement positionnés et/ou redimensionnés en fonction de l'option survolée.
      Si le positionnement vous convient, il suffit de cliquer sur l'option.
      Si le positionnement ne vous convient pas, il suffit de ne plus survoler les options d'alignement : les champs sont replacés à leur position d'origine.
      Interface sous l'éditeur
Gestion des ancrages
  • Voyons maintenant le rendu visuel de notre fenêtre :
    1. Sous le volet "Modification", dans le groupe "Aperçu", cliquez sur "Aperçu". Ce mode d'exécution permet d'afficher uniquement l'interface de la fenêtre. Les différents codes ne sont pas exécutés.
    2. Agrandissez la fenêtre à l'aide de la poignée d'agrandissement au bas de la fenêtre. La position des champs n'est pas modifiée et la fenêtre affiche une grande zone vide. Pour remédier à ce problème, deux possibilités :
      • Interdire le redimensionnement de la fenêtre
      • Gérer les ancrages, c'est-à-dire gérer le comportement des champs lors d'un redimensionnement de la fenêtre. C'est ce que nous allons faire.
        Aperçu de la fenêtre
    3. Fermez l'aperçu : cliquez soit sur le bouton "Fermer" de la télécommande, soit sur la croix en haut à droite de la fenêtre.

      Note

      Comment gérer les ancrages dans une fenêtre ?
      Pour gérer les ancrages :
      1. Sous l'éditeur, réduisez la fenêtre à sa taille minimale. Tous les bords extérieurs de la fenêtre doivent être "collés" à un champ.
      2. Passez les champs en revue un à un et posez-vous la question suivante : "Comment doit réagir le champ lors de l'agrandissement de la fenêtre ?". Appliquez alors l'ancrage correspondant.
  • Pour cette fenêtre, nous allons définir les ancrages ensemble :
    1. Les boutons "Valider" et "Annuler" doivent toujours être collés à droite.
      • Sélectionnez ces deux champs.
      • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage".
      • Dans la fenêtre de définition des ancrages, sélectionnez l'option "Droite" et validez.
        Fenêtre des ancrages
      • Des petites flèches rouges apparaissent sous l'éditeur indiquant que les champs sont ancrés à droite.
    2. Les champs de saisie doivent s'agrandir en largeur :
      • Sélectionnez les 4 champs de saisie.
      • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage".
      • Dans la fenêtre de définition des ancrages, sélectionnez l'option "Largeur" (Ancrage en largeur).
      • Validez.
    3. Nous allons tester à nouveau le fonctionnement de cette fenêtre en aperçu :
      • Sous le volet "Modification", dans le groupe "Aperçu", cliquez sur "Aperçu".
      • Agrandissez la fenêtre : les champs suivent bien l'agrandissement en largeur.
      • Maintenant, il reste à définir le fonctionnement lors de l'agrandissement en hauteur.
    4. Le champ "Description" peut contenir une description du produit plus ou moins importante. C'est le champ le plus important de la fenêtre : il est nécessaire qu'il occupe le maximum de place disponible. Appliquez-lui un ancrage en largeur et hauteur (Ancrage en largeur et hauteur).
    5. Le champ "Prix HT" est automatiquement encadré en rouge : l'éditeur de fenêtres indique un problème d'ancrage. En effet, si le champ "Description" s'étire vers le bas, le champ "Prix HT" doit lui aussi se déplacer de la même manière vers le bas.
    6. Ouvrez la fenêtre des ancrages du champ "Prix HT". L'ancrage idéal est automatiquement proposé : "Largeur et bas" (une coche verte est présente). Sélectionnez l'ancrage proposé et validez.
    7. Nous allons tester à nouveau le fonctionnement de cette fenêtre en aperçu :
      • Sous le volet "Modification", dans le groupe "Aperçu", cliquez sur "Aperçu".
      • Agrandissez la fenêtre : les champs suivent bien l'agrandissement en largeur et en hauteur.
        Aperçu de la fenêtre
    8. Fermez l'aperçu de la fenêtre pour revenir sous l'éditeur.

Affichage de la fiche depuis la liste des produits

Nous allons maintenant voir comment afficher la fiche du produit sélectionné dans la liste des produits. Le principe est simple : l'utilisateur sélectionnera le produit dans le champ Table et affichera le détail grâce à un bouton.
  • Nous allons tout d'abord modifier la fenêtre "FEN_Menu" afin de créer un bouton de modification :
    1. Placez-vous sur la fenêtre "Menu" : cliquez sur le bouton "FEN_Menu" dans la barre des boutons :
      Barre de boutons
    2. Actuellement, le champ Table occupe la totalité de la fenêtre. Agrandissez la taille de la fenêtre vers la droite à l'aide des poignées de redimensionnement.
    3. Diminuez la taille du champ Table :
      • Maintenez la touche Maj enfoncée.
      • Réduisez le champ Table à l'aide de ses poignées de redimensionnement.

        Note

        L'utilisation de la touche Maj permet de ne pas prendre en compte les options d'ancrage des champs lors du redimensionnement.
    4. Nous avons maintenant de la place à droite du champ Table pour créer le bouton de visualisation du produit.
  • Pour créer le bouton de visualisation du produit :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" (cliquez sur la flèche située sous Champ Bouton).
    2. Dans la liste des boutons prédéfinis, cliquez sur "Modifier". La forme du bouton apparaît sous la souris. Cliquez ensuite à droite du champ Table pour créer le bouton.
      Fenêtre sous l'éditeur
    3. Faites un clic droit sur le bouton et dans le menu qui s'affiche, sélectionnez l'option "Code".
    4. Dans la fenêtre de code qui apparaît, saisissez le code suivant dans le traitement "Clic sur" :
      Ouvre(FEN_Fiche_du_produit)

      Note

      Laissez-vous guider par l'assistance à la saisie de code (également appelée "complétion") : dès que vous allez taper la parenthèse ouvrante "(", une liste déroulante va s'ouvrir proposant le nom de toutes les fenêtres existantes dans le projet. Il suffit de sélectionner la fenêtre au clavier ou à la souris.
      Si vous ne trouvez pas le nom de la fenêtre que vous cherchez dans la liste, c'est que celle-ci n'a pas été sauvegardée précédemment.
    5. Examinons ce code : la fonction Ouvre permet d'ouvrir la fenêtre "FEN_Fiche_du_produit". Nous avons déjà vu cette fonction dans la première partie de ce cours.
    6. Enregistrez les modifications en cliquant sur Sauver parmi les boutons d'accès rapide.
    7. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
Nous allons maintenant modifier la fenêtre "FEN_Fiche_du_produit" pour afficher le produit sélectionné dans le champ Table.
  • Affichez la fenêtre "FEN_Fiche_du_produit" sous l'éditeur : cliquez sur le bouton correspondant dans la barre de boutons.
  • Pour afficher les données du produit :
    1. Affichez les traitements associés à la fenêtre :
      • Dans la zone à côté de la fenêtre (appelée "Zone d'accueil"), faites un clic droit de souris.
      • Dans le menu contextuel qui s'affiche, sélectionnez "Code".
      • L'éditeur de code apparaît.
    2. Dans le traitement "Fin d'initialisation de FEN_Fiche_du_produit", saisissez le code suivant :
      // Affecte le contenu des rubriques aux champs
      FichierVersEcran()
      La fonction FichierVersEcran permet d'afficher dans les champs les données présentes dans le fichier de données, pour l'enregistrement en cours. Dans notre cas, l'enregistrement en cours sera l'enregistrement sélectionné dans le champ Table de la fenêtre "FEN_Menu".
    3. Fermez la fenêtre de code.
    4. Enregistrez la fenêtre.
  • Affichez la fenêtre "FEN_Menu" sous l'éditeur : cliquez sur le bouton correspondant dans la barre de boutons.
  • Testez la fenêtre (GO de fenêtre parmi les boutons d'accès rapide).
    • Dans la liste des produits, cliquez sur un des produits avec la souris.
    • Cliquez sur le bouton "Modifier".
    • La fenêtre de détail du produit s'affiche.
  • Fermez les fenêtres en utilisant la croix (x) en haut à droite des fenêtres.
Gestion de la modification d'un produit
Nous allons maintenant modifier la fenêtre "FEN_Fiche_du_produit" afin de gérer la modification d'un produit.
Nous allons :
  • permettre à l'utilisateur de modifier l'image du produit.
  • ajouter des boutons pour enregistrer ou annuler les modifications effectuées dans la fiche.

Modification de l'image du produit

L'utilisateur va pouvoir modifier l'image du produit dans la fiche Produit. Pour cela, nous allons lui proposer un bouton "Modifier" situé en dessous de l'image du produit. Ce bouton ouvrira un sélecteur de fichiers permettant de sélectionner l'image à utiliser.
  • Tout d'abord, affichez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur : cliquez sur le bouton correspondant dans la barre de boutons.
  • Pour créer le bouton de modification :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" : la liste des boutons prédéfinis s'affiche. Cliquez sur "Modifier".
    2. La forme du bouton apparaît sous la souris. Cliquez ensuite dans la fenêtre, sous l'image du produit.
    3. Redimensionnez si nécessaire le bouton (à l'aide des poignées) pour que le bouton ait la même largeur que le champ Image.

      Note

      Lors du redimensionnement du champ, un effet de magnétisme automatique simplifie l'alignement du bouton avec le champ Image.
      Interface sous l'éditeur
    4. Faites un clic droit sur le bouton. Dans le menu qui s'affiche, sélectionnez l'option "Code".
    5. Dans la fenêtre de code qui apparaît, saisissez le code suivant dans le traitement "Clic sur" :
      fSélecteurImage(
      Editeur de code
    6. L'éditeur de code propose un assistant de code.
      • Cliquez sur "Assistant de la fonction fSélecteurImage".
      • L'assistant de code se lance.

        Note

        WINDEV propose de nombreux assistants de code qui à l'aide de questions simples vont écrire la ou les ligne(s) de code correspondant. N'hésitez pas à les utiliser, vous éviterez ainsi des erreurs de syntaxe.
    7. Conservez toutes les options par défaut de l'assistant et validez. Le code correspondant est automatiquement inséré.
      sFichier est une chaîne

      // Ouvre le sélecteur d'images
      sFichier = fSélecteurImage("", "", "Sélectionnez une image...")
    8. Ajoutez le code suivant à la suite :
      // Si un fichier a été sélectionné
      SI sFichier <> "" ALORS
      // Affecte l'image au champ Image
      IMG_Visuel = sFichier
      FIN
      Ce code permet d'affecter le fichier sélectionné au champ Image présent dans la fenêtre.
    9. Fermez l'éditeur de code (cliquez sur la croix en haut à droite de l'éditeur de code).
Nous testerons cette fonctionnalité lorsque la gestion des modifications effectuées dans la fiche sera finie.

Validation des modifications du produit

Nous avons déjà créé 2 boutons dans la fenêtre "FEN_Fiche_du_produit" :
  • un bouton "Valider" pour gérer la validation des modifications
  • un bouton "Annuler" pour gérer le retour à la liste des produits.
Nous allons maintenant saisir le code WLangage nécessaire à leur fonctionnement.
  • Tout d'abord, affichez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur : cliquez sur le bouton correspondant dans la barre de boutons.
  • Nous allons maintenant saisir le code du bouton "Valider".
    1. Faites un clic droit sur le bouton puis sélectionnez l'option "Code" dans le menu contextuel.
    2. Dans le traitement "Clic sur", saisissez le code suivant :
      EcranVersFichier()
      HModifie(Produit)
      Ferme()
      Examinons ce code :
      • La fonction EcranVersFichier permet d'initialiser les rubriques avec les valeurs des champs liés, pour l'enregistrement courant. Cette fonction est donc équivalente aux lignes suivantes :
        Produit.Référence = SAI_Référence
        Produit.Libellé = SAI_Libellé
        Produit.Description = SAI_Description
        ...
        Notre fenêtre utilise moins de 10 champs et déjà l'avantage se fait sentir ; pensez simplement aux fenêtres qui contiennent plusieurs dizaines de champs : 1 seule ligne de code effectue toutes les affectations !
      • La fonction HModifie permet de mettre à jour les données du fichier de données pour l'enregistrement courant.
    3. Enregistrez les modifications en cliquant sur Sauver parmi les boutons d'accès rapide.
    4. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
  • Les modifications réalisées dans la fenêtre "FEN_Fiche_du_produit" doivent être prises en compte dans le champ Table listant les produits. Pour cela, nous allons simplement modifier le code du bouton "Modifier" dans la fenêtre "FEN_Menu".
    1. Affichez la fenêtre "FEN_Menu" sous l'éditeur : cliquez sur le bouton correspondant dans la barre de boutons.
    2. Sélectionnez le bouton "Modifier" et affichez l'éditeur de code (option "Code" du menu contextuel du bouton).
    3. Modifiez le traitement "Clic sur" de la manière suivante :
      Ouvre(FEN_Fiche_du_produit)
      TableAffiche(TABLE_Produit, taCourantBandeau)
      Examinons ce code :
      • La fonction TableAffiche permet de mettre à jour le champ Table.
      • La constante taCourantBandeau permet de spécifier que le champ Table doit être mis à jour à partir de la position du bandeau de sélection.
    4. Enregistrez les modifications en cliquant sur Sauver parmi les boutons d'accès rapide.
    5. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Test de la modification d'un produit

  • Pour tester la modification d'un produit :
    1. Lancez le test du projet (Go de projet parmi les boutons d'accès rapide).
      Boutons d'accès rapide
    2. WINDEV demande de sélectionner la première fenêtre du projet. Dans notre cas, cette fenêtre correspond à "FEN_Menu". Sélectionnez cette fenêtre et validez.

      Note

      La première fenêtre du projet correspond à la première fenêtre ouverte au lancement de l'application. La première fenêtre du projet peut être définie :
      • lors d'un test du projet.
      • lors de la création de l'exécutable.
      • sous l'explorateur de projet : il suffit de sélectionner la fenêtre voulue, d'afficher le menu contextuel et de sélectionner l'option "Première fenêtre du projet".
      Lorsqu'une première fenêtre du projet est définie, un petit 1 rouge apparaît devant le nom de la fenêtre sous l'explorateur de projet.
    3. Dans la liste des produits, sélectionnez un produit dans le champ Table (par exemple le premier) et cliquez sur le bouton "Modifier".
    4. Le détail du produit sélectionné apparaît dans la fenêtre fiche.
    5. Modifiez le prix de 100,23 euros et saisissez 200,00 euros puis ensuite cliquez sur le bouton "Valider".
    6. De retour sur la liste des produits, vous pouvez constater que le prix de cet article a été mis à jour.
    7. Affichez à nouveau le détail du produit.
    8. Cliquez sur le bouton "Modifier" sous l'image. Le sélecteur d'images s'affiche. Sélectionnez une image et validez. L'image apparaît dans la fiche.
    9. Cliquez sur le bouton "Annuler". La modification de l'image n'a pas été prise en compte dans le fichier de données.
    10. Fermez l'application en cliquant sur la croix.
Création d'un nouveau produit
Le principe de la création d'un produit va être le suivant :
  • Dans la fenêtre de la liste des produits, nous allons ajouter un bouton "Nouveau" qui va permettre d'ouvrir la fenêtre "Fiche du produit".
  • Nous modifierons ensuite le code de la fenêtre "Fiche du produit" pour gérer l'ajout dans le fichier de données Produit.

Ajout d'un bouton

  • Pour ajouter un bouton "Nouveau" dans la fenêtre "FEN_Menu" :
    1. Affichez la fenêtre "FEN_Menu" sous l'éditeur : cliquez sur le bouton correspondant dans la barre de boutons.
    2. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" et sélectionnez "Nouveau".
    3. La forme du bouton apparaît sous la souris. Cliquez ensuite dans la fenêtre : le bouton est créé.
    4. Positionnez le bouton au-dessus du bouton "Modifier" (si nécessaire modifiez la position du bouton "Modifier").
      Interface sous l'éditeur
    5. Modifiez le code de ce bouton :
      • Faites un clic droit sur le bouton puis sélectionnez l'option "Code" dans le menu contextuel.
      • Dans le traitement "Clic sur", saisissez le code suivant :
        HRAZ(Produit)
        Ouvre(FEN_Fiche_du_produit)
        TableAffiche(TABLE_Produit, taCourantEnreg)
        Examinons ce code :
        • La fonction HRAZ initialise les variables des rubriques du fichier "Produit" avec les valeurs par défaut pour gérer un nouvel enregistrement.
        • La fonction Ouvre permet d'ouvrir la fiche du produit pour saisir le nouvel enregistrement.
        • La fonction TableAffiche permet de réafficher le champ Table. Dans ce code, la constante taCourantEnreg est utilisée : le champ Table est réaffiché à partir de l'enregistrement courant.
    6. Enregistrez les modifications en cliquant sur Sauver parmi les boutons d'accès rapide.
    7. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Ajout dans le fichier de données

  • Maintenant, nous allons modifier la fenêtre de la fiche du produit pour gérer l'ajout d'un nouvel enregistrement.
    1. Affichez la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
    2. Nous allons modifier le code du bouton de validation :
      • Faites un clic droit sur le bouton "Valider" puis sélectionnez l'option "Code" dans le menu contextuel.
      • Dans le traitement "Clic sur", remplacez le code par le code suivant :
        EcranVersFichier()
        SI Produit..NouvelEnregistrement ALORS
        HAjoute(Produit)
        SINON
        HModifie(Produit)
        FIN
        Ferme()
        Examinons ce code :
        • La propriété ..NouvelEnregistrement permet de savoir si l'enregistrement en cours doit être créé.
        • Si la fonction HRAZ a été appelée précédemment, la propriété renvoie Vrai (cas du clic sur "Nouveau produit") et l'enregistrement doit être créé par la fonction HAjoute.
        • Dans le cas contraire, l'enregistrement en cours existe déjà et doit être modifié par la fonction HModifie.
        • La fonction HAjoute ajoute l'enregistrement dans le fichier de données. Cette fonction prend les valeurs en mémoire et écrit le contenu des rubriques du fichier dans le fichier de données lui-même. Les index sont immédiatement et automatiquement mis à jour. Ici, le fichier de données mis à jour est bien entendu le fichier "Produit".

          Note

          Le code de test du nouvel enregistrement peut être remplacé par la fonction HEnregistre. Cette fonction permet de tester si l'enregistrement est déjà présent dans le fichier de données, et selon le cas elle permet soit de l'ajouter, soit de le modifier. Le code devient alors :
          EcranVersFichier()
          HEnregistre(Produit)
          Ferme()
    3. Enregistrez les modifications en cliquant sur Sauver parmi les boutons d'accès rapide.
    4. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Test de l'ajout d'un produit

  • Pour tester l'ajout d'un produit :
    1. Lancez le test du projet (GO de projet parmi les boutons d'accès rapide).
    2. Dans la liste des produits, cliquez sur le bouton "Nouveau".
    3. Saisissez un nouveau produit avec les caractéristiques suivantes :
      • Référence : REF-337
      • Libellé : Surf WD
      • Description : Surf aux couleurs de WINDEV
      • Prix : 150
        Test de la fenêtre
    4. Validez. Le nouveau produit apparaît dans la liste des produits.
    5. Cliquez à nouveau sur le bouton "Nouveau".
    6. Saisissez un nouveau produit avec les caractéristiques suivantes :
      • Référence : REF-337
      • Libellé : Surf WB
      • Description : Surf aux couleurs de WEBDEV
      • Prix : 150
    7. Validez. Une fenêtre spécifique apparaît :
      Gestion des doublons
      Cette fenêtre signale à l'utilisateur qu'il existe un doublon : en effet, la référence (qui est une clé unique) est identique pour deux produits. Cette fenêtre permet de modifier la valeur de la référence : saisissez par exemple "REF-338".
      Cette fenêtre est une des fenêtres de gestion automatique des erreurs HFSQL, disponible en standard.

Note

Lors de l'ajout ou de la modification d'un enregistrement, plusieurs types d'erreurs peuvent survenir : erreur de doublons, erreur d'intégrité, erreur de mot de passe, ...
WINDEV propose plusieurs modes de gestion de ces erreurs :
  • le mode automatique : pour chaque erreur rencontrée lors de la gestion des enregistrements de la base de données, une fenêtre spécifique est affichée à l'utilisateur. Cette fenêtre permet à l'utilisateur de modifier directement ses données.
  • le mode programmé avancé : pour chaque erreur rencontrée lors de la gestion des enregistrements de la base de données, une procédure ou une fenêtre personnalisée de gestion des erreurs est appelée.
L'exemple didactique "Detection Erreurs" livré avec WINDEV permet de tester ces différents modes de gestion des erreurs. Cet exemple peut être ouvert par la fenêtre de bienvenue de WINDEV (Ctrl + <), via l'option "Ouvrir un exemple".

Visualiser les enregistrements saisis

Les nouveaux enregistrements que nous avons saisis peuvent être visualisés immédiatement dans le champ Table de la fenêtre "FEN_Menu".
Mais dans certains cas, lors de tests par exemple, il peut être nécessaire de voir directement le contenu du fichier de données.
WINDEV propose un outil simple permettant de voir le contenu des fichiers de données pendant le développement de l'application (lorsque par exemple, les fenêtres de visualisation n'ont pas encore été créées).
Cet outil s'appelle WDMAP. Nous allons l'utiliser pour voir le contenu du fichier Produit.
  • Pour lancer WDMAP :
    1. Sous le volet "Outils", dans le groupe "Base de données", cliquez sur "WDMap".
    2. Sélectionnez le fichier "Produit". Le contenu du fichier de données s'affiche.
      WDMap
    3. En triant les éléments par référence (cliquez sur l'entête de la colonne "Référence"), les deux enregistrements que nous avons ajoutés apparaissent.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire