DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Recherche multicritère et impression
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Création de la requête pour rechercher les commandes
  • Création de la requête
  • Test de la requête
  • Utilisation de paramètres dans la requête
  • Test de la requête paramétrée
  • Création de la page proposant la recherche multicritère
  • Création d'une page
  • Création des champs de paramétrage des critères et affichage du résultat
  • Optimisation de l'affichage de la page
Leçon 5.1. Recherche Multicritère
Ce que vous allez apprendre dans cette leçon
  • Création d'une requête paramétrée.
  • Création de l'interface de sélection des critères de recherche.
  • Passage de paramètres à une requête.
  • Affichage du résultat d'une requête dans un champ Table.
  • Optimisation du rafraîchissement de la page en activant Ajax.
Durée de la leçon

Durée estimée : 1h30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Dans les parties précédentes, nous avons créé un projet WEBDEV permettant de créer un site contenant à la fois une partie Internet et une partie Intranet.
Dans les différentes leçons de la partie 5, nous allons reprendre le projet "Site_WEBDEV_Complet" que nous avons manipulé dans les parties 3 et 4.

  • Pour ouvrir ce projet :
    1. Lancez WEBDEV si nécessaire.
    2. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "Site WEBDEV Complet - Exercice".
    4. WEBDEV vous propose d'ouvrir le projet que vous avez manipulé dans la partie précédente. Vous pouvez ouvrir le projet présent sur votre poste ou ouvrir le projet original. Choisissez "Ouvrir la copie locale".

Corrigé

Un projet corrigé est disponible. Ce projet contient les différents éléments créés dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "Site WEBDEV Complet - Corrigé".


Dans cette leçon, nous allons permettre à l'utilisateur de faire une recherche multicritère.
Dans notre exemple, cette recherche se fera sur le fichier de données "Commande". L'utilisateur pourra sélectionner :
  • le nom du client,
  • l'état de la commande,
  • son mode de règlement,
  • le prix de la commande.
L'UI de la page "PAGE_Recherche_multicritere" sera la suivante :
UI de la page
Cette UI est composée :
  • de champs permettant de sélectionner les critères de recherche.
  • de boutons permettant de lancer la recherche ou d'imprimer le résultat.
  • d'un champ Table permettant d'afficher le résultat de la recherche. Ce champ Table est basé sur une requête. Cette requête va permettre de sélectionner les enregistrements à afficher.
La première étape consiste à créer la requête de sélection des enregistrements.

Note

Qu'est-ce qu'une requête de sélection ?
Une requête de sélection est une requête qui va "ressortir" uniquement les enregistrements correspondant aux critères spécifiés.
Ce type de requête s'appelle une requête de sélection car en langage SQL l'ordre SELECT est utilisé.
Création de la requête pour rechercher les commandes

Création de la requête

  • Pour créer une requête, nous allons utiliser l'éditeur de requêtes.
    1. 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 "Requête­". L'assistant de création d'une requête se lance.
    2. Sélectionnez l'option "Sélection (SELECT)".
      En effet, la requête que nous allons créer va nous permettre de sélectionner des enregistrements. Passez à l'étape suivante.
    3. La fenêtre de description de la requête apparaît.
      Arrêtons-nous un instant sur l'UI de l'éditeur de requêtes :
      Interface de l'éditeur de requêtes
      Cette UI est composée de :
      1. un rappel de l'analyse (la description de la base de données du projet).
      2. les rubriques que la requête doit comporter.
      3. les options de sélection des enregistrements.
      4. la requête en code SQL ou en langage naturel.
  • Nous allons construire la requête en sélectionnant les éléments que nous voulons dans le résultat.
    1. Double-cliquez sur les rubriques présentes dans l'analyse à gauche de la fenêtre de description. Les rubriques prises en compte apparaissent alors au centre de l'écran.
      Nous voulons afficher :
      • les renseignements concernant la commande. Dans le fichier de données "Commande", double-cliquez sur les rubriques : IDCommande, Date, Etat et TotalTTC.
      • les renseignements concernant le client ayant passé la commande. Dans le fichier de données "Client", double-cliquez sur la rubrique "NomComplet".
      • les renseignements concernant le mode de règlement de la commande. Dans le fichier de données "ModeRèglement", double-cliquez sur les rubriques "Libellé" et "IDModeRèglement".
      La fenêtre de description de la requête est la suivante :
      Description de la requête de cette leçon
    2. Nous allons trier les données par date.
      • Sélectionnez la rubrique "Commande.Date" au centre de l'écran, puis cliquez sur le bouton "Trier" (présent dans la liste des actions) et sélectionnez l'option "Trier sur la rubrique sélectionnée".
        Ajouter un tri
      • Dans la fenêtre qui s'affiche, indiquez un tri croissant sur la rubrique et validez.
    3. Une flèche bleue avec le numéro 01 apparaît à droite de la rubrique "Commande.Date". Cette flèche indique qu'un tri croissant est fait sur cette rubrique. Le chiffre "01" indique que ce tri sera réalisé en premier.
      Rubrique de la requête triée
    4. Donnez un nom à la requête : saisissez "REQ_RechercheCommandes" à la place de "REQ_SansNom1" dans la zone "Nom de la requête" :
      Nom de la requête
    5. Validez la fenêtre de description de la requête (bouton "OK").
    6. Validez la fenêtre de sauvegarde de la requête.
    7. La représentation graphique de la requête est affichée :
      Représentation graphique de la requête

Test de la requête

Comme tous les éléments d'un projet WEBDEV, il est possible de tester immédiatement la requête que nous venons de créer :
  1. Cliquez sur Tester un élément.
  2. Le résultat s'affiche dans une fenêtre :
    Résultat du test de la requête

    Note

    Si vous faites un clic droit sur le résultat de la requête, un menu contextuel apparaît. Vous avez alors la possibilité d'exporter le résultat vers :
    • un fichier xlsx (Excel).
    • un fichier XML (eXtensible Markup Language).
    • un fichier Word ou Open Office.
  3. Le résultat affiché liste TOUTES les commandes. Dans notre cas, nous souhaitons afficher uniquement les commandes correspondant aux critères de recherche. Pour cela, il est nécessaire d'utiliser une requête paramétrée.
  4. Fermez la fenêtre.

Utilisation de paramètres dans la requête

Dans notre exemple, l'utilisateur va pouvoir sélectionner une valeur pour les critères de recherche suivants :
  • Nom du client.
  • Etat de la commande.
  • Mode de règlement de la commande.
  • Prix de la commande.
Nous devons modifier la requête afin que ces critères de recherche correspondent à des paramètres de la requête.
  • Pour définir les paramètres de la requête, affichez la fenêtre de description de la requête : double-cliquez sur le fond de la représentation graphique de la requête (ou utilisez dans le menu contextuel, l'option "Description de la requête").
  • Pour gérer le paramètre "Nom du client" :
    1. Sélectionnez au centre de l'écran la rubrique Client.NomComplet.
    2. Déroulez le bouton "Condition de sélection" (dans la partie "Actions" de la fenêtre) et sélectionnez "Nouvelle condition".
    3. Dans la fenêtre qui s'affiche, nous allons indiquer que la condition de sélection correspond à un paramètre :
      Saisie d'une condition de sélection
      • Sélectionnez "Contient".
      • Cochez "au paramètre".
      • Indiquez le nom du paramètre : "ParamNomClient".

        Note

        Nous vous conseillons de préfixer les paramètres des requêtes par "param". Il est ainsi possible de les retrouver très facilement dans l'éditeur de code.
        Quand vous recherchez un paramètre de la requête, saisissez simplement ‘param' et la complétion de l'éditeur de code vous propose tous les paramètres.
    4. Validez la fenêtre de description de la condition. Le chiffre "1" apparaît à droite de la rubrique "Client.NomComplet", indiquant qu'une condition de sélection a été définie.
Liste des éléments de la requête

Note

La description de la requête en langage naturel (en bas de l'éditeur de requêtes) est automatiquement mise à jour en fonction de la condition ajoutée.
Requête en langage naturel
  • Passons au second paramètre : l'état de la commande :
    1. Sélectionnez au centre de l'écran la rubrique Commande.Etat.
    2. Déroulez le bouton "Condition de sélection" et sélectionnez "Nouvelle condition".
    3. Dans la fenêtre qui s'affiche, nous allons indiquer que la condition de sélection est égale à un paramètre :
      Condition de sélection
      • Sélectionnez "Est égal à".
      • Sélectionnez "au paramètre".
      • Indiquez le nom du paramètre : "ParamEtat".
    4. Validez la fenêtre de description de la condition. Le chiffre "1" apparaît à droite de la rubrique "Commande.Etat", indiquant qu'une condition de sélection a été définie.
  • Nous allons maintenant définir une condition sur le mode de règlement. La rubrique "ModeRèglement.IDModeRèglement" ne doit pas être affichée dans le résultat de la requête mais nous souhaitons tout de même lui appliquer une condition. Pour cela, nous allons la rendre invisible.
    1. Pour ne pas afficher la rubrique "ModeRèglement.IDModeRèglement" dans le résultat :
      • Cliquez sur l'oeil (Afficher la rubrique) correspondant à la rubrique "ModeRèglement.IDModeRèglement" dans la liste des éléments de la requête (au centre de l'écran).
      • Dans le menu qui s'affiche, sélectionnez "Ne pas afficher".
    2. Pour définir une condition de sélection sur la rubrique "ModeRèglement.IDModeRèglement" :
      • Sélectionnez au centre de l'écran la rubrique "ModeRèglement.IDModeRèglement".
      • Déroulez le bouton "Condition de sélection" et sélectionnez "Nouvelle condition".
      • Dans la fenêtre qui s'affiche, indiquez que la condition de sélection correspond à un paramètre :
        • Sélectionnez "Est égal à".
        • Sélectionnez "au paramètre".
        • Indiquez le nom du paramètre : "ParamIDModeRèglement".
    3. Validez la définition de la condition de sélection.
      Liste des éléments de la requête
  • La dernière condition de sélection à définir concerne le montant de la commande. En fait, nous allons définir deux conditions afin de spécifier un prix minimum et un prix maximum.
    1. Sélectionnez la rubrique "Commande.TotalTTC" dans la liste des éléments de la requête.
    2. Affichez le menu contextuel de la rubrique (clic droit) et sélectionnez "Condition de sélection .. Nouvelle condition".
    3. Dans la fenêtre qui s'affiche :
      • Sélectionnez la condition "Est supérieur ou égal à".
      • Cliquez sur "au paramètre".
      • Indiquez le nom du paramètre : "ParamPrixMin".
    4. Validez la définition de la condition de sélection.
    5. Définissez à nouveau une condition sur la même rubrique "Commande.TotalTTC" : affichez le menu contextuel de la rubrique (clic droit) et sélectionnez "Condition de sélection .. Nouvelle condition".
    6. Dans la fenêtre qui s'affiche :
      • Sélectionnez la condition "Est inférieur ou égal à".
      • Cliquez sur "au paramètre".
      • Indiquez le nom du paramètre : "ParamPrixMax".
    7. Validez la définition de la condition de sélection.

      Note

      Il est possible de remplacer la définition des deux conditions de sélection sur la rubrique (est supérieur ou égal à et est inférieur ou égal à) par une seule condition de sélection "Est compris entre".
      Cependant, l'utilisation d'une condition de sélection de type "Est compris entre" oblige à saisir les deux valeurs (ce qui n'est pas le cas si deux conditions différentes sont définies).
    8. Validez la fenêtre de description de la requête. Le graphe de la requête est modifié pour prendre en compte les conditions de sélection que nous avons définies.
      Graphe de la requête
    9. Enregistrez la requête en cliquant sur Enregistrer un élément parmi les boutons d'accès rapide.

Test de la requête paramétrée

  • Pour tester la requête paramétrée :
    1. Cliquez sur Tester un élément.
    2. Une fenêtre s'affiche permettant de saisir les différents paramètres de la requête.

      Note

      Les paramètres peuvent être ignorés en décochant la case devant leur nom. Dans ce cas, la condition de sélection associée au paramètre est ignorée. Par exemple, si le paramètre ParamNomClient est ignoré, les commandes de tous les clients seront prises en compte par la requête.
      Remarque : Si tous les paramètres sont décochés, la requête renvoie l'intégralité du résultat.
      Paramètres de test de la requête
    3. Saisissez les données suivantes :
      • Décochez les paramètres ParamNomClient et ParamEtat.
      • Sélectionnez le paramètre ParamIDModeRèglement. Dans la partie basse de l'écran, saisissez "1".
      • Sélectionnez le paramètre ParamPrixMin. Dans la partie basse de l'écran, saisissez "150".
      • Sélectionnez le paramètre ParamPrixMax. Dans la partie basse de l'écran, saisissez "300".
    4. Validez la fenêtre. Le résultat de la requête correspondant aux paramètres spécifiés s'affiche.
    5. Fermez la fenêtre.
Nous allons maintenant créer la page permettant :
  • d'indiquer les paramètres de cette requête,
  • d'exécuter cette requête,
  • d'afficher le résultat de la requête.
Création de la page proposant la recherche multicritère

Création d'une page

  • Pour créer une page affichant le résultat de la recherche multicritère :
    1. Créez une nouvelle page 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 "Page" puis sur "Page".
      • L'assistant de création d'une page s'affiche.
      • Dans la zone "Basée sur un modèle du projet", choisissez "PAGEMOD_Simple" et validez l'assistant.
    2. La fenêtre de sauvegarde de la page est affichée.
    3. Saisissez le titre "Recherche multicritère". Le nom "PAGE_Recherche_multicritere" est automatiquement proposé.
    4. Validez.

Création des champs de paramétrage des critères et affichage du résultat

Nous allons tout d'abord créer un champ Table basé sur la requête puis créer les différents champs qui permettront à l'utilisateur de sélectionner les critères de recherche.
Création du champ Table
  • Pour créer le champ Table affichant le résultat de la recherche :
    1. Créez un champ Table : sous le volet "Création", dans le groupe "Données", déroulez "Table" et sélectionnez "Table simple".
    2. Cliquez dans la page "PAGE_Recherche_multicritere" : l'assistant de création du champ Table se lance.
    3. Le champ Table va être basé sur la requête "REQ_RechercheCommandes" (que nous avons créée précédemment). Sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante". Passez à l'étape suivante de l'assistant.
    4. Sélectionnez la requête qui sera la source de données du champ Table :
      • Déroulez le groupe "Requêtes".
      • Sélectionnez la requête "REQ_RechercheCommandes".
        Assistant de création du champ Table - Sélection de la source des données
      • Passez à l'étape suivante de l'assistant.
      • Sélectionnez toutes les rubriques proposées : elles seront toutes affichées dans le champ Table.
        Assistant de création du champ Table - Sélection des rubriques à afficher
        Passez à l'étape suivante de l'assistant.
    5. Conservez les options par défaut dans les différents écrans de l'assistant et validez la création du champ Table.
    6. Le champ Table est automatiquement créé dans la page.
    7. Si nécessaire, modifiez la position du champ Table pour qu'il apparaisse entièrement dans la page.
      Champ Table sous l'éditeur de pages
  • Pour plus de lisibilité, nous allons modifier la description du champ Table.
    1. Affichez la description du champ Table (double-cliquez sur le champ).

      Note

      La fenêtre de description d'un champ Table est composée de deux zones :
      • la zone supérieure présentant le nom du champ, des colonnes et leur type.
      • la zone inférieure composée des différents onglets de description.
        Fenêtre de description d'un champ Table
      Si le nom du champ Table est sélectionné, la partie inférieure présente les caractéristiques du champ Table.
      Si une colonne est sélectionnée, la partie inférieure présente les caractéristiques des colonnes.
    2. Cliquez sur le nom du champ Table. Dans la partie basse, le libellé du champ Table est affiché. Nous allons modifier ce libellé. Remplacez le libellé proposé par "Résultats de la recherche".
      Modification du libellé du champ Table
    3. Cliquez sur la colonne "COL_IDCommande". Le titre de la colonne apparaît dans la partie basse de l'écran. Remplacez le libellé "Identifiant de la commande" par "ID".
      Modification du titre de la colonne COL_IDCommande
    4. Cliquez sur la colonne "COL_NomComplet". Remplacez le libellé "Nom" par "Client".
    5. Cliquez sur la colonne "COL_Libellé". Remplacez le libellé "Libellé" par "Mode de règlement".
    6. Validez la fenêtre de description du champ Table. Le champ est automatiquement mis à jour avec les changements effectués.
    7. Diminuez la taille de la colonne "ID" afin que toutes les colonnes apparaissent dans le champ Table.
    8. Agrandissez la taille des colonnes Client et Mode de règlement du champ Table.
      Champ Table sous l'éditeur de pages
    9. Enregistrez la page en cliquant sur Enregistrer un élément parmi les boutons d'accès rapide. Nous allons vérifier les tailles des colonnes en exécutant la page.

Note

Live Data et champs basés sur des requêtes
Le Live data n'est pas affiché dans les champs utilisant une requête comme source de données pour la raison suivante : les données affichées dépendent du résultat de la requête et ne peuvent être connues qu'en exécution.
  • Nous allons faire un premier test de cette page :
    1. Cliquez sur Tester un élément parmi les boutons d'accès rapide.
    2. Seules les commandes réglées en espèces et dont le prix est compris entre 150 et 300 euros s'affichent, comme lors du dernier test de la requête réalisé sous l'éditeur, lorsque nous avions spécifié les paramètres dans la fenêtre de test de la requête.
      Champ Table en exécution
    3. Fermez le navigateur pour revenir sous l'éditeur.
  • Regardons les événements associés au champ Table :
    1. Sélectionnez le champ Table et utilisez la touche F2.
    2. L'événement "Initialisation de TABLE_REQ_RechercheCommandes" contient le code suivant :
      // Le champ utilise une requête paramétrée pour afficher ses données.
      // Les paramètres de cette requête doivent être définis avant ou
      // lors de l'initialisation du champ.
      // La requête sera exécutée automatiquement si au moins un paramètre a été défini.
      //
      // Pour plus d'informations, veuillez consulter l'aide :
      // Requête paramétrée, Utilisation dans un champ Table, un champ Liste ou un champ Combo
      //
      // Paramètres de la requête 'REQ_RechercheCommandes'
      //MaSource.ParamNomClient = <Valeur du paramètre ParamNomClient>
      //MaSource.ParamEtat = <Valeur du paramètre ParamEtat>
      MaSource.ParamIDModeRèglement = "1"
      MaSource.ParamPrixMin = "150"
      MaSource.ParamPrixMax = "300"

      Les paramètres de test ont été récupérés comme paramètres par défaut pour l'exécution. Nous allons maintenant modifier la page pour que les paramètres soient saisis par l'utilisateur, à l'aide de champs.
    3. Pour construire notre page, nous allons passer toutes les lignes de code correspondant aux paramètres en commentaire :
      • Sélectionnez les 3 lignes de code "MaSource ...".
      • Utilisez la combinaison de touches Ctrl + / du pavé numérique.
      • Les lignes de code passent en commentaires.
    4. Fermez l'éditeur de code (utilisez la croix en haut à droite de l'éditeur).
Nous allons maintenant créer dans notre page les différents champs permettant à l'utilisateur de sélectionner les différents paramètres de la requête. Ces champs vont être placés au-dessus du champ Table.
  • Si nécessaire, déplacez le champ Table dans la page et diminuez sa hauteur afin de laisser de l'espace pour créer les différents champs de sélection des critères.
Premier paramètre : Nom du client
Pour que l'utilisateur puisse saisir un nom de client à chercher, nous allons créer un champ de saisie.
  • Pour créer le champ de saisie :
    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 "Site_WEBDEV_Complet" apparaissent dans le volet.
    2. Cliquez sur l'icône Flèche à gauche du fichier de données "Client" : les rubriques du fichier de données sont listées.
    3. Sélectionnez la rubrique "NomComplet" présente dans le fichier de données Client et réalisez un "Drag and Drop" de cette rubrique vers la page "PAGE_Recherche_multicritere".
    4. Le champ de saisie est automatiquement créé. Positionnez ce champ au-dessus du champ Table.
      Création du champ de saisie 'Nom'
  • Nous allons maintenant passer la valeur saisie dans le champ de saisie en paramètre à la requête :
    1. Sélectionnez le champ Table et utilisez la touche F2.
    2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
      //MaSource.ParamNomClient = <Valeur du paramètre ParamNomClient>
      par :
      MaSource.ParamNomClient = SAI_NomComplet

      Dans ce code, SAI_NomComplet est le nom du champ de saisie que nous venons de créer. La valeur de ce champ est associée au paramètre ParamNomClient attendu par la requête.
    3. Fermez l'éditeur de code.
  • Avant de tester, nous allons créer un champ Bouton pour ré-afficher le contenu du champ Table en fonction de la valeur sélectionnée dans le champ Sélecteur :
    1. Créez un champ Bouton :
      • sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton.
      • cliquez ensuite dans la page, en haut à droite.
    2. Modifiez le libellé du champ (utilisez la touche Entrée du clavier). Le nouveau libellé est "Rechercher".
    3. Modifiez le style du champ :
      • Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Choisir un style WEBDEV".
      • Dans la fenêtre qui s'affiche, sélectionnez "Détails (Avec fond)".
        Choix du style
      • Validez (bouton "OK").
    4. Redimensionnez le champ si nécessaire :
      • sélectionnez le champ.
      • dans le menu contextuel, sélectionnez l'option "Adapter la taille".
    5. Affichez le code associé à ce champ : appuyez sur la touche F2.
    6. Dans l'événement "Clic xxx (serveur)", saisissez le code suivant :
      TABLE_REQ_RechercheCommandes.Affiche(taInit)

      Dans ce code, la constante taInit permet de réexécuter l'événement "Initialisation" du champ Table (l'événement dans lequel les paramètres sont passés à la requête).
    7. Fermez l'éditeur de code.
  • Nous allons tester le passage du premier paramètre :
    1. Enregistrez la page en cliquant sur Enregistrer un élément parmi les boutons d'accès rapide.
    2. Cliquez sur Tester un élément parmi les boutons d'accès rapide.
    3. Dans la page qui s'affiche, saisissez le nom du client "GUENOT" puis cliquez sur le bouton "RECHERCHER". Le contenu du champ Table est modifié : toutes les commandes du client "GUENOT" sont affichées.
      Recherche d'un client selon son nom
    4. Fermez la page de test.
Second paramètre : Etat de la commande
Une commande peut avoir 3 états :
  • en attente,
  • validée,
  • annulée.
Dans notre analyse, l'état de la commande est enregistré dans la rubrique "Etat" présente dans le fichier de données "Commande". Cette rubrique est de type sélecteur.
Pour permettre à l'utilisateur de sélectionner un de ces trois états, nous allons utiliser le champ Sélecteur associé à la rubrique "Etat" du fichier de données "Commande".

Note

Les sélecteurs d'options sont également appelés "cases d'options". Ils permettent de sélectionner une option et une seule, parmi celles proposées.
Comment différencier le sélecteur et l'interrupteur ?
  • Le sélecteur permet de sélectionner une seule option.
  • L'interrupteur permet de sélectionner plusieurs options.
  • Pour créer le champ Sélecteur :
    1. Dans le volet "Analyse", cliquez sur l'icône Flèche à gauche du fichier de données "Commande" : les rubriques du fichier de données sont listées.
    2. Sélectionnez la rubrique "Etat" présente dans le fichier de données Commande et réalisez un "Drag and Drop" de cette rubrique vers la page "PAGE_Recherche_multicritere".
    3. Le champ Sélecteur est automatiquement créé. Positionnez ce champ au-dessus du champ Table.
      Création du champ Sélecteur
  • Nous allons maintenant utiliser la valeur sélectionnée dans le champ Sélecteur pour la passer en paramètre à la requête :
    1. Affichez les événements associés au champ Table :
      • Sélectionnez le champ Table.
      • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Code".
    2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
      //MaSource.ParamEtat = <Valeur du paramètre ParamEtat>
      par :
      MaSource.ParamEtat = SEL_Etat

      Dans ce code, SEL_Etat est le nom du champ Sélecteur que nous venons de créer. La valeur de ce champ est associée au paramètre ParamEtat attendu par la requête.
    3. Fermez l'éditeur de code.
  • Nous allons tester le passage des deux premiers paramètres :
    1. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    2. Saisissez le nom "GUENOT" et sélectionnez "En attente".
    3. Cliquez sur le bouton "RECHERCHER" : seules les commandes de GUENOT en attente de paiement sont listées.
      Commande d'un client selon son nom et l'état de ses commandes
  • Dans cet exemple, seules les commandes d'un client dans un état spécifique peuvent être listées. Il peut être également intéressant de lister toutes les commandes d'un client quel que soit leur état. Nous allons modifier notre page pour réaliser ce traitement.
    Pour gérer ce cas, nous allons :
    • Ajouter un état supplémentaire afin d'afficher toutes les commandes,
    • Gérer l'état supplémentaire.
  • Fermez le navigateur.
  • Pour ajouter une option dans le champ Sélecteur :
    1. Sélectionnez le champ Sélecteur précédemment créé.
    2. Affichez la fenêtre de description du champ (double-cliquez sur le champ par exemple).
    3. Dans l'onglet "Contenu", dans la liste des options, insérez l'option "Toutes les commandes" en haut de la liste :
      • Appuyez sur le bouton "+".
      • Saisissez "Toutes les commandes".
      • Utilisez la flèche vers le haut (à droite) pour remonter l'option.
        Options du champ Sélecteur
    4. Validez la fenêtre de description du champ.
    5. Agrandissez le champ sous l'éditeur pour que toutes les options soient affichées (déplacez le champ Table si nécessaire).
  • La nouvelle option "Toutes les commandes" revient à ne pas prendre en compte le paramètre "ParamEtat" de la requête. Pour ne pas prendre en compte un paramètre de la requête, il suffit d'affecter la valeur NULL à ce paramètre. Nous allons gérer ce cas pour le paramètre ParamEtat.
    1. Sélectionnez le champ Table sous l'éditeur et affichez ses événements (touche F2 ou option "Code" du menu contextuel du champ).
    2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
      MaSource.ParamEtat = SEL_Etat
      par :
      SELON SEL_Etat
      // Toutes les commandes
      CAS 1
      MaSource.ParamEtat = Null
      AUTRE CAS
      MaSource.ParamEtat = SEL_Etat-1
      FIN

      Dans ce code, si le champ SEL_Etat correspond à 1 (cas de l'option "Toutes les commandes"), le paramètre de la requête associée a pour valeur "NULL". Dans le cas contraire, le paramètre a pour valeur le numéro de l'option sélectionnée moins 1 (qui correspond à l'option que nous avons ajoutée).
    3. Fermez l'éditeur de code.
  • Nous allons tester immédiatement notre page.
    1. Enregistrez la page en cliquant sur Enregistrer un élément parmi les boutons d'accès rapide.
    2. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    3. Saisissez le nom "GUENOT" et sélectionnez "Toutes les commandes".
    4. Cliquez sur le bouton "RECHERCHER" : toutes les commandes de GUENOT quel que soit leur état sont listées.
      Recherche d'un client selon son nom et l'état de ses commandes
    5. Fermez le navigateur.
Troisième paramètre : Mode de règlement
Une commande peut avoir plusieurs modes de règlement : espèces, chèques, etc. Les différents modes de règlement possibles sont stockés dans le fichier de données "ModeRèglement".
Nous allons utiliser un champ Combo basé sur ce fichier de données pour permettre à l'utilisateur de sélectionner le mode de règlement voulu.

Note

Le champ "Combo" permet d'afficher une liste d'éléments et de sélectionner un élément dans cette liste.
A la différence d'une liste, une combo n'affiche qu'un élément à la fois : lors d'un clic sur le champ, la combo se déroule et propose de sélectionner un autre élément. Un seul élément est sélectionné.
Les éléments apparaissant dans une combo peuvent être déterminés lors de la création du champ sous l'éditeur. Ces éléments :
  • sont déterminés par programmation.
  • proviennent d'un fichier de données ou d'une requête.


  • Pour créer un champ Combo :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Combo".
    2. Cliquez dans la fenêtre à l'emplacement où le champ doit être créé (par exemple à côté du sélecteur précédemment créé).
    3. L'assistant de création du champ Combo se lance.
    4. Sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante" et passez à l'étape suivante.
    5. Sélectionnez le fichier de données "ModeRèglement" et passez à l'étape suivante.
    6. La rubrique à afficher dans le champ Combo est "Libellé". Sélectionnez "Libellé".
      Passez à l'étape suivante.
    7. Sélectionnez la clé de parcours : "Libellé".
      Passez à l'étape suivante.
    8. Sélectionnez la valeur de retour "IDModeRèglement". Cette valeur de retour est très importante car c'est elle qui sera passée en paramètre à la requête.
      Passez à l'étape suivante.
    9. Conservez les options par défaut dans les différentes étapes de l'assistant et validez la création du champ Combo.
    10. Le champ Combo est automatiquement créé dans la page.
  • Modifiez le libellé du champ Combo (utilisez la touche Entrée du clavier). Le nouveau libellé est "Mode de règlement".
    Modification du libellé du champ
  • Nous allons maintenant utiliser la valeur sélectionnée dans le champ Combo en paramètre à la requête :
    1. Affichez les événements associés au champ Table : sélectionnez le champ Table et utilisez la touche F2.
    2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
      //MaSource.ParamIDModeRèglement = 1
      par :
      MaSource.ParamIDModeRèglement = COMBO_Mode_de_Règlement

      Dans ce code, COMBO_Mode_de_Règlement est le nom du champ Combo que nous venons de créer. La valeur de retour de ce champ est associée au paramètre ParamIDModeRèglement attendu par la requête.
    3. Fermez l'éditeur de code.
    4. Enregistrez la page (Enregistrer un élément ou Ctrl + S).
  • Nous allons à nouveau tester le passage des paramètres :
    1. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    2. Saisissez le nom "GUENOT".
    3. Changez l'état des commandes grâce au sélecteur et modifiez le mode de règlement grâce au champ Combo, puis cliquez sur le bouton "RECHERCHER". Le contenu du champ Table est modifié.
      Commandes d'un client selon son nom et l'état de ses commandes
    4. Fermez le navigateur.
Dernier paramètre : Montant de la commande
Le dernier paramètre de la requête correspond au montant de la commande pris en compte. Nous avons un paramètre qui correspond au montant minimum et un paramètre qui correspond au montant maximum. Au niveau de l'interface, l'utilisateur doit pouvoir saisir un intervalle de prix. Nous allons utiliser pour cela un champ Potentiomètre d'intervalle.

Note

Un champ Potentiomètre d'intervalle est un champ graphique, facilement intégrable dans un site WEBDEV qui permet de sélectionner de manière simple les bornes d'un intervalle (valeur de début et valeur de fin).
  • Pour gérer le prix du produit :
    1. Sous le volet "Création", dans le groupe "Champs graphiques", déroulez "Potentiomètre" et sélectionnez le potentiomètre "Fourchette de prix".
      Création du champ Potentiomètre
    2. Cliquez dans la page, entre le champ "Mode de règlement" et le bouton "RECHERCHER". Le potentiomètre d'intervalle est automatiquement créé.
      Création du champ Potentiomètre
  • Le champ que nous venons de créer est un champ avancé, constitué du potentiomètre et de deux champs affichant les bornes. Toute la programmation pour afficher les bornes est déjà réalisée dans le champ. Nous allons juste initialiser le champ Potentiomètre pour qu'il propose les bornes correspondant aux données présentes dans le fichier de données Commande.
    1. Sélectionnez le champ Potentiomètre et affichez ses événements (touche F2).
    2. Dans l'événement "Initialisation" du champ, insérez le code suivant (avant les lignes de code existantes) :
      // La valeur inférieure est le montant le moins cher
      Commande.LitPremier(TotalTTC)
      MoiMême.BorneMin = Commande.TotalTTC
      MoiMême.ValeurInférieure = MoiMême.BorneMin
       
      // La valeur supérieure est le montant le plus cher
      Commande.LitDernier(TotalTTC)
      MoiMême.BorneMax = Commande.TotalTTC
      MoiMême.ValeurSupérieure = MoiMême.BorneMax

      Examinons ce code :
      • La fonction <Fichier de données>.LitPremier permet de lire le premier enregistrement du fichier de données "Commande" selon la clé de parcours définie, ici TotalTTC. Cette fonction va donc permettre de lire l'enregistrement correspondant au montant le plus bas.
      • Le montant lu dans l'enregistrement est ensuite associé à la borne minimale du champ Potentiomètre ainsi qu'à sa valeur inférieure.
        • La borne minimale permet d'indiquer la valeur minimum que l'utilisateur pourra sélectionner.
        • La valeur inférieure permet d'indiquer la valeur minimum actuellement sélectionnée.
      • Pour trouver le montant le plus élevé, le principe est le même. La seule différence est le nom de la fonction utilisée : <Fichier de données>.LitDernier. Cette fonction va permettre de lire le dernier enregistrement du fichier de données Commande selon le montant, c'est-à-dire l'enregistrement correspondant au montant le plus élevé.
    3. Fermez la fenêtre de code.
  • Nous allons maintenant passer les montants sélectionnés en paramètre à la requête :
    1. Affichez les événements associés au champ Table : sélectionnez le champ Table et appuyez sur la touche F2.
    2. Dans l'événement "Initialisation" du champ Table, remplacez les lignes :
      //MaSource.ParamPrixMin = "1500"
      //MaSource.ParamPrixMax = "3000"

      par :
      MaSource.ParamPrixMin = POTI_Budget.ValeurInférieure
      MaSource.ParamPrixMax = POTI_Budget.ValeurSupérieure

      Dans ce code, les paramètres correspondant aux prix sont égaux à la valeur inférieure et supérieure du potentiomètre.
    3. Fermez l'éditeur de code.
    4. Enregistrez la page (Enregistrer l'élément ou Ctrl + S).
  • Nous allons tester le passage des paramètres :
    1. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    2. Définissez les différents paramètres de la recherche :
      • Nom du client,
      • Etat,
      • Mode de règlement,
      • Montant.
    3. Cliquez sur le bouton "RECHERCHER". Le contenu du champ Table est modifié.
      Recherche avec utilisation du potentiomètre
    4. Fermez le navigateur.
Optimisation de l'affichage de la page
Par défaut, lors du clic sur le bouton "Rechercher", tout le contenu de la page est renvoyé par le serveur.
Pour optimiser l'affichage de la page, il est possible d'activer le mode Ajax sur ce bouton. Dans notre exemple, seul le contenu du champ Table sera renvoyé par le serveur.

Note

Pour utiliser la technologie Ajax dans un site, WEBDEV offre plusieurs possibilités :
  • Ajax en un clic : il suffit de cliquer dans l'éditeur de code pour transformer un événement en événement Ajax.
  • Champs Ajax (champ Table, champ Zone répétée). Les champs Ajax permettent d'afficher des données chargées dynamiquement depuis le serveur. Plus besoin de tout télécharger d'un coup !
  • Ajax par programmation à l'aide de fonctions WLangage spécifiques : AjaxExécute et AjaxExécuteAsynchrone.
  • Pour mettre en place le mode Ajax sur le bouton "Rechercher" :
    1. Sélectionnez le bouton "Rechercher" et affichez ses événements (touche F2).
    2. Dans l'événement "Clic xxx (serveur)" du bouton, le lien AJAX apparaît barré dans le bandeau du code.
      Ajax non activé
    3. Cliquez sur le lien AJAX : le lien "AJAX activé" apparaît, indiquant que l'événement est automatiquement transformé en un événement Ajax.
      Ajax activé
    4. Fermez l'éditeur de code.
  • Testez la page :
    1. Cliquez sur Tester une page parmi les boutons d'accès rapide.
    2. Définissez les différents paramètres de la recherche :
      • Nom du client,
      • Etat,
      • Mode de règlement,
      • Montant.
    3. Cliquez sur le bouton "Rechercher". Seul le contenu du champ Table est ré-affiché.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 22/05/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale