PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Modification de la fenêtre : utilisation d'un champ Onglet
  • Création du champ Onglet
  • Modifications du champ Onglet
  • Mise en place de la recherche
  • Zone d'affichage des informations trouvées
  • Recherche à l'identique
  • Recherche générique
  • Parcours des fiches
  • Test de la fenêtre
Leçon 4.3. Recherche simple et parcours des enregistrements
Ce que vous allez apprendre dans cette leçon
  • Gestion de la recherche d'enregistrements.
  • Parcours des enregistrements.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Nous avons géré l'ajout et la modification d'enregistrements. C'est bien. Mais ce serait encore mieux de pouvoir rechercher un enregistrement (pour le modifier par exemple). C'est ce que nous allons faire maintenant.
Nous allons modifier la fenêtre principale de l'application "WD Application Complète" pour utiliser des volets d'onglet.
  • Le premier onglet permettra d'afficher la liste des produits et de gérer l'ajout et la modification des produits (les manipulations ont été réalisées dans les leçons précédentes).
  • Le second onglet proposera la recherche d'un client selon son nom. La fiche du client sera affichée dans l'onglet.
Nous allons mettre en place deux modes de recherche :
  • une recherche à l'identique,
  • une recherche générique.
Ensuite, il sera possible de parcourir les enregistrements présents dans le fichier de données à partir du client affiché.

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)".
Modification de la fenêtre : utilisation d'un champ Onglet
Dans cet exemple, la recherche ne va pas s'effectuer dans une nouvelle fenêtre : nous allons utiliser la fenêtre FEN_Menu. Actuellement, cette fenêtre affiche la liste des produits.
Pour afficher plusieurs données différentes dans cette fenêtre, nous allons utiliser des onglets. Les onglets permettent de regrouper des informations par thème. L'utilisateur peut accéder directement à un thème en cliquant sur le "volet" voulu.
Ce système est utilisé dans toutes les fenêtres de description de WINDEV.

Création du champ Onglet

  • Pour afficher les données de la fenêtre "FEN_Menu" dans un onglet :
    1. Affichez si nécessaire la fenêtre "FEN_Menu" :
      • soit depuis la barre des boutons.
      • soit en double-cliquant sur son nom dans l'explorateur de projet.
    2. Sélectionnez les champs de la fenêtre et déplacez-les dans la zone d'accueil de la fenêtre. Cette manipulation peut sembler "bizarre", mais ainsi il sera plus simple de travailler sur le champ Onglet puis d'associer les champs à l'onglet voulu.
    3. Créez un champ Onglet dans la fenêtre :
      • Sous le volet "Création", dans le groupe "Conteneurs", déroulez "Onglet et associés" et sélectionnez "Onglet".
      • Cliquez dans la fenêtre pour créer le champ Onglet.
      • Positionnez le champ Onglet en haut à gauche de la fenêtre.
      • Par défaut, un champ Onglet est créé avec deux volets. Le champ Onglet occupe toute la place disponible dans la fenêtre.
    4. Sélectionnez les champs présents dans la zone d'accueil de la fenêtre et déplacez-les vers le volet 1.
    5. Un cadre vert apparaît lors du survol des champs sur le champ Onglet. Ce cadre indique que les champs posés sur le volet en cours seront automatiquement associés au volet.
    6. Agrandissez si nécessaire la fenêtre et le champ Onglet pour afficher le champ Table et les boutons dans le champ Onglet.

Note

Manipulations de champs dans un champ Onglet
  • Pour vérifier que tous les champs sont bien associés au volet d'onglet en cours, cliquez sur un autre volet d'onglet : tous les champs associés à l'onglet disparaissent.
  • Pour redimensionner le champ Onglet sans prendre en compte l'ancrage des champs présents dans le volet, utilisez la touche Maj pendant le redimensionnement.

Modifications du champ Onglet

  • Modifiez le nom du champ Onglet :
    1. Double-cliquez sur le champ Onglet que vous venez de créer : la fenêtre de description du champ s'affiche.
    2. Modifiez le nom du champ. Le champ a pour nom "ONG_Visualisation".
    3. Validez la fenêtre de description du champ.
  • Deux volets sont créés par défaut. Nous allons modifier leur libellé directement :
    1. Sélectionnez le champ Onglet.
    2. Cliquez sur "Volet 1". Le volet passe en édition : saisissez le libellé "Liste des produits". Validez­ avec la touche Entrée.
    3. Cliquez sur "Volet 2". Le volet s'affiche. Cliquez à nouveau sur "Volet 2". Saisissez le libellé "Recherche de clients". Validez avec la touche Entrée.
  • Nous allons associer une image à chaque volet de l'onglet. Pour cela :
    1. Affichez la fenêtre de description du champ Onglet (double-clic sur le champ par exemple). L'onglet "Général" de la fenêtre de description permet de configurer les caractéristiques de chaque volet d'onglet. La liste des volets est affichée à gauche. Pour chaque volet sélectionné, ses caractéristiques sont modifiables dans la partie droite de l'écran.
    2. Dans la fenêtre de description, sélectionnez le volet "Liste des produits".
    3. Les caractéristiques du volet sont affichées.
    4. Nous allons associer une image à l'onglet grâce au catalogue d'images de WINDEV.

      Note

      Dès qu'une image peut être affichée dans un champ ou une fenêtre, WINDEV propose d'utiliser le catalogue d'images. Ce catalogue d'images est lancé via l'option "Catalogue" (disponible en cliquant sur le bouton ). Ce catalogue contient plusieurs milliers d'images, de cliparts, ...
    5. Cliquez sur le bouton à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue". La fenêtre du catalogue d'images apparaît.
    6. Sélectionnez le thème "Flat Soft" dans la combo "Thème", puis saisissez "Produit" dans la zone de recherche. Lancez la recherche en cliquant sur la loupe.
    7. Sélectionnez l'image et validez (bouton vert).
    8. L'écran de paramétrage de l'image générée apparaît. Cet écran permet de modifier les caractéristiques de l'image à générer : taille, luminosité, ... Conservez les options par défaut et validez.
    9. L'image est générée dans le répertoire du projet et le fichier correspondant est automatiquement associé à l'élément en cours.
    10. Dans la fenêtre de description, cliquez sur "Recherche de clients" dans la liste des volets statiques.
    11. Cliquez sur le bouton à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue". La fenêtre du catalogue d'images apparaît.
    12. Dans la zone de recherche, indiquez "Personne" (le thème "Flat Soft" utilisé pour notre dernière recherche est sélectionné par défaut). Lancez­ la recherche en cliquant sur la loupe.
    13. Parmi les images proposées, sélectionnez l'icône présentant deux personnes () et validez.
    14. Conservez les options de l'écran de paramétrage de l'image générée et validez.
    15. Validez la fenêtre de description du champ Onglet.
  • Nous venons de créer un nouveau champ : il est nécessaire de s'occuper de son ancrage dans la fenêtre. Lorsque la fenêtre va s'agrandir, il est nécessaire que le champ Onglet s'agrandisse également pour occuper tout l'espace disponible. Le champ doit donc s'étirer vers la droite et vers le bas.
    1. Sélectionnez le champ Onglet.
    2. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Ancrage".
    3. Dans la fenêtre de définition de l'ancrage, sélectionnez l'option et validez.
    4. Enregistrez la fenêtre en cliquant sur parmi les boutons d'accès rapide.
Mise en place de la recherche
Nous avons fini de préparer la fenêtre "FEN_Menu". Nous pouvons maintenant nous concentrer sur le contenu de l'onglet de recherche des clients.
Cet onglet va être divisé en plusieurs zones :
  • Une zone de saisie des éléments à rechercher.
  • Une zone d'affichage des informations trouvées.
  • Une zone contenant les boutons de parcours.

Zone d'affichage des informations trouvées

Nous allons tout d'abord créer les différents champs qui afficheront les informations sur le client trouvé.
Pour créer les champs de saisie dans la fenêtre, nous allons procéder de la même manière que pour la fenêtre fiche du produit : un simple "Drag and Drop" depuis le volet "Analyse".
  • Pour créer les différents champs affichant les informations sur le client :
    1. Affichez la fenêtre FEN_Menu sous l'éditeur et cliquez sur l'onglet "Recherche de clients". Le volet d'onglet vide apparaît.
    2. 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.
    3. Cliquez sur l'icône à gauche du fichier "Client" : les rubriques du fichier de données sont listées.
    4. Sélectionnez à l'aide de la souris l'ensemble des rubriques affichées dans le volet. Vous pouvez par exemple utiliser la multisélection en maintenant la touche Ctrl enfoncée.
    5. Effectuez un "Drag and Drop" (glisser/déplacer) de ces rubriques vers l'onglet "Recherche de clients".
    6. Les champs sont automatiquement créés dans l'onglet. Ces champs sont automatiquement liés à la rubrique correspondante dans le fichier de données.
    7. Enregistrez la fenêtre.
  • Nous allons aligner les champs et leur donner la même taille :
    1. Sélectionnez le champ "Ville" 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. Sous le volet "Alignement", dans le groupe "Interne et externe", cliquez sur l'option "Justifier (Int. et Ext.)".
  • Testez la fenêtre ( parmi les boutons d'accès rapide). Cliquez sur le volet d'onglet "Recherche de clients". La fenêtre apparaît avec tous les champs vides.
  • Fermez la fenêtre en cours de test pour revenir sous l'éditeur.

Recherche à l'identique

Pour effectuer la recherche à l'identique, nous allons sélectionner le nom du client dans un champ Combo. Le bouton "Rechercher" permettra d'afficher la fiche de la personne correspondante. Une seule personne correspond au nom sélectionné.
  • Le champ Combo va venir se placer au-dessus des champs que nous venons de créer. Si vos champs sont placés trop près de l'onglet, il est nécessaire de les déplacer vers le bas. Pour cela :
    1. Sélectionnez l'ensemble des champs présents dans l'onglet :
      • Utilisez la combinaison de touches Ctrl + A : tous les champs de la fenêtre et du volet en cours sont sélectionnés.
      • Appuyez sur la touche Ctrl.
      • Cliquez sur l'onglet : seuls les champs du volet d'onglet sont sélectionnés.
    2. Déplacez un des champs sélectionnés vers le bas à l'aide de la souris.
    3. Tous les champs sont déplacés vers le bas.
  • Pour créer le champ de recherche :
    1. Créez un champ de type Combo : sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Combo".
    2. Cliquez ensuite dans le volet "Recherche de client", dans la zone entre le volet d'onglet et le champ "Identifiant de Client".
    3. L'assistant de création des combos s'affiche. Nous allons créer une combo basée sur le fichier de données "Client".
    4. Sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante". Passez à l'étape suivante de l'assistant.
    5. Sélectionnez le fichier de données "Client". Passez à l'étape suivante.
    6. Nous allons afficher le nom et le prénom de la personne.
      • Désélectionnez la rubrique "IDClient".
      • Sélectionnez la rubrique "NomComplet".
    7. Passez à l'étape suivante.
    8. La rubrique "NomComplet" sera également utilisée pour trier la liste des clients affichés dans le champ Combo. Sélectionnez la rubrique "NomComplet".
    9. Passez à l'étape suivante.
    10. La valeur retournée par le champ Combo sera l'identifiant "IDClient". C'est cette valeur qui sera recherchée dans le fichier Client. Sélectionnez la rubrique "IDClient" et passez à l'étape suivante.
    11. Le champ Combo ne sera lié à aucune rubrique. Conservez l'option "Non" et passez à l'étape suivante.
    12. Validez l'écran suivant avec la flèche jaune.
    13. Donnez un nom au champ (par exemple "COMBO_Client") et un libellé (par exemple "Client recherché").
    14. Validez. Positionnez le champ Combo dans la fenêtre (par exemple en haut à gauche).
    15. Sélectionnez le champ Combo et à l'aide des poignées, modifiez sa taille afin de voir le nom complet du client s'afficher.
  • Pour créer le bouton de recherche :
    1. Créez un bouton : sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    2. Positionnez le bouton à côté de la combo qui vient d'être créée.
    3. Ce champ a pour nom "BTN_RechercheIdentique" et pour libellé "Recherche identique".
    4. Si nécessaire, adaptez la taille du bouton pour que le libellé apparaisse correctement dans le bouton.
    5. Saisissez le code suivant :
      // Recherche le client par son identifiant
      HLitRecherchePremier(Client, IDClient, COMBO_Client)
      SI HTrouve(Client) ALORS
      // Affiche les données du client
      FichierVersEcran()
      FIN
    6. Examinons ce code :
      • La fonction HLitRecherchePremier permet de réaliser une recherche à l'identique. Dans cet exemple, la recherche se fait sur le fichier Client et sur la rubrique IDClient. La valeur recherchée correspond au dernier paramètre de la fonction. Ici, la valeur recherchée correspond à la valeur sélectionnée dans la combo. Cette valeur est obtenue en utilisant directement le nom de la combo (COMBO_Client).
      • La fonction HTrouve permet de tester le résultat de la recherche. Si la fonction HTrouve renvoie Vrai, une valeur a été trouvée, si la fonction HTrouve renvoie Faux, aucune valeur n'a été trouvée. Lorsqu'un enregistrement a été trouvé, cet enregistrement est lu : il devient l'enregistrement courant du fichier de données.
      • Dans ce code, si l'enregistrement a été trouvé, il est affiché grâce à la fonction FichierVersEcran.

        Note

        La fonction FichierVersEcran effectue l'opération inverse de la fonction EcranVersFichier : les données présentes dans les rubriques du fichier de données sont affichées dans les champs correspondants.
    7. Fermez l'éditeur de code.
    8. Enregistrez la fenêtre.
  • Réalisons un test de la fenêtre :
    1. Lancez le test de la fenêtre ( parmi les boutons d'accès rapide).
    2. Cliquez si nécessaire sur l'onglet "Recherche de clients".
    3. Sélectionnez une valeur dans la combo et cliquez sur le bouton de recherche.
    4. Le résultat est immédiat.
    5. Fermez la fenêtre de test pour retourner sous l'éditeur.

Recherche générique

Nous allons maintenant effectuer une recherche générique. Au lieu de rechercher exactement la valeur saisie, nous allons rechercher tous les éléments qui commencent par la valeur saisie. Pour effectuer cette recherche, nous allons créer un champ de saisie afin de saisir le nom recherché et un bouton pour lancer la recherche.
  • Pour créer le champ de recherche :
    1. Affichez si nécessaire l'onglet "Recherche de clients" de la fenêtre "FEN_Menu" sous l'éditeur.
    2. Créez un champ de saisie : sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    3. Cliquez dans la fenêtre sous le champ Combo "Client recherché". Le champ de saisie est créé.
    4. Ce champ a pour nom "SAI_Nom_Recherché" et pour libellé "Nom recherché".
  • Pour créer le bouton de recherche :
    1. Créez un bouton : sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    2. Positionnez le bouton à côté du champ de saisie qui vient d'être créé.
    3. Ce champ a pour nom "BTN_RechercheGénérique" et pour libellé "Recherche générique".
    4. Si nécessaire, adaptez la taille du bouton pour que le libellé apparaisse correctement dans le bouton.
    5. Saisissez le code suivant :
      // Recherche un client par son nom
      HLitRecherche(Client, NomComplet, SAI_Nom_Recherché)
      SI HTrouve(Client) ALORS
      // Affiche les données du client
      FichierVersEcran()
      SINON
      Erreur("Aucun client ne correspond")
      FIN
      La fonction HLitRecherche permet de réaliser une recherche générique. Dans cet exemple, la recherche se fait sur le fichier "Client" et sur la rubrique "NomComplet". La valeur recherchée correspond à la valeur saisie dans le champ "SAI_Nom_Recherché". Cette valeur est obtenue en utilisant directement le nom du champ.

      Note

      Il est possible de faire une recherche à l'identique avec la fonction HLitRecherche : il suffit d'utiliser la constante hIdentique.
    6. Fermez la fenêtre de code.
    7. Enregistrez la fenêtre.
  • Réalisons un test de la fenêtre :
    1. Lancez le test de la fenêtre ( parmi les boutons d'accès rapide).
    2. Cliquez si nécessaire sur l'onglet "Recherche de clients".
    3. Saisissez une valeur dans le champ de saisie (par exemple "BEEF") et cliquez sur le bouton de recherche.
    4. Le résultat est immédiat. Cependant, si plusieurs enregistrements correspondent, seul le premier est affiché.
    5. Arrêtez le test et revenez sous l'éditeur.

Parcours des fiches

Nous allons maintenant ajouter quatre boutons permettant de parcourir les différents enregistrements du fichier "Client". Ces boutons sont de type "boutons magnéto".
Ils sont constitués uniquement d'une icône et permettent d'afficher :
  • le premier enregistrement,
  • l'enregistrement précédent,
  • l'enregistrement suivant,
  • le dernier enregistrement.
  • Pour créer le bouton affichant le premier enregistrement du fichier de données :
    1. Si nécessaire, affichez l'onglet "Recherche de clients" sous l'éditeur.
    2. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    3. La forme du bouton apparaît sous la souris. Cliquez ensuite dans l'onglet, sous le champ "Recherche générique". Le bouton est automatiquement créé.
  • Pour uniformiser l'interface des fenêtres d'un projet, nous utilisons un gabarit. Ce gabarit définit le style de tous les champs des fenêtres. Pour chaque bouton magnéto, un style spécifique est défini. Pour appliquer ce style :
    1. Sélectionnez si nécessaire le bouton.
    2. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Choisir un style".
    3. Dans la fenêtre qui s'affiche, tous les styles définis pour les boutons s'affichent. Sélectionnez le style "BTN_Premier".
    4. Validez.
  • Modifiez le nom du champ Bouton :
    1. Affichez la fenêtre de description du champ :
      • Sélectionnez le champ Bouton.
      • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Description".
    2. Ce champ a pour nom "BTN_Premier".
    3. Validez la fenêtre de description.
  • Nous allons maintenant saisir le code WLangage associé à ce champ :
    1. Faites un clic droit sur le champ. Dans le menu qui s'affiche, sélectionnez l'option "Code".
    2. Dans la fenêtre de code qui apparaît, saisissez le code suivant dans le traitement "Clic sur" :
      // Lit le premier client
      HLitPremier(Client)
      SI HEnDehors(Client) = Vrai ALORS
      // Pas de client
      Info("Aucune fiche à visualiser.")
      SINON
      // Affiche les données du client
      FichierVersEcran()
      FIN
      La fonction HLitPremier permet de lire le premier enregistrement du fichier de données, selon la clé utilisée pour la dernière recherche (NomComplet dans notre cas).
  • De la même manière, créez 3 nouveaux boutons.
    • Ces boutons ont pour nom : "BTN_Précédent", "BTN_Suivant" et "BTN_Dernier".
    • Ces boutons sont respectivement associés aux styles : "BTN_Précédent", "BTN_Suivant" et "BTN_Dernier".
    • Le code du bouton "BTN_Précédent" est le suivant :
      // Si aucune recherche en cours
      SI HEnDehors(Client) ALORS
      // Lit le dernier client
      HLitDernier(Client)
      FIN

      // Lit le client précédent
      HLitPrécédent(Client)
      // Si le début du fichier est dépassé
      SI HEnDehors(Client) = Vrai ALORS
      Info("Début du fichier atteint.")
      SINON
      // Affiche les données du client
      FichierVersEcran()
      FIN
    • Le code du bouton "BTN_Suivant" est le suivant :
      // Si aucune recherche en cours
      SI HEnDehors(Client) ALORS
      // Lit le premier client
      HLitPremier(Client)
      FIN

      // Lit le client suivant
      HLitSuivant(Client)
      // Si la fin du fichier est dépassée
      SI HEnDehors(Client) = Vrai ALORS
      Info("Fin du fichier atteinte.")
      SINON
      // Affiche les données du client
      FichierVersEcran()
      FIN
    • Le code du bouton "BTN_Dernier" est le suivant :
      // Lit le dernier client
      HLitDernier(Client)
      SI HEnDehors(Client) = Vrai ALORS
      // Pas de client
      Info("Aucune fiche à visualiser.")
      SINON
      // Affiche les données du client
      FichierVersEcran()
      FIN
    Dans ces différents codes :
    • La fonction HLitDernier permet de lire le dernier enregistrement du fichier de données, selon la clé utilisée pour la dernière recherche.
    • La fonction HLitSuivant va lire l'enregistrement qui a la valeur de clé immédiatement supérieure à celle de l'enregistrement en cours.
    • La fonction HLitPrécédent va lire l'enregistrement qui a la valeur de clé immédiatement inférieure à celle de l'enregistrement en cours.
    Dans tous les cas :
    • la fonction HEnDehors permet de savoir si le fichier de données est vide.
    • la fonction FichierVersEcran permet d'afficher l'enregistrement à l'écran.

Note

Le code des boutons "Suivant" et "Précédent" contient un code supplémentaire permettant de :
  • Vérifier si une recherche dans le fichier Client a déjà été effectuée (test de la fonction HEnDehors pour savoir si la lecture du fichier est commencée).
  • Lire le premier ou le dernier enregistrement si nécessaire. En effet, il est impossible de lire l’enregistrement suivant ou précédent si aucune lecture n'a été effectuée dans le fichier.
  • Enregistrez la fenêtre en cliquant sur parmi les boutons d'accès rapide.

Test de la fenêtre

  • Réalisons un test de la fenêtre :
    1. Lancez le test de la fenêtre ( parmi les boutons d'accès rapide).
    2. Cliquez si nécessaire sur l'onglet "Recherche de clients".
    3. Recherchez un client (par exemple, une recherche générique sur "BEEF").
    4. Parcourez le fichier de données en cliquant sur chacun des boutons de parcours.
    5. Arrêtez le test pour revenir sous l'éditeur.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire