PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 25 !
  • 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 champ Bouton
  • Ajout d'un nouvel enregistrement 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 de la leçon

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. Affichez la page d'accueil de WINDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Cours d'auto-formation" puis cliquez sur "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é, dans la page d'accueil, cliquez sur "Cours d'auto-formation" puis cliquez sur "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éer un élément 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".
      Enregistrement 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".
      Assistant de création d'un champ Table
      Passez à l'étape suivante de l'assistant (bouton "Suivant").
    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 de données "Produit".
      Sélection du fichier de données
      Passez à l'étape suivante.
    5. L'assistant propose la liste des rubriques présentes dans le fichier de données "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.
      Décochez "IDProduit".
      Assistant de création d'un champ Table
      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é. Cliquez sur la ligne "Libellé".
      Assistant de création d'un champ Table
      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 terminez 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 contenant le champ Table 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 Tester une 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 contenant le champ Table
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 indiquant que la colonne peut être triée
      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 dans une colonne d'un champ Table
      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 (ou OpenOffice.org Calc), au format Word (ou OpenOffice.org Writer), 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

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.
  • 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éer un élément 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 d'une fenêtre 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

Dans notre cas, cette fenêtre "Fiche" 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 de données "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 de saisie
        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 de la fenêtre 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 champ Bouton permettant de valider les données saisies :
    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 champ Bouton apparaît sous la souris.
    4. Cliquez ensuite à droite des champs de saisie pour créer le champ Bouton.
  • Ajoutez le champ Bouton permettant d'annuler la saisie 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 champ Bouton apparaît sous la souris.
    3. Cliquez ensuite en dessous du champ Bouton "Valider" pour créer le champ.
      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 champs Bouton "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".
        Gestion des ancrages
      • Validez.
      • 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 du produit grâce à un champ Bouton.
  • Nous allons tout d'abord modifier la fenêtre "FEN_Menu" afin de créer un champ Bouton :
    1. Placez-vous sur la fenêtre "Menu" : cliquez sur le bouton "FEN_Menu" dans la barre des documents ouverts :
      Barre des documents ouverts
    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 champ Bouton permettant de visualiser le produit sélectionné dans le champ Table.
  • Pour créer le champ Bouton permettant de visualiser le produit :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" (cliquez sur la flèche située sous Création d'un champ Bouton).
    2. Dans la liste des champs Bouton prédéfinis, saisissez "Modifier" dans la zone de recherche. Cliquez sur "Bouton Modifier". La forme du champ apparaît sous la souris. Cliquez ensuite à droite du champ Table pour créer le champ Bouton.
      Fenêtre sous l'éditeur avec le champ Bouton
    3. Faites un clic droit sur le champ que vous venez de créer. Dans le menu qui s'affiche, sélectionnez l'option "Code".
    4. Dans la fenêtre de code qui apparaît, saisissez le code WLangage suivant dans l'événement "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 le nom de 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 WLangage : 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 Enregistrer l'élément 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 des documents ouverts.
  • Pour afficher les données du produit :
    1. Affichez les événements 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. Les événements WLangage associés à la fenêtre sont affichés.
    2. Dans l'événement "Fin d'initialisation de FEN_Fiche_du_produit", saisissez le code WLangage 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 (Ctrl + S).
  • Affichez la fenêtre "FEN_Menu" sous l'éditeur : cliquez sur le bouton correspondant dans la barre des documents ouverts.
  • Testez la fenêtre (Tester une 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 différentes fenêtres de test 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 champs Bouton pour enregistrer ou annuler les modifications effectuées dans la fiche du produit.

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 champ Bouton "Modifier" situé en dessous de l'image du produit. Ce champ 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 des documents ouverts.
  • Pour créer le champ Bouton permettant de modifier l'image :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton". Dans la liste des champs Bouton prédéfinis que s'affiche, saisissez "Modifier" dans la zone de recherche. Cliquez sur "Bouton Modifier".
    2. La forme du champ apparaît sous la souris. Cliquez ensuite dans la fenêtre, sous l'image du produit.
    3. Redimensionnez si nécessaire le champ Bouton (à l'aide des poignées) pour que le champ 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 champ Bouton avec le champ Image.
      Interface de la fenêtre fiche sous l'éditeur
    4. Faites un clic droit sur le champ 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 WLangage suivant dans l'événement "Clic sur" :
      fSélecteurImage(
      Assistant de fonction dans l'éditeur 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 WLangage 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 WLangage 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 WLangage 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 champs Bouton dans la fenêtre "FEN_Fiche_du_produit" :
  • un champ Bouton "Valider" pour gérer la validation des modifications,
  • un champ 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 des documents ouverts.
  • Nous allons maintenant saisir le code WLangage associé au champ Bouton "Valider".
    1. Faites un clic droit sur le champ Bouton puis sélectionnez l'option "Code" dans le menu contextuel.
    2. Dans l'événement "Clic sur", saisissez le code WLangage suivant :
      EcranVersFichier()
      HModifie(Produit)
      Ferme()
      Examinons ce code WLangage :
      • 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 Enregistrer l'élément 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 WLangage associé au champ 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 champ Bouton "Modifier" et affichez l'éditeur de code (touche F2).
    3. Modifiez l'événement "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, avec les données modifiées dans la fiche du produit.
      • 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 Enregistrer l'élément 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 (Tester le 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 le volet "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 dans le volet "Explorateur de projet".
    3. Le projet se lance en mode test et la première fenêtre est affichée.
    4. Sélectionnez un produit dans la liste des produits (par exemple le premier) et cliquez sur le bouton "Modifier".
    5. Le détail du produit sélectionné apparaît dans la fenêtre fiche.
    6. Modifiez le prix de 100,23 euros et saisissez 200,00 euros puis ensuite cliquez sur le bouton "Valider".
    7. De retour sur la liste des produits, vous pouvez constater que le prix de cet article a été mis à jour.
    8. Affichez à nouveau le détail du produit.
    9. 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.
    10. Cliquez sur le bouton "Annuler". La modification de l'image n'a pas été prise en compte dans le fichier de données.
    11. 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 champ 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 champ Bouton

  • Pour ajouter un champ 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 des documents ouverts.
    2. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" et sélectionnez "Bouton Nouveau".
    3. La forme du champ apparaît sous la souris. Cliquez ensuite dans la fenêtre : le champ Bouton est créé.
    4. Positionnez le champ Bouton au-dessus du champ Bouton "Modifier" (si nécessaire modifiez la position du champ Bouton "Modifier").
      Interface de la fenêtre sous l'éditeur
    5. Modifiez le code WLangage de ce champ :
      • Faites un clic droit sur le champ Bouton "Nouveau" puis sélectionnez l'option "Code" dans le menu contextuel.
      • Dans l'événement "Clic sur", saisissez le code WLangage 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 de données "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 Enregistrer un élément 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 d'un nouvel enregistrement 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 WLangage associé au champ Bouton "Valider" :
      • Faites un clic droit sur le champ Bouton "Valider" puis sélectionnez l'option "Code" dans le menu contextuel.
      • Dans l'événement "Clic sur", remplacez le code WLangage existant par le code suivant :
        EcranVersFichier()
        SI Produit..NouvelEnregistrement ALORS
        HAjoute(Produit)
        SINON
        HModifie(Produit)
        FIN
        Ferme()
        Examinons ce code WLangage :
        • 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 le bouton "Nouveau") 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 de données "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 Enregistrer un élément 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 (Tester le 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 d'ajout d'un produit
    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 "WD Detection Erreurs HFSQL" livré avec WINDEV permet de tester ces différents modes de gestion des erreurs. Cet exemple peut être ouvert via la page d'accueil de WINDEV (Ctrl + <), 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 de données Produit.
  • Pour lancer WDMAP :
    1. Sous le volet "Outils", dans le groupe "Base de données", cliquez sur "WDMap".
    2. Sélectionnez le fichier de données "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 25
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire