PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • 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 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.
Nous allons reprendre le projet "Site_WEBDEV_Complet" que nous avons manipulé dans les parties 3 et 4.
  • Si vous n'avez pas ouvert le projet "Site_WEBDEV_Complet" dans la leçon précédente :
    1. Si nécessaire, fermez le projet en cours pour faire apparaître la fenêtre de bienvenue.
    2. Dans la fenêtre de bienvenue, cliquez sur "Cours d'auto-formation" et sélectionnez "Site WEBDEV Complet (Avec pages)".

      Corrigé

      Un projet corrigé est disponible. Ce projet contient les différentes pages 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 "Site WEBDEV Complet".
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 "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'interface de la page "PAGE_Recherche_multicritere" sera la suivante :
Cette interface 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. Le champ Table listera les résultats de la recherche.
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 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'interface de l'éditeur de requêtes :
      Cette interface 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 "Commande", double-cliquez sur les rubriques : IDCommande, Date, Etat et TotalTTC.
      • les renseignements concernant le client ayant passé la commande. Dans le fichier "Client", double-cliquez sur la rubrique "NomComplet".
      • les renseignements concernant le mode de règlement de la commande. Dans le fichier "ModeRèglement", double-cliquez sur les rubriques "Libellé" et "IDModeRèglement".
      La fenêtre de description de la requête est la suivante :
    2. Nous allons trier les données par date.
      • Sélectionnez la rubrique "Commande.Date", puis cliquez sur le bouton "Trier" et sélectionnez l'option "Trier sur la rubrique sélectionnée".
      • 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.
    4. Donnez un nom à la requête : saisissez "REQ_RechercheCommandes" à la place de "REQ_SansNom1" dans la zone "Nom de la requête" :
    5. Validez la fenêtre de description de la requête (bouton vert en bas de l'écran).
    6. Validez la fenêtre de sauvegarde de la requête.
    7. La représentation graphique de la requête est affichée :

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 .
  2. Le résultat s'affiche dans une fenêtre :

    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 XLS (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").
  • 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" 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 :
      • Sélectionnez "Contient".
      • Cochez "au paramètre".
      • Indiquez le nom du paramètre : "pNomClient".

        Note

        Nous vous conseillons de préfixer les paramètres des requêtes par "p". 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 ‘p' 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.

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.
  • 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 :
      • Sélectionnez "Est égal à".
      • Sélectionnez "au paramètre".
      • Indiquez le nom du paramètre : "pEtat".
    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 () 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 : "pIDModeRèglement".
    3. Validez la définition de la condition de sélection.
  • 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 : "pPrixMin".
    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 : "pPrixMax".
    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.
    9. Enregistrez la requête en cliquant sur 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 .
    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 pNomClient 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.
    3. Saisissez les données suivantes :
      • Décochez les paramètres pNomClient et pEtat.
      • Sélectionnez le paramètre pIDModeRèglement. Dans la partie basse de l'écran, saisissez "1".
      • Sélectionnez le paramètre pPrixMin. Dans la partie basse de l'écran, saisissez "1500".
      • Sélectionnez le paramètre pPrixMax. Dans la partie basse de l'écran, saisissez "3000".
    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 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".
    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 les 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".
      • Passez à l'étape suivante de l'assistant.
      • Sélectionnez toutes les rubriques proposées : elles seront toutes affichées dans le champ Table. 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.
  • 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.
      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".
    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".
    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.
    9. Enregistrez la page en cliquant sur 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 parmi les boutons d'accès rapide.
    2. Seules les commandes réglées en espèces et dont le prix est compris entre 1500 et 3000 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.
    3. Fermez le navigateur pour revenir sous l'éditeur.
  • Regardons les traitements associés au champ Table :
    1. Sélectionnez le champ Table et utilisez la touche F2.
    2. Le traitement "Initialisation de TABLE_REQ_RechercheCommandes" contient le code suivant :
      //MaSource.pNomClient = <Valeur du paramètre pNomClient>
      //MaSource.pEtat = <Valeur du paramètre pEtat>
      MaSource.pIdModeRèglement = "1"
      MaSource.pPrixMin = "1500"
      MaSource.pPrixMax = "3000"

      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 lignes de code "MaSource ...".
      • Utilisez la combinaison de touches Ctrl + [/ du pavé numérique].
    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 "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
      à gauche du fichier "Client" : les rubriques du fichier de données sont listées.
    3. Sélectionnez la rubrique "NomComplet" présente dans le fichier Client et réalisez un "Drag and Drop" de cette rubrique vers la fenêtre "PAGE_Recherche_multicritere".
    4. Le champ de saisie est automatiquement créé. Positionnez ce champ au-dessus du champ Table.
  • 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 le traitement d'initialisation du champ Table, remplacez la ligne :
      //MaSource.pNomClient = <Valeur du paramètre pNomClient>
      par
      MaSource.pNomClient = 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 pNomClient attendu par la requête.
    3. Fermez l'éditeur de code.
  • Avant de tester, nous allons créer un 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 .
      • 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 "BTN Détails (Avec fond)" et validez.
    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 le traitement "Clic (serveur)", saisissez le code suivant :
      // Actualise l'affichage du champ Table
      TableAffiche(TABLE_REQ_RechercheCommandes, taInit)

      Dans ce code, la constante taInit permet de réexécuter le traitement d'initialisation du champ Table (le traitement 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 parmi les boutons d'accès rapide.
    2. Cliquez sur 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.
    4. Fermez la page de test.
Second paramètre : Etat de la commande
Une commande peut avoir 3 états :
  • en attente,
  • payé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 "+" à gauche du fichier "Commande" : les rubriques du fichier de données sont listées.
    2. Sélectionnez la rubrique "Etat" présente dans le fichier Commande et réalisez un "Drag and Drop" de cette rubrique vers la fenêtre "PAGE_Recherche_multicritere".
    3. Le champ Sélecteur est automatiquement créé. Positionnez ce champ au-dessus du champ Table.
  • Nous allons maintenant utiliser la valeur sélectionnée dans le champ Sélecteur en paramètre à la requête :
    1. Affichez les traitements associés au champ Table :
      • Sélectionnez le champ Table.
      • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Code".
    2. Dans le traitement d'initialisation du champ Table, remplacez la ligne :
      //MaSource.pEtat = <Valeur du paramètre pEtat>
      par
      MaSource.pEtat = 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 pEtat attendu par la requête.
    3. Fermez l'éditeur de code.
  • Nous allons tester le passage des deux premiers paramètres :
    1. Cliquez sur 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.
  • 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 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.
    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 "pEtat" 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 pEtat.
    1. Sélectionnez le champ Table sous l'éditeur et affichez ses traitements (touche F2 ou option "Code" du menu contextuel du champ).
    2. Dans le traitement d'initialisation du champ Table, remplacez la ligne :
      MaSource.pEtat = SEL_Etat
      par
      SELON SEL_Etat
      // Toutes les commandes
      CAS 1
      MaSource.pEtat = Null
      AUTRE CAS
      MaSource.pEtat = 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 parmi les boutons d'accès rapide.
    2. Cliquez sur 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.
    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, ... 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 les 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érents écrans 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".
  • Nous allons maintenant utiliser la valeur sélectionnée dans le champ Combo en paramètre à la requête :
    1. Affichez les traitements associés au champ Table : sélectionnez le champ Table et utilisez la touche F2.
    2. Dans le traitement d'initialisation du champ Table, remplacez la ligne :
      //MaSource.pIDModeRèglement = 1
      par
      MaSource.pIDModeRèglement = COMBO_ModeRèglement

      Dans ce code, COMBO_ModeRè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 pIDModeRèglement attendu par la requête.
    3. Fermez l'éditeur de code.
    4. Enregistrez la page ( ou Ctrl + S).
  • Nous allons à nouveau tester le passage des paramètres :
    1. Cliquez sur 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é.
    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 d'intervalle avec les prix.
    2. Cliquez dans la page, entre le champ "Mode de règlement" et le bouton "Rechercher". Le potentiomètre d'intervalle est automatiquement créé.
  • 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 traitements (touche F2).
    2. Dans le traitement d'initialisation du champ, insérez le code suivant (avant les lignes de code existantes) :
      // La valeur inférieure est le montant le moins cher
      HLitPremier(Commande,TotalTTC)
      MoiMême..BorneMin = Commande.TotalTTC
      MoiMême..ValeurInférieure = MoiMême..BorneMin

      // La valeur supérieure est le montant le plus cher
      HLitDernier(Commande, TotalTTC)
      MoiMême..BorneMax = Commande.TotalTTC
      MoiMême..ValeurSupérieure = MoiMême..BorneMax

      Examinons ce code :
      • La fonction HLitPremier permet de lire le premier enregistrement du fichier "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 : HLitDernier, qui va permettre de lire le dernier enregistrement du fichier Commande selon le montant, c'est-à-dire 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 traitements associés au champ Table : sélectionnez le champ Table et appuyez sur la touche F2.
    2. Dans le traitement d'initialisation du champ Table, remplacez les lignes :
      //MaSource.pPrixMin = "1500"
      //MaSource.pPrixMax = "3000"

      par :
      MaSource.pPrixMin = POTI_SansNom2..ValeurInférieure
      MaSource.pPrixMax = POTI_SansNom2..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 ( ou Ctrl + S).
  • Nous allons tester le passage des paramètres :
    1. Cliquez sur 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é.
    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 traitement en traitement 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 traitements (touche F2).
    2. Dans le traitement de clic serveur du bouton, le lien AJAX apparaît barré dans le bandeau du code.
    3. Cliquez sur le lien AJAX : le lien "AJAX activé" apparaît, indiquant que le traitement est automatiquement transformé en un traitement Ajax.
    4. Fermez l'éditeur de code.
  • Testez la page :
    1. Cliquez sur 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 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire