• Présentation du projet exemple.
• 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

• Visualiser, saisir et modifier des produits,
• Imprimer des états,
• Afficher des statistiques,
• Gérer des niveaux d'utilisation,
• Envoyer des emails,
• etc.

• créer différentes fenêtres permettant de lister, ajouter, modifier des produits.
• créer différents états.
• déployer l'application.
• utiliser des fonctionnalités propres au développement de l'application (Tableau de bord, Audits, GDS).
• intégrer des fonctionnalités (Groupware utilisateur, gestion des emails, etc.).

• Ouvrez le projet "WD Application Complète" :
  1. Lancez WINDEV si nécessaire.
  2. Affichez la page d'accueil de WINDEV (Ctrl + <).
  3. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 4 - Application complète avec données", double-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 "Tutoriel" puis dans la zone "Partie 4 - Application complète avec données", double-cliquez sur "Application complète (Corrigé)".

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

	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 rempli par programmation ou ou champ Table 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 variable.

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

Test de la fenêtre

• Nous allons tout de suite tester la fenêtre que nous venons de créer.
  1. Cliquez sur 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.
  

• 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).
    
    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.
    
    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é.
    
• 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, etc.
  

	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. Pour plus de détails, consultez Fonctionnalités Automatiques de vos Applications (FAA).

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

• 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 "Volets" puis "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 à gauche du fichier de données "Produit" : les rubriques du fichier de données sont listées.
     
  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.
     
  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 :
       
       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'UI suivante :
  

Création des boutons

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

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

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

     

• Nous pourrions utiliser les poignées de redimensionnement, comme nous l'avons fait précédemment. Mais WINDEV offre également la possibilité de saisir directement les dimensions de la fenêtre.
  1. Cliquez sur la fenêtre présente sous l'éditeur. La fenêtre est sélectionnée.
  2. Dans la barre de message, saisissez la nouvelle dimension de la fenêtre.
     
     Dans cet exemple, la dimension originale est 609 x 270, nous allons saisir par exemple 554 x 252.
  3. La fenêtre est automatiquement modifiée. Si cette modification ne vous convient pas, utilisez la combinaison de touches Ctrl + Z pour annuler.

• 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.
       
  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 : 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. 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".
       
     • 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" ().
     • 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 ().
  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.
       
  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 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 :
     
  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 ).
  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.
     
  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" :
     
     FEN_Fiche_du_produit.Ouvre()
     
     
     

     	Note	Laissez-vous guider par l'assistance à la saisie de code (également appelée "complétion") : dès que vous allez taper le point à la suite du nom de la fenêtre, une liste déroulante va s'ouvrir proposant le nom de toutes les fonctions pouvant s'appliquer sur cette fenêtre. Il suffit de sélectionner le nom de la fonction au clavier ou à la souris.
  5. Examinons ce code WLangage : la fonction <Fenêtre>.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 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).

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

• 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

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

     
  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(
     
  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é.
     
     Fichier est une chaîne
      
     // Ouvre le sélecteur d'images
     Fichier = fSélecteurImage("", "", "Sélectionnez une image...")
     
  8. Ajoutez le code WLangage suivant à la suite :
     
     // Si un fichier a été sélectionné
     SI Fichier <> "" ALORS
     // Affecte l'image au champ Image
     IMG_Visuel = Fichier
     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).

Validation des modifications 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.

• 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()
     Produit.Modifie()
     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 <Fichier de données>.Modifie permet de mettre à jour les données du fichier de données pour l'enregistrement courant.
  3. Enregistrez les modifications en cliquant sur 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 la fiche produit sur le produit sélectionné
     FEN_Fiche_du_produit.Ouvre()
      
     // Met à jour la ligne sélectionnée
     TABLE_Produit.Affiche(taCourantBandeau)
     
     Examinons ce code :
     • La fonction <Table>.Affiche 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 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 ( parmi les 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 et saisissez 200,00 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.

• 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").
     
  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 :
       
       Produit.RAZ()
       FEN_Fiche_du_produit.Ouvre()
       TABLE_Produit.Affiche(taCourantEnreg)
       
       Examinons ce code :
       • La fonction RAZ 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 Affiche permet de réafficher le champ Table. Dans ce code, la constante taCourantEnreg est utilisée pour réafficher le champ Table à partir de l'enregistrement courant.
  6. Enregistrez les modifications en cliquant sur 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
       Produit.Ajoute()
       SINON
       Produit.Modifie()
       FIN
       Ferme()
       
       Examinons ce code WLangage :
       • La propriété NouvelEnregistrement permet de savoir si l'enregistrement en cours doit être créé.
       • Si la fonction <Fichier de données>.RAZ 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 Ajoute.
       • Dans le cas contraire, l'enregistrement en cours existe déjà et doit être modifié par la fonction <Fichier de données>.Modifie.
       • La fonction <Fichier de données>.Ajoute 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 <Fichier de données>.Enregistre. 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() Produit.Enregistre() Ferme()
  3. Enregistrez les modifications en cliquant sur 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 ( 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
       
  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 :
     
     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, etc. 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

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