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 produits
  • Création de la requête
  • Test de la requête
  • Ajout d'une condition de sélection
  • Test de la requête paramétrée
  • Création de l'interface
  • Création de la fenêtre
  • Gestion de la recherche
  • Améliorations de la fenêtre
  • Gestion du "Pull to refresh"
  • Utilisation d'un menu coulissant
Leçon 5.4. Fenêtre avec recherche
Ce que vous allez apprendre dans cette leçon
  • Création d'une requête paramétrée.
  • Création d'une fenêtre via l'assistant.
  • Mise en place de la recherche.
  • Gestion du "Pull to refresh".
  • Ajout d'un menu coulissant.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Nous avons vu dans la leçon 5.2 comment créer une fenêtre listant les produits dans une zone répétée.
Nous allons faire une fenêtre sur le même principe mais proposant une recherche sur le nom du produit :
  • la fenêtre affiche la liste des produits dans une zone répétée.
  • lorsque l'utilisateur saisit le nom d'un produit dans la zone de recherche, la zone répétée affiche uniquement les produits correspondants.
Dans notre exemple, cette recherche se fera sur le fichier "Produit".
L'interface de la fenêtre "FEN_Menu" sera la suivante :
Pour réaliser cette fenêtre, nous allons :
  • Créer la requête de sélection des enregistrements du fichier Produit.
  • Créer et paramétrer la fenêtre de recherche.

Note

Qu'est-ce qu'une requête de sélection ?
Une requête de sélection est une requête qui va "choisir" 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é.

Corrigé

Si vous n'avez pas créé l'application "WM Gestion Produits" dans la partie précédente :
  • un projet intermédiaire est disponible. Ce projet contient les fenêtres créées dans les parties précédentes. Ce projet permet de suivre cette leçon et de réaliser les nouvelles fenêtres.
    Pour ouvrir ce projet, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'auto-formation" puis sélectionnez "Application iOS/Android (avec fenêtres)".
  • un projet corrigé est disponible. Ce projet contient toutes les fenêtres créées dans cette partie et vous permet de vérifier vos manipulations.
    Pour ouvrir ce projet, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'auto-formation" puis sélectionnez "Application iOS/Android (Corrigé)".
Création de la requête pour rechercher les produits

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 de requêtes 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.
    4. Donnez un nom et un libellé à votre requête : saisissez "REQ_Produits" à la place de "REQ_SansNom1" dans la zone "Nom de la requête" et "Recherche de produits sur le nom" dans la zone "Libellé" :
  • Nous allons construire la requête en sélectionnant les éléments que nous voulons dans le résultat.
    1. La requête doit permettre d'afficher les caractéristiques du produit sélectionné :
      • Sélectionnez le fichier "Produit" dans la zone "Analyse" de la fenêtre.
      • Cliquez sur la flèche pour sélectionner toutes les rubriques du fichier dans la requête.
    2. La fenêtre de description de la requête est la suivante :
    3. Validez la fenêtre de description de la requête (bouton vert).
    4. La représentation graphique de la requête est affichée et la fenêtre de sauvegarde de la requête apparaît.
    5. Validez les informations affichées.

Test de la requête

Comme tous les éléments d'un projet WINDEV Mobile, 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 :
    Le résultat affiché liste TOUS les produits.
    Dans notre cas, nous souhaitons afficher uniquement les produits correspondant au critère de recherche, le nom du produit. Pour cela, il est nécessaire d'utiliser une requête paramétrée.
  3. Fermez la fenêtre.

Ajout d'une condition de sélection

Dans notre exemple, l'utilisateur va pouvoir sélectionner une valeur pour le nom du produit. Nous devons modifier la requête afin que ce critère de recherche corresponde à un paramètre de la requête.
  • Pour définir un paramètre 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 produit" :
    1. Sélectionnez au centre de la fenêtre la rubrique Produit.Nom.
    2. Affichez le menu contextuel et sélectionnez l'option "Condition de sélection .. 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".
      • Sélectionnez "au paramètre".
      • Conservez le nom du paramètre automatiquement proposé : "paramNom".
    4. Validez la fenêtre de description de la condition. Le chiffre "1" apparaît à droite de la rubrique "Produit.Nom", indiquant qu'une condition de sélection a été définie.
    5. Validez la fenêtre de description de la requête.
    6. Le graphe de la requête est modifié pour prendre en compte la condition de sélection que nous avons définie.
    7. 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.
    3. Sélectionnez le paramètre ParamNom. Dans la partie basse de la fenêtre, saisissez "Polo".
    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 l'interface de notre fenêtre basée sur cette requête.
Création de l'interface
Nous allons créer la fenêtre de recherche grâce à l'assistant de création de fenêtres.

Note

L'assistant de création de fenêtres propose de nombreuses fenêtres prédéfinies. Ces fenêtres proposent des interfaces modernes pour vos applications.
La plupart de ces fenêtres peuvent être générées à partir de vos données.

Création de la fenêtre

  • Pour créer la fenêtre de recherche :
    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 "Fenêtre" puis sur "Fenêtre".
    2. Dans l'assistant, choisissez "Zone répétée" et validez.
    3. L'assistant de création d'une fenêtre se lance.
    4. Choisissez la plateforme à utiliser : "Téléphone Android générique". Passez à l'étape suivante de l'assistant.
    5. L'assistant propose de choisir la source des données associée à la fenêtre. Dans notre cas, il s'agit d'une requête :
      • Cliquez sur "Requêtes".
      • Sélectionnez la requête que nous venons de créer : "REQ_Produits".
    6. Passez à l'étape suivante.
    7. Sélectionnez le style de la zone répétée : "Image + Titre + Libellé dessous". Passez à l'étape suivante.
    8. L'assistant propose automatiquement les rubriques de la requête correspondant à la zone répétée générée. Conservez les options proposées et passez à l'étape suivante.
    9. Conservez la rubrique de tri proposée par défaut "Nom". Passez à l'étape suivante.
    10. L'assistant propose plusieurs options pour la génération de la fenêtre de type Zone répétée. Dans notre exemple, conservez les options par défaut. Passez à l'étape suivante.
    11. Donnez un titre et un nom à la fenêtre générée. Dans notre cas :
      • Pour le titre, saisissez "Produits".
      • Pour le nom, saisissez "FEN_Liste_des_produits_Avancé".
    12. Validez l'assistant. La fenêtre est automatiquement créée, affichée sous l'éditeur et enregistrée.
  • Nous allons maintenant modifier la fenêtre "FEN_Liste_des_produits_Avancé" pour afficher la fiche Produit que nous avons créée dans une leçon précédente.
    1. Faites un clic droit sur le champ Zone répétée puis sélectionnez l'option "Code".
      Attention : sélectionnez bien le champ Zone répétée et non un des champs qui le composent.
    2. Sous l'éditeur de code, dans la section de code "Initialisation de ...", saisissez le code suivant :
      REQ_Produits.ParamNom = Null
    3. Cette ligne de code permet d'initialiser la valeur du paramètre de la requête "REQ_Produits" utilisée par le champ Zone répétée. Par défaut, la valeur de ce paramètre vaut "Null" ce qui permet de ne pas prendre en compte le paramètre. Par défaut, tous les produits seront donc affichés dans la fenêtre.
    4. Sous l'éditeur de code, dans la section de code "Sélection d'une ligne ...", saisissez le code suivant :
      HLitRecherche(Produit,IDProduit,REQ_Produits.IDProduit)
      OuvreFenêtreMobile(FEN_Fiche_du_produit)
      Examinons ce code :
      • Le champ Zone répétée est basé sur la requête REQ_Produits. Lors de la sélection du produit dans la zone répétée, l'enregistrement sélectionné est celui de la requête.
      • Nous souhaitons lors du clic sur la ligne du champ ouvrir la fenêtre fiche que nous avons créée précédemment. Cette fenêtre est basée sur le fichier Produit.
      • Il est nécessaire de rechercher dans le fichier "Produit" l'enregistrement sélectionné par la requête afin de charger en mémoire le buffer des données sélectionnées. Cette opération est réalisée avec la fonction HLitRecherche.
      • La fenêtre fiche "FEN_Fiche_du_produit" est ensuite ouverte grâce à la fonction OuvreFenêtreMobile.
    5. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
    6. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
    7. Testez la fenêtre que nous venons de créer sous le simulateur ( parmi les boutons d'accès rapide).
    8. Cliquez sur un des produits : la fenêtre fiche s'affiche.
    9. Terminez le test.

Gestion de la recherche

Nous allons maintenant gérer la recherche. Pour cela, nous allons :
  • Autoriser la recherche dans l'Action Bar.
  • Créer un bouton de recherche dans l'Action Bar.
  • Pour autoriser la recherche dans l'Action Bar :
    1. Affichez si nécessaire la fenêtre "FEN_Liste_des_produits_Avancé" sous l'éditeur.
    2. Affichez la fenêtre de description de l'Action Bar (double-cliquez sur l'Action Bar).
    3. Dans l'onglet "Détail", cochez l'option "Autoriser la recherche dans l'Action Bar".
  • Pour créer un bouton de recherche dans l'Action Bar :
    1. Dans l'onglet "Général" de la fenêtre de description de l'Action Bar :
    2. Cliquez sur le numéro 2. L'interface de saisie d'une option de la barre d'outils apparaît.
    3. Cliquez sur le bouton "+" pour ajouter une option. Une nouvelle option par défaut est créée en haut à droite. Modifiez les caractéristiques de cette option :
      • Dans la zone "Libellé", saisissez "Rechercher".
      • Dans la zone "Image prédéfinie", déroulez la liste et sélectionnez "Rechercher".
      • Validez la fenêtre de description.
    4. Le code de cette option va permettre de rendre visible la zone de recherche. Pour saisir ce code :
      • Sélectionnez si nécessaire l'Action Bar de la fenêtre.
      • Cliquez sur le bouton de recherche.
      • Un menu déroulant avec l'option "Rechercher" apparaît.
      • Faites un clic droit sur l'option.
      • Dans le menu contextuel qui s'affiche, sélectionnez l'option "Code".
      • Dans le traitement "Sélection du menu", saisissez le code suivant :
        ActionBarRechercheVisible(Vrai)
    5. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
    6. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
    7. Sélectionnez l'Action Bar et affichez le code associé (touche F2 ou option "Code" du menu contextuel).
    8. Sous l'éditeur de code, dans la section de code "Validation de la recherche ...", saisissez le code suivant :
      REQ_Produits.ParamNom = ACTB_ActionBar..ValeurRecherche
      ZoneRépétéeAffiche(ZR_REQ_Produits,taRéExécuteRequete)
    9. Examinons ce code :
      • Le paramètre de la requête est initialisé avec la valeur de recherche saisie dans l'Action Bar.
      • Le champ Zone répétée est ensuite réaffiché grâce à la fonction ZoneRépétéeAffiche. La constante taRéExecuteRequete permet de réexécuter la requête de base du champ Zone répétée et donc de prendre en compte le nouveau paramètre.
    10. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
    11. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
    12. Vous pouvez également créer dans cette fenêtre un bouton d'ajout du produit. Nous avons déjà réalisé cette opération dans la leçon 5.2 paragraphe "Création d'un nouveau produit". Les opérations à effectuer sont identiques. Seul le code du bouton "+" est à adapter.
    13. Testez la fenêtre que nous venons de créer sous le simulateur ( parmi les boutons d'accès rapide).
      • Cliquez sur la loupe.
      • Saisissez "Polo" dans la zone de recherche.
      • Validez (touche ENTREE).
      • Seule la liste des produits contenant "Polo" s'affiche.
    14. Fermez le simulateur.
Améliorations de la fenêtre

Gestion du "Pull to refresh"

Nous allons ajouter une nouvelle fonctionnalité à notre fenêtre : la gestion du "Pull to refresh". Cette fonctionnalité permet à l'utilisateur de "tirer" un champ Table ou Zone répétée pour rafraîchir son contenu.
Lors de cette action, un bandeau de rafraîchissement apparaît automatiquement dans la zone découverte :
  • Le bandeau indique tout d'abord qu'il faut tirer pour rafraîchir.
  • Le bandeau indique ensuite qu'il faut relâcher pour rafraîchir.
  • Le bandeau indique que le rafraîchissement est en cours. Une jauge est affichée pendant la durée du rafraîchissement.
  • Le champ est mis à jour.
  • Pour utiliser la fonctionnalité "Pull to Refresh" :
    1. Affichez si nécessaire la fenêtre "FEN_Liste_des_produits_Avancé" sous l'éditeur.
    2. Sélectionnez le champ Zone répétée et affichez la fenêtre de description du champ.
    3. Dans l'onglet "Détail" de la fenêtre de description du champ, dans la zone "Déplacements et gestures", cochez l'option "Rafraîchissement par tirer/relâcher (Pull to refresh)".

      Note

      Il est possible d'utiliser une fenêtre interne spécifique pour gérer le "Pull to refresh". Dans cet exemple, nous utilisons la fenêtre par défaut.
      Pour plus de détails, consultez Pull to Refresh (Android/iOS).
    4. Validez la fenêtre de description du champ.
  • Le paramétrage du "Pull to refresh" a ajouté :
    • le bandeau de rafraîchissement qui sera affiché à l'utilisateur pendant l'opération.
    • le traitement "Rafraîchissement par tirer/relâcher" parmi les traitements du champ Zone répétée. Ce traitement est automatiquement appelé lors de la gesture de rafraîchissement. Nous allons maintenant modifier ce traitement pour gérer la mise à jour du champ.
  • Pour modifier le traitement "Rafraîchissement par tirer/relâcher" :
    1. Sélectionnez le champ Zone répétée et affichez les traitements associés (touche F2 par exemple).
    2. Sous l'éditeur de code, dans la section de code "Rafraîchissement par tirer/relâcher ...", saisissez le code suivant :
      ZoneRépétéeAffiche(ZR_REQ_Produits,taRéExécuteRequete)
    3. Comme nous l'avons vu précédemment pour la gestion de la recherche, la fonction ZoneRépétéeAffiche permet de réafficher le champ Zone répétée. La constante taRéExecuteRequete permet de réexécuter la requête de base du champ Zone répétée et donc de prendre en compte les nouveaux enregistrements saisis dans la base de données.
    4. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
    5. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
  • Testez la fenêtre que nous venons de modifier sous le simulateur ( parmi les boutons d'accès rapide).
    1. Cliquez en haut de la zone répétée avec la souris et déplacez la souris vers le bas.
    2. Relâchez la souris. La zone répétée se met à jour.
    3. Fermez le simulateur.
Cet exemple permet de comprendre la mise en place du "Pull to refresh".
Cette fonctionnalité peut être utilisée par exemple dans la même application en HFSQL Client/Serveur où d'autres utilisateurs mettraient à jour ou ajouteraient des produits. Ces modifications pourraient être affichées grâce au "Pull to refresh".

Utilisation d'un menu coulissant

Dans de nombreuses applications mobiles, le menu ne correspond pas à une fenêtre "statique". Il correspond plutôt à une fenêtre coulissante affichée via une option de l'Action Bar et/ou via un balayage de la fenêtre.
Nous allons modifier la fenêtre "FEN_Liste_des_produits_Avancé" pour lui ajouter un "sliding menu". Ce menu reprendra le champ Zone multiligne de la fenêtre "FEN_Menu" créée précédemment.
  • Pour gérer un menu coulissant, nous allons :
    • Créer une fenêtre interne. Cette fenêtre interne va contenir les options de menu.
    • Modifier la fenêtre "FEN_Liste_des_produits_Avancé" pour afficher le menu.

Note

Une fenêtre interne est une fenêtre simple sans Action Bar ou autres barres d'outils. Une fenêtre interne permet d'intégrer facilement un ensemble de champs dans une autre fenêtre.
  • Pour créer la fenêtre interne contenant le menu :
    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 "Fenêtre" puis sur "Fenêtre interne".
    2. La fenêtre interne est automatiquement ouverte sous l'éditeur.
    3. La fenêtre de sauvegarde de l'élément créé apparaît. Saisissez le nom de la fenêtre interne : "FI_ZML_Options".
    4. Validez.
    5. Affichez la fenêtre de description de la fenêtre interne (option "Description" du menu contextuel).
    6. Dans l'onglet "IHM", spécifiez les dimensions de cette fenêtre interne :
      • Largeur : celle que vous souhaitez. Elle doit être suffisante pour voir entièrement les champs du menu déroulant. En principe, le sliding menu doit être moins large que la fenêtre par-dessus laquelle il s'affiche (par exemple 260).
      • Hauteur : Cette hauteur doit correspondre à la hauteur de la fenêtre par-dessus laquelle le sliding menu s'affiche. Dans notre cas, cette hauteur est de 248.
    7. Validez.
    8. Enregistrez la fenêtre en cliquant sur parmi les boutons d'accès rapide.
  • Pour ajouter les options de menu dans la fenêtre interne :
    1. Ouvrez la fenêtre "FEN_Menu" précédemment créée (double-cliquez sur son nom dans l'explorateur de projet par exemple).
    2. Copiez les champs de la fenêtre "FEN_Menu" vers la fenêtre interne "FI_ZML_Options" :
      • Sélectionnez tous les éléments de la fenêtre "FEN_Menu" (Ctrl + A).
      • Copiez les éléments (Ctrl + C).
      • Affichez la fenêtre "FI_ZML_Options" (cliquez sur son nom dans la barre des éléments ouverts).
      • Collez les éléments (Ctrl + V).
    3. A l'aide des poignées de sélection, redimensionnez la largeur du champ Zone multiligne pour qu'il entre entièrement dans la fenêtre interne. Grâce aux ancrages, tous les champs présents dans le champ Zone multiligne sont également modifiés. Vous obtenez la fenêtre suivante :
  • Maintenant, il nous reste à modifier le code WLangage permettant d'ouvrir la liste des produits. En effet :
    • nous travaillons avec la fenêtre "FEN_Liste_des_produits_Avancé" et non plus "FEN_Liste_des_produits".
    • la fenêtre "FEN_Liste_des_produits_Avancé" contient le menu coulissant. L'option de menu "Liste des produits" ne doit donc pas ré-ouvrir cette fenêtre.
  • Nous allons changer le code de sélection du champ Zone multiligne.
    1. Sélectionnez le champ Zone multiligne.
    2. Affichez les traitements associés (touche F2).
    3. Remplacez la ligne :
      CAS 1 // Liste des produits
      OuvreFenêtreMobile(FEN_Liste_des_produits)
      par :
      CAS 1 // Liste des produits
      FenCoulissanteVisible(fcGauche,Faux)
      Dans ce code, la fonction FenCoulissanteVisible permet de rendre invisible la fenêtre coulissante s'affichant par la gauche. La liste des produits est donc affichée.
    4. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
    5. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
  • Pour associer la fenêtre interne à la fenêtre "FEN_Liste_des_produits_Avancé" :
    1. Affichez la fenêtre "FEN_Liste_des_produits_Avancé" (cliquez sur son nom dans la barre des éléments ouverts).
    2. Affichez la fenêtre de description.
    3. Dans l'onglet "Détail", dans la zone "Fenêtre coulissante gauche", sélectionnez la fenêtre "FI_ZML_Options". L'option "Balayage" permet de gérer automatiquement l'affichage de la fenêtre coulissante lors du balayage.
    4. Validez.
    5. La fenêtre étant associée à une Action Bar, l'éditeur propose d'activer l'option permettant d'ouvrir la fenêtre coulissante.
    6. Acceptez.
  • Nous allons maintenant tester le fonctionnement du sliding menu sous le simulateur :
    1. Dans l'explorateur de projet, définissez la fenêtre "FEN_Liste_des_produits_Avancé" comme première fenêtre du projet (en effet, la fenêtre "FEN_Menu" est désormais inutile).
      • Sélectionnez la fenêtre "FEN_Liste_des_produits_Avancé" dans l'explorateur de projet.
      • Affichez le menu contextuel.
      • Sélectionnez l'option "Première fenêtre du projet". Une icône spécifique (avec un petit 1) apparaît alors devant le nom de la fenêtre, dans l'explorateur de projet.
    2. Cliquez sur parmi les boutons d'accès rapide.
    3. En cliquant sur le menu de l'Action Bar, la fenêtre coulissante du menu apparaît.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire