|
|
|
|
|
- Leçon 4 - Fenêtre avec recherche
- Présentation
- Principe
- 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
- Affichage de la fiche produit
- Test de la fenêtre
- Gestion de la recherche
- Améliorations de la fenêtre
- Gestion du "Pull to refresh"
- Utilisation d'un menu coulissant
- En résumé
Tuto - Développement d'une application Android et iOS
Leçon 4 - Fenêtre avec recherche Ce que vous allez apprendre : - 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.
30 mn Dans la leçon 2, nous avons créé une fenêtre listant les produits dans un champ Zone répétée. Dans cette leçon, nous allons réaliser une fenêtre utilisant le même principe mais proposant une recherche sur le libellé du produit : - la fenêtre affiche la liste des produits dans un champ Zone répétée.
- lorsque l'utilisateur saisit le libellé d'un produit dans la zone de recherche, le champ Zone répétée affiche uniquement les produits correspondants.
Dans notre exemple, cette recherche se fera sur le fichier de données "Produit".
Avertissement
Cette leçon est basée sur l'exemple WM Gestion Produits, manipulé dans la leçon 1. Pour suivre cette leçon, vous devez avoir effectué les manipulations des leçons précédentes.
L'interface de la fenêtre que nous allons créer sera la suivante :
Pour réaliser cette fenêtre, nous allons : - Créer la requête de sélection des enregistrements du fichier de données Produit.
- Créer et paramétrer la fenêtre de recherche.
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é. 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. - 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.
- 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. - La fenêtre de description de la requête apparaît.
- 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 libellé" dans la zone "Libellé" :
Nous allons construire la requête en sélectionnant les éléments que nous voulons dans le résultat. La requête doit permettre d'afficher les caractéristiques du produit sélectionné : le libellé, la description et la photo du produit. - Sélectionnez le fichier de données "Produit" dans la zone "Analyse" de la fenêtre.
- Cliquez sur la flèche devant le nom du fichier "Produit" : La liste des différentes rubriques du fichier s'affiche.
- Sélectionnez la rubrique "IDProduit" puis cliquez sur le bouton . La rubrique apparaît dans la liste des éléments de la requête.
- Répétez cette dernière opération pour les rubriques "Libellé", "Description" et "Photo".
- La fenêtre de description de la requête est la suivante :
- Validez la fenêtre de description de la requête (bouton "OK").
- La représentation graphique de la requête est affichée et la fenêtre de sauvegarde de la requête apparaît.
- 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 : - Cliquez sur .
- 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 libellé du produit. Pour cela, il est nécessaire d'utiliser une requête paramétrée. - Fermez la fenêtre.
Ajout d'une condition de sélection Dans notre exemple, l'utilisateur va pouvoir sélectionner une valeur pour le libellé 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. Pour cela, vous pouvez : - double-cliquer sur le fond de la représentation graphique de la requête.
- utiliser le menu contextuel de la requête et sélectionner l'option "Description de la requête".
Pour gérer le paramètre "Libellé du produit", nous allons définir une condition sur une des rubriques du fichier Produit : - Sélectionnez la rubrique Produit.Libellé dans la liste des éléments de la requête.
- Affichez le menu contextuel et sélectionnez l'option "Condition de sélection .. Nouvelle condition".
- 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é : "ParamLibellé".
- Validez la fenêtre de description de la condition. Le chiffre "1" apparaît à droite de la rubrique "Produit.Libellé", indiquant qu'une condition de sélection a été définie.
- Validez la fenêtre de description de la requête.
- Le graphe de la requête est modifié pour prendre en compte la condition de sélection que nous avons définie.
- 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 : - Cliquez sur .
- Une fenêtre s'affiche permettant de saisir les différents paramètres de la requête.
- Sélectionnez le paramètre ParamLibellé. Dans la partie basse de la fenêtre, saisissez "Polo".
- Validez la fenêtre. Le résultat de la requête correspondant aux paramètres spécifiés s'affiche.
- Fermez la fenêtre.
Nous allons maintenant créer l'interface de notre fenêtre basée sur cette requête. Nous allons créer la fenêtre de recherche grâce à l'assistant de création de fenêtres. Comme dans la leçon 2 de ce tuto, la fenêtre que nous allons créer est une fenêtre de type "Zone répétée", permettant de lister les produits. Cependant, dans cette leçon, cette fenêtre ne sera pas directement basée sur le fichier de données, mais sur la requête, afin que nous puissions réaliser une recherche sur le paramètre que nous avons défini dans la requête. 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 : - 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".
- Dans l'assistant, choisissez "Zone répétée" et validez.
- L'assistant de création d'une fenêtre se lance.
- Choisissez la plateforme à utiliser : "Téléphone Android générique". Passez à l'étape suivante de l'assistant.
- 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".
- Passez à l'étape suivante.
- Sélectionnez le style de la zone répétée : "Image + Titre + Libellé dessous". Passez à l'étape suivante.
- 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.
- Conservez la rubrique de tri proposée par défaut "Libellé". Passez à l'étape suivante.
- 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.
- 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_Avancé_LISTE_Produits".
- Terminez l'assistant. La fenêtre est automatiquement créée, affichée sous l'éditeur et enregistrée.
Affichage de la fiche produit Nous allons maintenant modifier la fenêtre "FEN_Avancé_LISTE_Produits" pour afficher la fiche Produit que nous avons créée dans la leçon 2 de ce tuto. - 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. - Sous l'éditeur de code, dans l'événement "Initialisation de ...", saisissez le code WLangage suivant :
REQ_Produits.ParamLibellé = Null
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. - Sous l'éditeur de code, dans l'événement "Sélection d'une ligne ...", saisissez le code WLangage suivant :
Produit.LitRecherche(IDProduit, REQ_Produits.IDProduit)
FEN_Fiche_du_produit.OuvreFenêtreMobile()
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 le champ 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 de données Produit.
- Il est nécessaire de rechercher dans le fichier de données "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 <Fichier de données>.LitRecherche.
- La fenêtre fiche "FEN_Fiche_du_produit" est ensuite ouverte grâce à la fonction <Fenêtre>.OuvreFenêtreMobile.
- Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
- Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
Test de la fenêtre Nous allons tester cette fenêtre sous le simulateur : - Cliquez sur parmi les boutons d'accès rapide.
- Cliquez sur un des produits : la fenêtre fiche s'affiche.
- Terminez le test.
Nous allons maintenant gérer la recherche. Pour cela, nous allons configurer l'Action Bar de la fenêtre : - 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 : - Affichez si nécessaire la fenêtre "FEN_Avancé_LISTE_Produits" sous l'éditeur.
- Affichez la fenêtre de description de l'Action Bar (double-cliquez sur l'Action Bar).
- 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 : - Toujours dans la fenêtre de description de l'Action Bar, dans l'onglet "Général" :
- Cliquez sur le numéro 2. L'UI de saisie d'une option de la barre d'outils apparaît.
- 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.
- 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 l'événement "Sélection du menu", saisissez le code WLangage suivant :
ActionBarRechercheVisible(Vrai)
- Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
- Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
- Sélectionnez l'Action Bar et affichez le code associé (touche F2 ou option "Code" du menu contextuel).
- Sous l'éditeur de code, dans l'événement "Validation de la recherche ...", saisissez le code WLangage suivant :
REQ_Produits.ParamLibellé = ACTB_ActionBar.ValeurRecherche
ZR_REQ_Produits.Affiche(taRéExécuteRequete)
- Examinons ce code WLangage :
- 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 <Zone répétée>.Affiche. La constante taRéExécuteRequete 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.
- Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
- Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
- 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 2, paragraphe "Création d'un nouveau produit". Les opérations à effectuer sont identiques. Seul le code du bouton "+" est à adapter.
- 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.
- Fermez le simulateur.
Améliorations de la fenêtre Nous allons effectuer quelques améliorations rapides de cette fenêtre en intégrant les fonctionnalités suivantes : - Gestion du "Pull to refresh",
- Mise en place d'un menu coulissant.
Nous verrons ainsi comment mettre en place ces fonctionnalités, très utilisées dans les applications mobiles. 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. Cette fonctionnalité peut être utilisée par exemple dans une 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". Lorsque l'utilisateur 'tire" le champ pour rafraîchir son contenu, 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 intégrer la fonctionnalité "Pull to Refresh" : - Affichez si nécessaire la fenêtre "FEN_Avancé_LISTE_Produits" sous l'éditeur.
- Sélectionnez le champ Zone répétée et affichez la fenêtre de description du champ.
- 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)".
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). - 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.
- l'événement "Rafraîchissement par tirer/relâcher" parmi les événements du champ Zone répétée. Cet événement est automatiquement appelé lors de la gesture de rafraîchissement. Nous allons maintenant modifier le code WLangage de cet événement pour gérer la mise à jour du champ.
Pour modifier le code WLangage de l'événement "Rafraîchissement par tirer/relâcher" : - Sélectionnez le champ Zone répétée et affichez les événements associés (touche F2 par exemple).
- Sous l'éditeur de code, dans l'événement "Rafraîchissement par tirer/relâcher ...", saisissez le code WLangage suivant :
ZR_REQ_Produits.Affiche(taRéExécuteRequete)
- Comme nous l'avons vu précédemment pour la gestion de la recherche, la fonction <Zone répétée>.Affiche permet de réafficher le champ Zone répétée. La constante taRéExécuteRequete 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.
- Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
- 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). - Cliquez en haut de la zone répétée avec la souris et déplacez la souris vers le bas.
- Relâchez la souris. La zone répétée se met à jour.
- Fermez le simulateur.
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. Les fenêtres coulissantes peuvent apparaître par la droite, par la gauche ou encore par le bas de l'écran. Nous allons modifier la fenêtre "FEN_Avancé_LISTE_Produits" pour lui ajouter un "sliding menu". Ce menu reprendra le champ Zone multiligne de la fenêtre "FEN_Menu" créée dans la leçon 2 de ce tuto. 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_Avancé_LISTE_Produits" pour afficher le menu.
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 : - 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".
- La fenêtre interne est automatiquement ouverte sous l'éditeur.
- La fenêtre de sauvegarde de l'élément créé apparaît. Saisissez le nom de la fenêtre interne : "FI_ZML_Options".
- Validez.
- Affichez la fenêtre de description de la fenêtre interne (option "Description" du menu contextuel).
- Dans l'onglet "UI", 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.
- Dans l'onglet "Style", spécifiez une couleur de fond pour la fenêtre interne. En effet, pour que le menu ne soit pas transparent, le paramètre "Couleur de fond de la Fenêtre interne" doit correspondre à "Blanc".
- Validez.
- 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 : - Ouvrez la fenêtre "FEN_Menu" précédemment créée (double-cliquez sur son nom dans le volet "Explorateur de projet" par exemple).
- 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 documents ouverts).
- Collez les éléments (Ctrl + V).
- 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 ne reste plus qu'à modifier le code WLangage permettant d'ouvrir la liste des produits. Ce code doit être modifié car : - nous travaillons avec la fenêtre "FEN_Avancé_LISTE_Produits" et non plus "FEN_Liste_des_produits".
- la fenêtre "FEN_Avancé_LISTE_Produits" contient le menu coulissant. L'option de menu "Liste des produits" du menu coulissant ne doit donc pas ré-ouvrir cette fenêtre.
Nous allons changer le code WLangage utilisé pour la sélection du champ Zone multiligne. - Sélectionnez le champ Zone multiligne.
- Affichez les événements WLangage associés (touche F2).
- Remplacez la ligne :
CAS 1
FEN_Liste_des_produits.OuvreFenêtreMobile()
par :
CAS 1
FenCoulissanteVisible(fcGauche,Faux)
Dans ce code WLangage, la fonction FenCoulissanteVisible permet de rendre invisible la fenêtre coulissante s'affichant par la gauche. La liste des produits est donc affichée. - Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
- 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_Avancé_LISTE_Produits" : - Affichez la fenêtre "FEN_Avancé_LISTE_Produits" (cliquez sur son nom dans la barre des documents ouverts).
- Affichez la fenêtre de description.
- 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.
- Validez.
- La fenêtre étant associée à une Action Bar, l'éditeur propose d'activer l'option permettant d'ouvrir la fenêtre coulissante.
- Acceptez.
Nous allons maintenant tester le fonctionnement du sliding menu sous le simulateur : - Dans le volet "Explorateur de projet", définissez la fenêtre "FEN_Avancé_LISTE_Produits" comme première fenêtre du projet (en effet, la fenêtre "FEN_Menu" est désormais inutile).
- Sélectionnez la fenêtre "FEN_Avancé_LISTE_Produits" dans le volet "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 le volet "Explorateur de projet".
- Cliquez sur parmi les boutons d'accès rapide.
- En cliquant sur le menu de l'Action Bar, la fenêtre coulissante du menu apparaît.
Projet corrigé Vous voulez vérifier le résultat de vos manipulations ?
Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Application complète avec données", cliquez sur le lien "Ouvrir le projet corrigé". Cette leçon nous a permis de découvrir de nouvelles fonctionnalités courantes dans une application mobile : - La possibilité d'effectuer une recherche dans l'Action Bar.
- Le principe et la mise en place du "Pull to refresh".
- Le principe et la mise en place des fenêtres coulissantes.
Dans la prochaine leçon, nous verrons une nouvelle fonctionnalité spécifique aux applications mobiles, les fenêtres avec défilement.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|