• Création d'une fenêtre contenant une zone répétée.
• Découverte de champs spécifiques : champ Zone répétée, champ Zone multiligne, champ Carte, etc.
• Manipulation de la base de données.
• Fonctionnalités spécifiques à l'appareil utilisé (GPS, Photo, etc.).

	Durée estimée : 30 mn

• Ouvrez si nécessaire le projet "WM Gestion Produits" :
  1. Affichez la page d'accueil de WINDEV Mobile (Ctrl + <).
  2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 4 - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Exercice".
     

     	Corrigé	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 "Partie 4 - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Corrigé".

• Fichier de données : L'analyse permet de décrire la structure des fichiers de la base de données. Le terme "Fichier de données" correspond dans certaines bases de données à "une table".
  Dans WINDEV Mobile, le terme "Table" est réservé pour désigner un objet graphique permettant de visualiser le contenu d'un fichier de données sous forme de tableau, et/ou de saisir des lignes. Par exemple, une table peut permettre de saisir le détail d'une commande.
• Enregistrement : Un enregistrement est quelquefois également appelé ligne. L'enregistrement d'un fichier de données correspond à l'ensemble des rubriques définies pour le fichier de données.
• Rubrique : Dans l'analyse, le terme rubrique désigne une zone d'un fichier de données. L'ensemble des rubriques d'un fichier de données permet de définir la structure d'un enregistrement.
• Clé/Index : Avec WINDEV Mobile et sa base de données HFSQL, la notion d'index est liée à la notion de clé. La notion de clé fait partie des caractéristiques d'une rubrique. Les clés permettent d'accélérer les accès aux données ou de faciliter les parcours des fichiers de données. En WINDEV Mobile, si un fichier de données HFSQL a plusieurs rubriques clés, en exécution, un seul fichier d'index sera créé.

• Pour visualiser l'analyse associée au projet :
  1. Cliquez sur parmi les boutons d'accès rapide du menu de WINDEV Mobile.
  2. L'éditeur d'analyses s'affiche.
     
  3. Cette analyse est composée de 3 fichiers de données :
     • Un fichier de données "Produit", qui contient la description du produit : libellé, prix, quantité, etc.
     • Un fichier de données "Caractéristique", qui contient les différentes caractéristiques du produit. Par exemple, si le produit est un T-shirt, ses caractéristiques correspondront à la taille, la couleur, etc. Le fichier de données "Caractéristique" est donc lié au fichier de données "Produit".
     • Un fichier de données "Magasin", qui contient pour chaque magasin, ses coordonnées GPS.
  4. Fermez l'éditeur d'analyses (cliquez sur la croix en haut à droite de l'éditeur).

Création de la fenêtre

• Pour créer la fenêtre listant les produits :
  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, sélectionnez l'onglet "Standard". Dans la zone "Téléphone", choisissez "Zone répétée" et validez.
     

     	Note	Si vous utilisez une configuration iOS, la fenêtre de création d'une nouvelle fenêtre contient des options supplémentaires, spécifiques à iOS. Il est possible de créer une fenêtre de type "Zone répétée" sur une plateforme iOS comme sur une plateforme Android. Rappel : Les images présentes dans la partie 4 de ce cours utilisent la configuration Android. Si vous utilisez la configuration iOS, des différences peuvent être observées.
  3. L'assistant de création d'une fenêtre se lance.
  4. Comme notre projet contient plusieurs plateformes (iOS et Android), l'assistant propose de sélectionner la plateforme à utiliser pour la création de la fenêtre. Il est conseillé de choisir la plateforme ayant la plus petite résolution (ici, "iPhone générique").
     
     Passez à l'étape suivante de l'assistant.
     

     	Note	Si votre projet contient les deux plateformes (Android et iOS), le fait de choisir la plateforme "iPhone générique" va automatiquement générer la fenêtre pour cette plateforme. La plateforme "iOS" devient alors automatiquement la plateforme en cours de votre projet.
  5. L'assistant propose de choisir la source des données associée à la fenêtre. Dans notre cas, il s'agit du fichier de données "Produit" :
     • L'option "Fichiers de données" est sélectionnée par défaut.
     • Sélectionnez le fichier de données Produit.
       
  6. Passez à l'étape suivante.
  7. Sélectionnez le style du champ Zone répétée : "Image + Titre + Libellé dessous". Ce modèle permet d'obtenir une interface contenant l'image du produit, son nom et sa description.
     
  8. Passez à l'étape suivante.
  9. L'assistant propose automatiquement les rubriques du fichier de données correspondant aux différents champs de la zone répétée générée.
     
  10. Conservez les rubriques proposées et passez à l'étape suivante.
  11. Conservez le tri proposé sur la rubrique "IDProduit". Passez à l'étape suivante.
  12. L'assistant propose plusieurs options pour la génération de la fenêtre de type Zone répétée :
      
      • Générer un bouton de création dans l'Action Bar : Si cette option est choisie, l'assistant propose alors de générer une fenêtre fiche en saisie.
      • Activer la suppression par balayage d'une ligne : Si cette option est choisie, l'utilisateur pourra supprimer un élément du champ Zone répétée par simple balayage de la ligne correspondante.
      • Code de sélection de ligne : Si l'option "Générer le code d'ouverture de la fiche en affichage" (ou l'option "Générer le code d'ouverture de la fiche en saisie") est choisie, l'assistant propose alors de générer une fenêtre fiche en affichage ou en saisie.
  13. Dans notre exemple, conservez les options par défaut. Passez à l'étape suivante.
  14. Donnez un titre et un nom à la fenêtre générée. Saisissez le titre de la fenêtre : "Liste des produits". Le nom de la fenêtre est automatiquement renseigné.
      
  15. Validez l'assistant. La fenêtre est automatiquement créée, affichée sous l'éditeur et enregistrée. Si votre projet utilise les configurations de projet iOS et Android, la fenêtre est affichée dans la configuration iOS (la zone de la barre d'accueil est affichée).
      
      
      

      	Note	Dans la fenêtre affichée sous l'éditeur, des données apparaissent automatiquement. Ce concept se nomme "Live Data" : vous voyez les données présentes dans vos fichiers de données en temps réel ! Cette fonctionnalité est très utile, notamment pour adapter la taille des champs à leur contenu.

• Si votre projet utilise les deux configurations de projet (Android et iOS), vous pouvez visualiser la même fenêtre pour la configuration Android :
  1. Déroulez l'option "Configurations (Application iOS)" en haut du volet "Explorateur de projet".
  2. Double-cliquez sur le nom de la configuration "Application Android".
  3. La configuration Android est automatiquement sélectionnée, et la fenêtre que nous avons créée apparaît dans cette configuration.

• Nous allons effectuer un premier test dans le simulateur Android pour visualiser le résultat. Cliquez sur parmi les boutons d'accès rapide (ou utilisez la touche F9).
  

• Fermez le simulateur pour revenir sous l'éditeur de fenêtres.

	Note	Lorsqu'un projet est associé à plusieurs plateformes, le test de la fenêtre en cours est réalisé avec la plateforme en cours. La coque utilisée pour le simulateur est également adaptée à la plateforme en cours. Pour réaliser le test sur une autre plateforme (par exemple sur iOS), il suffit d'activer cette plateforme en double-cliquant sur son nom dans le volet "Explorateur de projet". Remarque : Dans cette partie, les images représentant les tests correspondent à une coque Android.

Création de la fenêtre

• Pour créer la fenêtre fiche :
  1. Créez une nouvelle fenêtre 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 "Fenêtre" puis sur "Fenêtre".
     • Dans l'assistant, sélectionnez l'onglet "Standard", choisissez "Vierge" et validez.
  2. La fenêtre de sauvegarde de l'élément créé apparaît. Indiquez le titre de la fenêtre : "Fiche du produit". Son nom est automatiquement proposé : "FEN_Fiche_du_produit".
     
     Validez.
  3. La fenêtre est ajoutée au projet, pour toutes les configurations par défaut.

	Note	Comme plusieurs plateformes sont définies dans le projet, la fenêtre de sauvegarde d'un élément propose par défaut d'associer le nouvel élément à toutes les plateformes. Pour associer l'élément uniquement à une plateforme, il suffit de dérouler l'option "Configurations" dans la fenêtre de sauvegarde et de choisir la plateforme voulue :

Création des champs

• Pour créer les différents champs de saisie affichant les informations sur le produit :
  1. Affichez le volet "Analyse" si nécessaire : sous le volet "Accueil", dans le groupe "Environnement­", déroulez "Volets" et sélectionnez "Volets" puis "Analyse". Les différents fichiers de données décrits dans l'analyse "WM Gestion Produits" apparaissent dans le volet.
  2. Sélectionnez à l'aide de la souris les rubriques du fichier de données "Produit" affichées dans le volet (sauf la rubrique "IDProduit").
  3. Effectuez un "Drag and Drop" (glisser/déplacer) de ces rubriques vers la fenêtre que vous venez de créer.
     
  4. Modifiez la taille des champs ("Libellé", "Code-b.", "Réappro.", "Description") afin qu'ils soient visibles dans la fenêtre.
  5. Réorganisez les champs dans la fenêtre. Respectez l'ordre suivant : "Photo", "Libellé", "Descr.", "Prix", "Réf", "Code-b.", "Quantité", "Réappro.".
     
  6. Nous allons visualiser l'ordre de navigation dans la fenêtre :
     • Appuyez sur la touche F5. Les numéros qui s'affichent représentent l'ordre de navigation dans la fenêtre.
       
       Appuyez à nouveau sur la touche F5 pour faire disparaître les numéros.
     • L'ordre de navigation s'adapte automatiquement à l'ordre des champs dans la fenêtre.
  7. Enregistrez la fenêtre.

• Testez la fenêtre "FEN_Fiche_du_produit" ( parmi les boutons d'accès rapide).
  1. La fenêtre apparaît avec tous les champs vides.
  2. Fermez le simulateur.

• Pour afficher les données du produit :
  1. Affichez les événements WLangage associés à la fenêtre :
     • Dans la zone à côté de la fenêtre, faites un clic droit de souris.
     • Dans le menu contextuel qui s'affiche, sélectionnez "Code".
     • L'éditeur de code apparaît.
  2. Dans l'événement "Fin d'initialisation de FEN_Fiche_du_produit", saisissez le code WLangage suivant :
     
     Produit.VersFenêtre()
     
     La fonction <Fichier de données>.VersFenêtre permet d'afficher dans les champs de la fenêtre, les données présentes dans le fichier de données, pour l'enregistrement en cours. Dans notre cas, l'enregistrement en cours sera l'enregistrement sélectionné dans le champ Zone répétée de la fenêtre "FEN_Liste_des_produits". Ce champ Zone répétée est lié au fichier de données Produit.
  3. Fermez la fenêtre de code.
  4. Enregistrez la fenêtre.

Affichage de la fiche depuis la liste des produits

• Effectuez les opérations suivantes :
  1. Placez-vous sur la fenêtre "Liste des produits" : cliquez sur le bouton "FEN_Liste_des_produits" dans la barre des documents ouverts (sous le ruban du menu de WINDEV Mobile) :
     
  2. Sélectionnez le champ Zone répétée.
     Attention : sélectionnez bien le champ Zone répétée et non un des champs présents dans la zone répétée.
  3. Affichez le menu contextuel du champ Zone répétée (clic droit) et sélectionnez l'option "Code" dans ce menu.
  4. Dans la fenêtre de code qui apparaît, saisissez le code WLangage suivant dans l'événement "Sélection d'une ligne de ZR_Produit" :
     
     FEN_Fiche_du_produit.OuvreFenêtreMobile()
     
     

     	Note	Laissez-vous guider par l'assistance à la saisie de code : dès que vous allez taper les premières lettres du nom de la fenêtre, une liste déroulante va s'ouvrir proposant le nom des différents éléments du projet commençant par ces lettres. Il suffit de sélectionner le nom de la fenêtre voulue au clavier ou à la souris. De même, en saisissant le '.' après le nom de la fenêtre les différentes fonctions ou propriétés WLangage applicables à la fenêtre sont affichées. Remarque : Si vous ne trouvez pas le nom de la fenêtre que vous cherchez dans la liste, c'est que celle-ci n'a pas été sauvegardée précédemment.
  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).

• Testez à nouveau la fenêtre "FEN_Liste_des_produits" sous le simulateur ( parmi les boutons d'accès rapide).
  • Dans la liste des produits, cliquez sur un des produits avec la souris.
  • La fenêtre de détail du produit s'affiche.

• Fermez le simulateur.

Modification de la fiche produit

• Tout d'abord, affichez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur : cliquez sur le bouton correspondant dans la barre des documents ouverts.

• Pour ajouter une option de validation dans l'Action Bar de la fenêtre :
  1. Sélectionnez l'Action Bar (en haut de la fenêtre).
  2. Affichez la fenêtre de description de l'Action Bar : clic droit et sélectionnez l'option "Description" du menu contextuel.
     
     
     

     	Note	La fenêtre de description de l'Action Bar s'adapte aux plateformes utilisées dans le projet. En effet, l'Action Bar d'une application Android et celle d'une application iOS ne sont pas identiques. Notre projet utilise à la fois une configuration Android et iOS : la fenêtre affiche un aperçu de l'Action Bar pour les deux plateformes. Dans le cas d'un projet utilisant uniquement une configuration de projet Android (ou iOS), seules les options correspondant à l'Action Bar pour Android (respectivement iOS) sont affichées. Des numéros permettent d'accéder aux options à configurer. Nous présentons ici uniquement les options nécessaires à notre exemple. Pour plus de détails, consultez Description du champ Action Bar.
  3. Cliquez sur le numéro 2 (n'importe lequel présent dans la fenêtre). L'UI de saisie d'une option de l'Action Bar apparaît.
  4. Cliquez sur le bouton "+" pour ajouter une option (bouton présent sous la zone "En haut à droite"). Une nouvelle option par défaut est créée en haut à droite.
  5. Modifiez les caractéristiques de cette option :
     • Dans la zone "Libellé de l'option", saisissez "Valider".
       
       
       

       	Note	En exécution, le libellé de l'option apparaît dans l'Action Bar : Si aucune image n'est associée à l'option. Si l'option est transférée dans le menu du bas.
     • Dans la zone "Image prédéfinie", déroulez la liste et sélectionnez "Valider".
       
     • Validez la fenêtre de description.
       

       	Note	Pour revenir à l'interface générale de description de l'Action Bar, il suffit de cliquer sur le bouton .
  6. Le code WLangage de cette option va permettre d'enregistrer les modifications effectuées dans la fenêtre "FEN_Fiche_du_produit". Pour saisir ce code :
     • Sélectionnez si nécessaire le champ Action Bar de la fenêtre.
     • Cliquez sur le bouton "OK".
     • Un menu déroulant avec l'option "Valider" apparaît.
       
       
       

       	Note	Ce menu déroulant est visible uniquement en édition pour saisir le code WLangage associé à l'option. En exécution, ce menu déroulant ne sera pas affiché.
     • 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 :
       
       Produit.DepuisFenêtre()
       Produit.Enregistre()
       Ferme()
       
       Examinons ces lignes de code :
       • La fonction <Fichier de données>.DepuisFenêtre permet d'initialiser les rubriques avec les valeurs des champs liés dans la fenêtre, pour l'enregistrement courant.
       • La fonction <Fichier de données>.Enregistre permet de mettre à jour les données du fichier de données pour l'enregistrement courant.
  7. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
  8. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

• Lors de la fermeture de la fiche du produit, il est nécessaire de rafraîchir le contenu de la liste des produits présente dans la fenêtre "FEN_Liste_des_produits" pour prendre en compte les modifications réalisées dans la fiche. Il suffit pour cela d'utiliser l'événement "Fermeture d'une fenêtre fille" de la fenêtre "FEN_Liste_des_produits".
  1. Cliquez sur le bouton "FEN_Liste_des_produits" dans la barre des documents ouverts :
     
  2. Faites un clic droit sur le fond de la fenêtre et dans le menu qui s'affiche, sélectionnez l'option "Code". Dans l'événement "Fermeture d'une fenêtre fille", le code WLangage suivant est automatiquement affiché :
     
     ZoneRépétéeAffiche(ZR_Produit,taCourantBandeau)
     
     

     	Note	Ce code généré n'utilise pas la syntaxe préfixée mais la syntaxe "classique" du WLangage. En syntaxe préfixée, ce code devient : ZR_Produit.Affiche(taCourantBandeau)
  3. Examinons ce code WLangage :
     • L'événement "Fermeture d'une fenêtre fille" est exécuté à chaque fois qu'une fenêtre fille de la fenêtre en cours est fermée. Dans notre cas, il est donc exécuté lorsque la fenêtre "FEN_Fiche_du_produit" est fermée.
     • La fonction <Zone répétée>.Affiche (ou ZoneRépétéeAffiche) permet de mettre à jour les données du champ Zone répétée de la fenêtre "FEN_Liste_des_produits". La constante taCourantBandeau permet de mettre à jour les données à partir du bandeau de sélection.
       Ce code WLangage a été automatiquement généré lors de la création de la fenêtre par l'assistant.
  4. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

• Lancez le test de la fenêtre "FEN_Liste_des_produits" sous le simulateur ( parmi les boutons d'accès rapide).
  • Dans la liste des produits, cliquez sur un des produits avec la souris : par exemple, le produit "Polo Hibbicus, Bleu".
  • La fenêtre de détail du produit s'affiche. Modifiez le nom du produit et saisissez "Polo Hibbicus, Bleu clair" puis ensuite cliquez sur le bouton "OK".
  • De retour sur la liste des produits, vous pouvez constater que le nom de cet article a été mis à jour.

• Fermez le simulateur. L'éditeur de WINDEV Mobile est affiché.

Création d'un nouveau produit

• Dans la fenêtre de la liste des produits, nous allons ajouter une option dans l'Action Bar de la fenêtre afin d'ouvrir la fenêtre "Fiche du produit".
• Nous modifierons ensuite le code WLangage de la fenêtre "Fiche du produit" pour gérer l'ajout dans le fichier de données Produit.

• Pour ajouter une option dans l'Action Bar de la fenêtre :
  1. Affichez si nécessaire la fenêtre "FEN_Liste_des_produits" sous l'éditeur : cliquez sur le bouton correspondant dans la barre des documents ouverts.
  2. Sélectionnez l'Action Bar (en haut de la fenêtre).
  3. Affichez la fenêtre de description de l'Action Bar : clic droit et sélectionnez l'option "Description" du menu contextuel.
     
  4. Cliquez sur le numéro 2 (n'importe lequel dans la fenêtre). L'interface de saisie d'une option de la barre d'outils apparaît.
  5. Cliquez sur le bouton "+" pour ajouter une option (bouton présent sous la zone "En haut à droite"). Une nouvelle option par défaut est créée en haut à droite. Modifiez les caractéristiques de cette option :
     • Dans la zone "Libellé de l'option", saisissez "Nouveau produit".
       
     • Dans la zone "Image prédéfinie", déroulez la liste et sélectionnez "Ajouter".
       
     • Validez la fenêtre de description.
  6. Le code WLangage associé à cette option va permettre d'ouvrir la fenêtre "Fiche du produit", en mettant ses champs à vide. Pour saisir ce code WLangage :
     • Sélectionnez si nécessaire le champ Action Bar de la fenêtre.
     • Cliquez sur le bouton "+".
     • Un menu déroulant avec l'option "Nouveau produit" 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 :
       
       Produit.RAZ()
       FEN_Fiche_du_produit.OuvreFenêtreMobile()
       
       La fonction <Fichier de données>.RAZ initialise les variables des rubriques du fichier de données "Produit" avec les valeurs par défaut pour gérer un nouvel enregistrement.
  7. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
  8. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

• Maintenant, vérifions la gestion de l'ajout d'un nouvel enregistrement dans la fenêtre de la fiche du produit.
  1. Affichez la fenêtre "FEN_Fiche_du_produit" sous l'éditeur : cliquez sur le bouton correspondant dans la barre des documents ouverts.
  2. Affichez le code de l'option de validation dans l'Action Bar :
     • Sélectionnez l'Action Bar.
     • Cliquez sur le bouton "OK".
     • Un menu déroulant avec l'option "Valider" apparaît.
     • Dans le menu contextuel de l'option "Valider" (clic droit), sélectionnez l'option "Code".
     • Le code WLangage de l'événement "Clic sur" ne change pas :
       
       Produit.DepuisFenêtre()
       Produit.Enregistre()
       Ferme()
       
       Examinons à nouveau ce code :
       • Par défaut, la fonction <Fichier de données>.Enregistre est équivalente à la fonction <Fichier de données>.Modifie : l'enregistrement courant dans le fichier de données est modifié.
       • Si la fonction <Fichier de données>.RAZ a été appelée avant la fonction <Fichier de données>.Enregistre (ce qui est le cas lors de l'ajout d'un nouveau produit), la fonction <Fichier de données>.Enregistre ajoute un nouvel enregistrement dans le fichier de données (équivalent à la fonction <Fichier de données>.Ajoute).
  3. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

• Affichez la fenêtre "FEN_Liste_des_produits" sous l'éditeur de fenêtres et lancez son test sous le simulateur ( parmi les boutons d'accès rapide).
  • Cliquez sur le bouton "+" présent dans l'Action Bar.
  • Saisissez un nouveau produit.
  • Validez. Le nouveau produit apparaît dans la liste des produits.
  • Fermez le simulateur.

	Note	Notre projet utilise plusieurs plateformes : nous vous conseillons de faire un GO sous chacune des plateformes. Vous verrez ainsi sous le simulateur les différences d'affichage et de fonctionnement.

Présentation

• créer un champ Bouton pour lancer l'appareil photo. La photo sera récupérée sous la forme d'une image en mémoire et affichée dans le champ Image du produit.
• créer un champ Bouton permettant de sélectionner une photo dans l'album du mobile.

Création du bouton prise de photo

• Pour créer le champ Bouton permettant la prise de la photo :
  1. Affichez la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
  2. Ajoutez un champ Bouton dans la fenêtre :
     • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur  : la forme du champ apparaît sous la souris.
     • Cliquez ensuite en haut à droite du champ Image pour créer le champ Bouton.

• Nous allons modifier le champ Bouton pour lui associer une image représentant un appareil photo :
  1. Sélectionnez le champ et affichez son menu contextuel (clic droit).
  2. Sélectionnez "Description". La fenêtre de description du champ apparaît.
  3. Dans l'onglet "Général", cliquez sur le bouton à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue".
  4. Le catalogue d'images de WINDEV Mobile s'ouvre. Ce catalogue contient des milliers d'images dans différents domaines, formats et tailles.
  5. Dans la zone de recherche en haut, saisissez "photo" et validez. Plusieurs images apparaissent :
     
  6. Sélectionnez par exemple l'image en double-cliquant dessus.
  7. Dans la fenêtre qui s'affiche, vous pouvez choisir la taille de l'image, la couleur, l'orientation, son format et son nom.
  8. Conservez toutes les options par défaut et indiquez juste le nom de l'image "AppareilPhoto".
  9. Validez la fenêtre.
  10. Le chemin de l'image apparaît dans la description du champ Bouton.
  11. Donnez un nom au champ : "BTN_Appareil_Photo".
  12. Videz le libellé du champ.
  13. Validez la fenêtre de description.
  14. Sous l'éditeur, réduisez la taille du champ.

• Ce champ Bouton utilise le style par défaut du gabarit "Phoenix" associé au projet : le fond du champ est bleu. Dans notre cas, le fond bleu n'est pas nécessaire. Nous allons modifier le style associé au champ :
  1. Sélectionnez si nécessaire le champ Bouton que vous venez de créer.
  2. Affichez le menu contextuel et sélectionnez l'option "Choisir un style".
  3. La fenêtre qui s'affiche liste tous les styles utilisables pour les champs Bouton présents dans le gabarit Phoenix.
     
  4. Cliquez sur la loupe et indiquez "BTN_Vierge".
     
     Ce nom correspond à un style sans couleur de fond. C'est ce style que nous allons utiliser.
  5. Validez la fenêtre de sélection des styles.
  6. Le style choisi est automatiquement appliqué au champ Bouton.

Prise de photo

• Pour gérer la prise de photo :
  1. Dans le menu contextuel du champ Bouton (clic droit), sélectionnez l'option "Code".
  2. Saisissez le code WLangage suivant dans l'événement "Clic sur" :
     
     // Variable locale
     PhotoProduit est une chaîne
     // On lance l'appareil photo
     PhotoProduit = VidéoLanceAppli(viCaptureImage)
     SI PhotoProduit <> "" ALORS
     IMG_Photo = PhotoProduit
     FIN
     Dans ce code WLangage, la fonction VidéoLanceAppli permet de lancer l'application caméra native de l'appareil afin d'enregistrer une vidéo ou de prendre une photo.
  3. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
  4. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Sélection d'une photo dans l'album de photos

• Pour créer le champ Bouton permettant de sélectionner la photo, nous allons simplement faire un "Copier - Coller" du champ Bouton de prise de photo que nous venons de créer :
  1. Sélectionnez le champ Bouton "BTN_Appareil_Photo" que vous venez de créer.
  2. Utilisez la combinaison de touches Ctrl + C : le champ Bouton est copié dans le presse-papiers.
  3. Utilisez la combinaison de touches Ctrl + V : le curseur de la souris se transforme et l'ombre du champ apparaît sous le curseur.
  4. Cliquez dans la fenêtre à côté du champ "BTN_Appareil_Photo" : le nouveau champ Bouton est automatiquement créé.
  5. Affichez la fenêtre de description du champ (double-cliquez sur le champ) :
     • Donnez un nom au champ : "BTN_Album_Photo".
     • Sélectionnez une image dans le catalogue d'images.
       Remarque : Pensez à modifier le nom d'image proposé par défaut.
  6. Validez la fenêtre de description.

• Le code WLangage associé à ce champ Bouton permet d'ouvrir l'album photo de l'appareil et de sélectionner une image pour l'afficher dans le champ Image de la fiche produit.
  1. Dans le menu contextuel du bouton (clic droit), sélectionnez l'option "Code".
  2. Remplacez le code WLangage de l'événement "Clic sur" par le code WLangage suivant :
     
     // Variable locale
     PhotoProduit est une chaîne
     // On lance la sélection
     PhotoProduit = AlbumSélecteur(albumImage)
     SI PhotoProduit <> "" ALORS
     IMG_Photo = PhotoProduit
     FIN
     Dans ce code WLangage, la fonction AlbumSélecteur permet de récupérer la photo sélectionnée dans l'album photo.
  3. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
  4. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Présentation

Mise en place

• Pour créer un champ Bouton permettant de gérer des codes-barres :
  1. Affichez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
  2. Ajoutez un champ Bouton dans la fenêtre :
     • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
     • La forme du champ apparaît sous la souris.
     • Créez le champ à côté du champ "Code-b." (redimensionnez le champ de saisie si nécessaire).
  3. Affichez la fenêtre de description du champ Bouton (double-cliquez sur le champ) :
     • Donnez un nom au champ : "BTN_Code_Barres".
     • Videz le libellé du champ.
     • Sélectionnez une image de code-barres dans le catalogue d'images (cherchez par exemple avec le mot-clé "Code").
  4. Validez la fenêtre de description.
  5. Sous l'éditeur, réduisez la taille du champ.

• Comme pour le champ Bouton permettant de prendre une photographie, nous allons modifier le style associé au champ :
  1. Sélectionnez si nécessaire le champ Bouton que vous venez de créer.
  2. Affichez le menu contextuel et sélectionnez l'option "Choisir un style".
  3. Dans la fenêtre listant les styles disponibles, cliquez sur la loupe et indiquez "BTN_Vierge".
     
  4. Le style "BTN_Vierge" est automatiquement sélectionné.
  5. Validez la fenêtre de sélection des styles.
  6. Le style choisi est automatiquement appliqué au champ Bouton.

• Le code WLangage de ce champ Bouton va permettre de scanner le code-barres.
  1. Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Code".
  2. Saisissez le code WLangage suivant dans l'événement "Clic sur" :
     
     // Variable locale
     cb est un CodeBarres
     // Lancement du scan
     cb = CBCapture()
     SI cb.Contenu <> "" ALORS
     SAI_Code_barres = cb.Contenu
     FIN
     Dans ce code WLangage, la fonction CBCapture permet de décoder les informations stockées dans un code-barres en utilisant la caméra de l'appareil.
  3. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
  4. Fermez la fenêtre de code (cliquez sur la croix à droite de l'onglet représentant l'éditeur de code dans la barre des documents ouverts).

• Pour définir l'ancrage des différents champs de la fenêtre :
  1. Sélectionnez tout d'abord les champs suivants (cliquez dessus en maintenant la touche Ctrl enfoncée) :
     • le champ Image affichant la photo du produit,
     • le champ Bouton permettant de prendre une photo,
     • le champ Bouton de sélection d'une photo dans l'album.
  2. Affichez le menu contextuel de la sélection (clic droit) et sélectionnez l'option "Ancrage".
  3. Sélectionnez l'option "Centré horizontalement" ().
     
  4. Validez.

• Pour définir l'ancrage des champs de saisie :
  1. Sélectionnez les champs de saisie suivants (cliquez dessus en maintenant la touche Ctrl enfoncée) :
     • Libellé
     • Description
     • Code-barres
     • Date de réappro.
     • Référence
  2. Affichez le menu contextuel de la sélection (clic droit) et sélectionnez l'option "Ancrage".
  3. Sélectionnez l'option "Largeur" ().
  4. Validez.

• Répétez cette opération pour le champ Bouton permettant la gestion des codes-barres et pour le champ Référence. Dans ce cas, sélectionnez l'option "Droite" ().

• Tous les ancrages ont été définis dans la fenêtre. Les flèches rouges indiquant l'orientation des ancrages sont affichées :
  

Création de la fenêtre

• Pour créer la fenêtre :
  1. Créez une nouvelle fenêtre vierge. Cliquez sur parmi les boutons d'accès rapide. La fenêtre de création d'un élément s'affiche : cliquez sur "Fenêtre" puis sur "Fenêtre". Dans l'assistant, choisissez "Vierge" et validez.
  2. La fenêtre de sauvegarde de l'élément créé s'affiche. Indiquez le titre de la fenêtre : "Carte des magasins". Son nom est automatiquement proposé : "FEN_Carte_des_magasins". Validez.

Création du champ Carte

• Pour créer le champ Carte :
  1. Sous le volet "Création", dans le groupe "Champs graphiques", cliquez sur "Carte". La forme du champ apparaît sous la souris.
  2. Cliquez dans la fenêtre pour créer le champ. Le champ Carte apparaît sous l'éditeur de fenêtres.
  3. Affichez la fenêtre de description du champ "Carte" (double-clic sur le champ par exemple).
  4. Dans la fenêtre de description du champ, indiquez le nom du champ "CARTE_MAGASIN" et validez.
  5. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.

Affichage des magasins sur le champ Carte

• Nom,
• Latitude,
• Longitude.

• Pour saisir le code WLangage permettant d'afficher les magasins :
  1. Faites un clic droit à l'extérieur de la fenêtre. Dans le menu contextuel, sélectionnez l'option "Code". Les différents événements WLangage associés à la fenêtre s'affichent.
  2. Saisissez le code WLangage suivant dans l'événement "Déclarations globales de ...".
     
     // Variables globales
     MarqueurMagasin est un Marqueur
     // On charge les magasins
     POUR TOUT Magasin
     // Coordonnées du marqueur
     MarqueurMagasin.Position.Latitude = Magasin.Latitude
     MarqueurMagasin.Position.Longitude = Magasin.Longitude
     // Nom du marqueur
     MarqueurMagasin.Nom = Magasin.Nom
     // Ajout du marqueur
     CARTE_MAGASIN.AjouteMarqueur(MarqueurMagasin)
     FIN
     // Zoom optimal pour visualiser tous les marqueurs de la carte
     CARTE_MAGASIN.Zoom = zoomAdapteTaille
  3. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
  4. Fermez la fenêtre de code (cliquez sur la croix à droite de l'onglet représentant l'éditeur de code dans la barre des documents ouverts).

• Lancez le test de la fenêtre "FEN_Carte_des_magasins" sous le simulateur ( parmi les boutons d'accès rapide). Fermez ensuite le simulateur.

• options sur une catégorie,
• regroupement d'informations sur un contact, ...

• des lignes définies en édition (lignes statiques),
• des lignes définies en exécution, par programmation (lignes dynamiques).

La fenêtre que nous allons réaliser est la suivante :

Création de la fenêtre

• Pour créer la fenêtre :
  1. Créez une nouvelle fenêtre 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 "Fenêtre" puis sur "Fenêtre". Dans l'assistant, choisissez "Vierge" et validez.
  2. La fenêtre de sauvegarde de l'élément créé apparaît. Indiquez le titre de la fenêtre : "Menu". Son nom est automatiquement proposé : "FEN_Menu". Validez.

Création du champ Zone multiligne

• Pour créer le champ Zone multiligne :
  1. Sous le volet "Création", dans le groupe "Données", cliquez sur "Zone multiligne". La forme du champ apparaît sous la souris.
  2. Cliquez dans la fenêtre pour créer le champ.
  3. Affichez la fenêtre de description du champ (double-clic sur le champ par exemple).
  4. Dans la fenêtre de description, indiquez le nom du champ "ZM_MENU" et validez.

• Liste des produits.
• Carte des magasins.
• Quitter l'application.

Modification du champ Zone multiligne

• Pour modifier le champ Zone multiligne :
  1. Affichez la fenêtre de description du champ (double-clic sur le champ par exemple).
  2. Cliquez sur le bouton "Nouvelle ligne". Une fenêtre s'ouvre : cette fenêtre contient tous les modèles prédéfinis de ligne.
  3. Sélectionnez le modèle "Ligne simple avec picto" et validez. Répétez cette opération 2 fois.
     Le champ Zone multiligne contient donc :
     • une ligne "vierge",
     • 3 lignes de type "simple avec picto".
       
  4. Nous allons supprimer la ligne vierge qui est inutile dans notre exemple :
     • Sélectionnez la ligne vierge (la première ligne) avec la souris.
     • Cliquez ensuite sur le bouton "Supprimer".
  5. Validez la fenêtre de description. Votre menu est créé.

• Pour modifier l'image de la première ligne du champ Zone multiligne :
  1. Cliquez sur le champ Image de la première ligne.
  2. Affichez la fenêtre de description de l'image (double-clic sur le champ).
  3. Dans la fenêtre de description :
     • Donnez un nom à l'image (par exemple "IMG_ListeDesProduits").
     • Cliquez sur le bouton . Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue" afin de choisir une image représentant l'action.
     • Dans la fenêtre du catalogue d'images, saisissez dans le champ de recherche le mot "Liste" et appuyez sur la touche Entrée.
     • Sélectionnez une image par un double-clic.
     • Dans la fenêtre de paramétrage de l'image générée, sélectionnez une taille (par exemple, L (Largeur) = 80 et H (Hauteur) = 80), donnez un nom à l'image (par exemple "ListeDesProduits") et validez.
       

       	Note	Par défaut, l'image utilisée dans un champ Zone multiligne est en mode "Homothétique étendu centré". L'image sera automatiquement "retaillée" aux bonnes dimensions.
  4. Validez la fenêtre de description.

• Pour modifier le champ Libellé de la première ligne du champ Zone multiligne :
  1. Cliquez sur le champ Libellé de la première ligne.
  2. Affichez la fenêtre de description (double-clic sur le champ).
  3. Dans l'onglet "Général" de la fenêtre de description :
     • Donnez un nom au champ (par exemple "LIB_ListeDesProduits").
     • Changez le libellé (par exemple "Liste des produits").
  4. Validez la fenêtre de description.
     

• Pour modifier l'image de la seconde ligne du champ Zone multiligne :
  1. Cliquez sur le champ Image de la seconde ligne.
  2. Affichez la fenêtre de description de l'image (double-clic sur le champ).
  3. Dans la fenêtre de description :
     • Donnez un nom à l'image (par exemple "IMG_CarteDesMagasins").
     • Cliquez sur le bouton . Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue" afin de choisir une image représentant l'action.
     • Dans la fenêtre du catalogue d'images, saisissez dans le champ de recherche le mot "Carte" et appuyez sur la touche Entrée.
     • Sélectionnez une image par un double-clic.
     • Dans la fenêtre de paramétrage de l'image générée, sélectionnez une taille (par exemple, L (Largeur) = 80 et H (Hauteur) = 80), donnez un nom à l'image (par exemple "CarteMagasins") et validez.
  4. Validez la fenêtre de description.

• Pour modifier le champ Libellé de la seconde ligne du champ Zone multiligne :
  1. Cliquez sur le champ Libellé de la seconde ligne.
  2. Affichez la fenêtre de description (double-clic sur le champ).
  3. Dans l'onglet "Général" de la fenêtre de description :
     • Donnez un nom au champ (par exemple "LIB_CarteDesMagasins").
     • Changez le libellé (par exemple "Carte des magasins").
  4. Validez la fenêtre de description.

• Pour modifier l'image de la troisième ligne du champ Zone multiligne :
  1. Cliquez sur le champ Image de la troisième ligne.
  2. Affichez la fenêtre de description de l'image (double-clic sur le champ).
  3. Dans la fenêtre de description :
     • Donnez un nom à l'image (par exemple "IMG_Sortir").
     • Cliquez sur le bouton . Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue" afin de choisir une image représentant l'action.
     • Dans la fenêtre du catalogue d'images, saisissez dans le champ de recherche le mot "Fermer" et appuyez sur la touche Entrée.
     • Sélectionnez une image par un double-clic.
     • Dans la fenêtre de paramétrage de l'image générée, sélectionnez une taille (par exemple, L (Largeur) = 80 et H (Hauteur) = 80), donnez un nom à l'image (par exemple "Fermer") et validez.
  4. Validez la fenêtre de description.

• Pour modifier le champ Libellé de la troisième ligne du champ Zone multiligne :
  1. Cliquez sur le champ Libellé de la troisième ligne.
  2. Affichez la fenêtre de description (double-clic sur le champ).
  3. Dans l'onglet "Général" de la fenêtre de description :
     • Donnez un nom au champ (par exemple "LIB_Quitter").
     • Changez le libellé (par exemple "Quitter l'application").
  4. Validez la fenêtre de description.

• Nous allons modifier le style des différents libellés pour que les libellés apparaissent en noir :
  1. Cliquez sur le champ Libellé de la première ligne.
  2. Affichez la fenêtre de description (Alt + Entrée).
  3. Dans l'onglet "Style", pour l'élément "Libellé", modifiez la "Couleur police" et sélectionnez la couleur noire.
  4. Validez la fenêtre de description.
  5. La couleur du libellé est automatiquement modifiée.

• Pour refaire cette modification sur les autres champs Libellé :
  1. Cliquez sur le champ Libellé de la seconde ligne.
  2. Appuyez sur la touche F4. Cette touche permet de répéter la dernière action effectuée sur le champ en cours. Dans notre cas, le libellé devient noir.
  3. Sélectionnez le champ Libellé de la troisième ligne et appuyez sur la touche F4 à nouveau.

Programmation du menu

• Pour terminer, nous allons écrire le code WLangage nécessaire pour effectuer chaque action du menu :
  1. Faites un clic droit sur le champ Zone multiligne puis sélectionnez l'option "Code".
     Attention : sélectionnez bien le champ Zone multiligne et non un des champs qui le composent.
  2. Sous l'éditeur de code, dans l'événement "Sélection (clic) d'une ligne dans ...", saisissez le code WLangage suivant :
     
     SELON ZM_MENU
     CAS 1 // Liste des produits
     FEN_Liste_des_produits.OuvreFenêtreMobile()
     CAS 2 // Carte des magasins
     FEN_Carte_des_magasins.OuvreFenêtreMobile()
     CAS 3 // Sortir de l'application
     Ferme()
     FIN
  3. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
  4. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

• Pour définir la première fenêtre du projet :
  1. Sélectionnez la fenêtre "FEN_Menu" dans le volet "Explorateur de projet".
  2. Affichez le menu contextuel.
  3. 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".

Jusqu'à présent, vous testiez les fenêtres de façon individuelle en cliquant sur parmi les boutons d'accès rapide. Nous allons maintenant lancer le test du projet complet.

• Pour lancer le test du projet sur le simulateur :
  1. Cliquez sur parmi les boutons d'accès rapide.
  2. Votre projet démarre par la fenêtre de menu. Vous pouvez cliquer sur une option de votre menu pour vérifier que les différents liens sont corrects.