Tuto - Développement d'une application Android et iOS

Dans la leçon 2, nous avons créé une fenêtre listant les produits dans un champ Zone répétée.

• 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.

L'interface de la fenêtre que nous allons créer sera la suivante :

• 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.

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 libellé" dans la zone "Libellé" :
   

1. Sélectionnez le fichier de données "Produit" dans la zone "Analyse" de la fenêtre.
2. Cliquez sur la flèche devant le nom du fichier "Produit" : La liste des différentes rubriques du fichier s'affiche.
   
3. Sélectionnez la rubrique "IDProduit" puis cliquez sur le bouton . La rubrique apparaît dans la liste des éléments de la requête.
4. Répétez cette dernière opération pour les rubriques "Libellé", "Description" et "Photo".
5. La fenêtre de description de la requête est la suivante :
   
6. Validez la fenêtre de description de la requête (bouton "OK").
7. La représentation graphique de la requête est affichée et la fenêtre de sauvegarde de la requête apparaît.
8. 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 libellé 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 libellé du produit. Nous devons modifier la requête afin que ce critère de recherche corresponde à un paramètre de la requête.

• 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".

1. Sélectionnez la rubrique Produit.Libellé dans la liste des éléments de la requête.
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é : "ParamLibellé".
4. 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.
   
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 ParamLibellé. 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.

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.

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 "Libellé". 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_Avancé_LISTE_Produits".
12. 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.

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 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.
3. 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.
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).

Test de la fenêtre

Nous allons tester cette fenêtre sous le simulateur :

1. Cliquez sur parmi les boutons d'accès rapide.
   
2. Cliquez sur un des produits : la fenêtre fiche s'affiche.
3. 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.

1. Affichez si nécessaire la fenêtre "FEN_Avancé_LISTE_Produits" 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".
   

1. Toujours dans la fenêtre de description de l'Action Bar, dans l'onglet "Général" :
2. Cliquez sur le numéro 2. L'UI 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 l'événement "Sélection du menu", saisissez le code WLangage 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 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)
   
9. 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.
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 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.

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.

Gestion du "Pull to refresh"

Nous allons ajouter une nouvelle fonctionnalité à notre fenêtre : la gestion du "Pull to refresh".

• 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.

1. Affichez si nécessaire la fenêtre "FEN_Avancé_LISTE_Produits" 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)".
   
   
   
   

   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 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.

1. Sélectionnez le champ Zone répétée et affichez les événements associés (touche F2 par exemple).
2. 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)
   
3. 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.
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).

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.

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_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.

• 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.

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 "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.
     
7. 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".
8. Validez.
9. Enregistrez la fenêtre en cliquant sur parmi les boutons d'accès rapide.

1. Ouvrez la fenêtre "FEN_Menu" précédemment créée (double-cliquez sur son nom dans le volet "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 documents 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 :
   

• 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.

1. Sélectionnez le champ Zone multiligne.
2. Affichez les événements WLangage associés (touche F2).
3. Remplacez la ligne :
   
   CAS 1 // Liste des produits
   FEN_Liste_des_produits.OuvreFenêtreMobile()
   
   par :
   
   CAS 1 // Liste des produits
   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.
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).

1. Affichez la fenêtre "FEN_Avancé_LISTE_Produits" (cliquez sur son nom dans la barre des documents 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.

1. 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".
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.

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.