DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 2024 !
Aide / Tuto WINDEV Mobile / Tuto - Développement d'une application Android et iOS
  • Leçon 2 - Développement de l'application
  • Présentation
  • Afficher la liste des produits
  • Création de la fenêtre
  • Test de la fenêtre
  • Création de la fenêtre fiche
  • Création de la fenêtre
  • Création des champs
  • Amélioration de l'UI
  • Afficher les données de l'enregistrement en cours dans la fiche
  • Affichage de la fiche depuis la liste des produits
  • Gestion de la modification d'un produit
  • Ajouter une option de validation dans l'Action Bar
  • Mise à jour de la liste des produits
  • Test de la fenêtre
  • Gestion de l'ajout d'un produit
  • Principe
  • Ouverture de la fiche du produit depuis l'Action Bar
  • Gestion de l'ajout d'un produit
  • Test de la fenêtre
  • Utilisation de l'appareil photo et affichage d'une image
  • Présentation
  • Création du bouton prise de photo
  • Définition du style du champ
  • Prise de photo
  • Un bouton pour sélectionner une photo dans l'album de photos
  • Gestion du code-barres du produit
  • Présentation
  • Mise en place
  • Gestion des ancrages dans la fiche Produit
  • Utilisation du champ Carte
  • Création de la fenêtre
  • Création du champ Carte
  • Affichage des magasins sur le champ Carte
  • Code WLangage associé à la fenêtre
  • Utilisation d'un champ Zone multiligne
  • Création de la fenêtre
  • Création du champ Zone multiligne
  • Modification du champ Zone multiligne
  • Programmation du menu
  • Test de l'application
  • En résumé

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

Leçon 2 - Développement de l'application
Ce que vous allez apprendre :
  • 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 de la leçon 30 mn
Présentation
Dans cette leçon, vous allez créer plusieurs fenêtres :
  • une fenêtre permettant de lister les différents produits. En cliquant sur un produit, il sera possible d'ouvrir une seconde fenêtre permettant de modifier ce produit. Il sera également possible de créer un nouveau produit.
  • une fenêtre permettant de manipuler des cartes.
  • une fenêtre proposant un menu.

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 de la leçon 1.
Afficher la liste des produits
Nous allons tout d'abord créer une fenêtre permettant de lister les différents produits proposés. Ces produits vont être affichés dans un champ de type "Zone répétée".

Création de la fenêtre

Pour créer une nouvelle fenêtre :
  1. Cliquez sur Nouveau parmi les boutons d'accès rapide (ou utilisez le raccourci Ctrl + N).
  2. Dans la fenêtre de création d'un nouvel élément, cliquez sur "Fenêtre" puis sur "Fenêtre".
  3. Dans l'assistant, sélectionnez l'onglet "Standard".
  4. Dans la zone "Téléphone", choisissez "Zone répétée" et validez.
    Rappel : Les différentes leçons de ce tuto sont réalisées dans une configuration Android. Si vous utilisez une configuration iOS, il est possible d'avoir des options supplémentaires, spécifiques à iOS.
  5. L'assistant de création d'une fenêtre se lance.
  6. 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").
    Assistant de création d'une fenêtre
    Passez à l'étape suivante de l'assistant.
    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.
  7. 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.
      Sélection du fichier de données
  8. Passez à l'étape suivante.
  9. 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.
    Sélection du style du champ Zone répétée
  10. Passez à l'étape suivante.
  11. 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.
    Paramétrage de la zone répétée
  12. Conservez les rubriques proposées et passez à l'étape suivante.
  13. Conservez le tri proposé sur la rubrique "IDProduit". Passez à l'étape suivante.
  14. L'assistant propose plusieurs options pour la génération de la fenêtre de type Zone répétée :
    Options de la fenêtre
    • 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.
  15. Dans notre exemple, conservez les options par défaut. Passez à l'étape suivante.
  16. 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é.
    Titre et nom de la fenêtre Zone Répétée
  17. Terminez 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).
    Fenêtre créée par l'assistant

    Les données sont déjà affichées dans le champ, même sous l'éditeur. C'est le concept du "Live data" : le contenu des fichiers de données présents sur le poste de développement est utilisé dans les fenêtres ou les états manipulés sous l'éditeur. Cette fonctionnalité est très intéressante par exemple pour définir la taille des champs présents dans une fenêtre. Cette fonctionnalité est très utile, notamment pour adapter la taille des champs à leur contenu.
Notre projet utilise deux configurations de projet : visualisons 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.

Test de la fenêtre

Nous allons effectuer un premier test dans le simulateur Android pour visualiser le résultat :
  1. Cliquez sur Tester la fenêtre parmi les boutons d'accès rapide (ou utilisez la touche F9).
    Fenêtre exécutée en mode test
  2. Fermez le simulateur pour revenir sous l'éditeur de fenêtres.
Lorsqu'un projet est associé à plusieurs plateformes, le test de la fenêtre en cours est réalisé avec la plateforme en cours dans le simulateur. La coque s'adapte à la plateforme en cours.
Création de la fenêtre fiche
Maintenant, nous allons créer une nouvelle fenêtre servant à afficher la fiche du produit. Ensuite, cette fenêtre sera lancée depuis la liste des produits pour afficher le détail du produit sélectionné.

Création de la fenêtre

Pour créer la fenêtre fiche :
  1. Créez une nouvelle fenêtre vierge.
    • Cliquez sur Créer un élément 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".
    Enregistrement de l'élément
    Validez.
  3. La fenêtre est ajoutée au projet, pour toutes les configurations par défaut.
Configuration à sélectionner pour l'enregistrement de l'élément
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

La fenêtre que nous créons doit contenir les différents champs correspondant à la description du produit. Ces champs doivent être liés aux rubriques présentes dans le fichier de données Produit.
Pour créer les différents champs de saisie, nous allons utiliser directement les rubriques du fichier de données 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 ce 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 (par exemple, en haut à gauche).
    Drag and Drop des rubriques
Les champs sont automatiquement créés et sélectionnés.
Quelques modifications sont nécessaires pour obtenir une UI utilisable.

Amélioration de l'UI

Nous allons réorganiser les champs dans la fenêtre et modifier la taille de certains champs.
Déplacez l'ensemble des champs vers le bas de la fenêtre.
  1. Sélectionnez l'ensemble des champs si nécessaire (Ctrl + A).
    Remarque : Tous les champs sont déjà sélectionnés lors de la création.
  2. Déplacez l'ensemble des champs vers le bas.
Nous allons maintenant construire notre UI étape par étape.
Etape 1 - Le champ Image
Cliquez sur le champ Image pour le sélectionner. Déplacez le champ en haut au milieu de la fenêtre.
Lors du déplacement du champ Image, des règles d'alignement apparaissent. Ces règles permettent de positionner les champs par rapport à la fenêtre ou par rapport aux champs existants.
Etape 2 - Le champ Libellé
Agrandissez le champ Libellé en largeur pour qu'il occupe la largeur de la fenêtre.
Positionnez le champ sous le champ Image.
Etape 3 - Le champ Description
Remontez le champ "Descr." sous le champ Libellé. Ce champ "Descr." est un champ multiligne correspondant à la description du produit.
Agrandissez le champ en hauteur (afin que 3 lignes au moins puissent être affichées). Alignez les champs Libellé et Description :
  1. Sélectionnez les deux champs (le champ Libellé doit être sélectionné en premier).
  2. Affichez les options d'alignement (volet "Alignement" du ruban de WINDEV Mobile).
    Options d'alignement
  3. Nous voulons que les bords externes et internes des champs soient alignés. Cliquez sur l'option "Justifier (Int. et Ext.)".
Etape 4 - Champ Prix et champ Référence
Positionnez le champ Prix sous le champ "Descr.". Réduisez la largeur du champ pour qu'il occupe la moitié de la fenêtre.
Positionnez le champ Référence à côté du champ Prix et réduisez la largeur du champ pour qu'il rentre dans la fenêtre. Aidez-vous des règles d'alignement pour aligner l'extrémité du champ Référence avec les champs Libellé et Description.
Astuce : Pour que la zone de saisie conserve une taille raisonnable, il est possible d'utiliser la poignée intérieure rouge de la zone de saisie pour réduire l'espace entre le libellé et la zone de saisie.
Etape 5 - Champ Code-barres
Positionnez le champ "Code-b" sous le champ Prix.
Etape 4 - Champ Quantité et champ Réappro
Positionnez les champs Quantité et Réappro côte à côte de la même manière que le champ Prix et le champ Référence.
Vous obtenez le résultat suivant.
Réorganisation des champs
Enregistrez la fenêtre.
Ordre de navigation dans la fenêtre
Nous avons modifié l'ordre des champs dans la fenêtre. Cet ordre correspond automatiquement à l'enchaînement des champs lors de la saisie (passage au champ suivant par la touche "Suiv" du téléphone par exemple). Pour plus de détails, consultez Ordre de navigation dans une fenêtre, une page, etc.
Un petit test rapide de notre fenêtre :
  1. Lancez le test de la fenêtre (Tester la fenêtre parmi les boutons d'accès rapide).
  2. La fenêtre apparaît avec tous les champs vides.
  3. Fermez le simulateur.
Les champs sont vides car aucun enregistrement n'est sélectionné dans le fichier de données. Aucune donnée n'est donc affichée.
Nous allons voir maintenant comment afficher les données de l'enregistrement en cours dans la fenêtre, et nous en profiterons pour afficher cette fenêtre depuis la liste des produits.

Afficher les données de l'enregistrement en cours dans la fiche

Pour afficher les données présentes dans l'enregistrement en cours dans le fichier de données, il est nécessaire de faire un peu de programmation (très simple).
Pour afficher les données du produit :
  1. Affichez les événements WLangage associés à la fenêtre FEN_Fiche_du_produit :
    • Dans la barre des documents ouverts, faites un clic droit sur l'onglet correspondant à la fenêtre en cours.
    • Dans le menu contextuel qui s'affiche, sélectionnez "Code de l'élément".
      Code de l'élément
    • 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.
Pour tester ce code, il est nécessaire d'avoir un enregistrement en cours. Pour cela, nous allons mettre en place l'affichage depuis la liste des produits.

Affichage de la fiche depuis la liste des produits

Pour afficher la fiche du produit sélectionné dans la liste des produits, nous allons effectuer 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) :
    Barre des documents ouverts
  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()

    Saisissez ce code au clavier et laissez-vous guider par l'assistance à la saisie de code : dès que vous tapez les premières lettres du nom de la fenêtre, une liste déroulante s'ouvre 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.
  5. Enregistrez les modifications en cliquant sur Enregistrer l'élément 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).
Relançons le test de la fenêtre "FEN_Liste_des_produits" sous le simulateur :
  1. Cliquez sur Tester la fenêtre parmi les boutons d'accès rapide.
  2. Dans la liste des produits, cliquez sur un des produits avec la souris.
  3. La fenêtre de détail du produit s'affiche.
Fermez le simulateur.
Gestion de la modification d'un produit
Nous allons maintenant modifier nos deux fenêtres afin de gérer la modification d'un produit.
Lors de la création de la fenêtre fiche, une Action Bar a été automatiquement créée. Cette Action Bar contient par défaut un bouton gauche permettant d'annuler la saisie en cours et de revenir sur la fenêtre précédente. Dans notre cas, ce bouton va permettre le retour à la liste des produits.
Action Bar de la fenêtre
Ce comportement correspond à ce que nous voulons : aucune modification n'est à faire.
Nous avons uniquement besoin d'un bouton de validation dans l'Action Bar de la fenêtre "FEN_Fiche_du_produit" pour gérer la validation des modifications.

Ajouter une option de validation dans l'Action Bar

Pour ajouter une option de validation dans l'Action Bar de la fenêtre "FEN_Fiche_du_produit" :
  1. Affichez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur (via 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 (option "Description" du menu contextuel du champ).
    Description de l'Action Bar

    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. Des numéros permettent d'accéder aux options à configurer.
    Nous utiliserons uniquement les options nécessaires à notre exemple. Pour plus de détails, consultez Description du champ Action Bar.
  4. 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.
  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.
  6. Modifiez les caractéristiques de cette option :
    • Dans la zone "Libellé de l'option", saisissez "Valider".
      Options du champ Action Bar

      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".
      Image prédéfinie de l'option
    • Validez la fenêtre de description.
      Pour revenir à l'interface générale de description de l'Action Bar, il suffit de cliquer sur le bouton  Bouton '2'.
  7. 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.
      Option 'Valider' dans l'Action Bar

      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 :
  8. Enregistrez les modifications en cliquant sur Enregistrer l'élément parmi les boutons d'accès rapide.
  9. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Mise à jour de la liste des produits

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 :
    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)

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

Test de la fenêtre

Lancez le test de la fenêtre "FEN_Liste_des_produits" sous le simulateur (Tester la fenêtre 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é.
Gestion de l'ajout d'un produit

Principe

Le principe de la création d'un produit va être le suivant :
  • 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.

Ouverture de la fiche du produit depuis l'Action Bar

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.
    Description de l'Action Bar
  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".
      Saisie du libellé de l'option
    • Dans la zone "Image prédéfinie", déroulez la liste et sélectionnez "Ajouter".
      Sélection de l'image prédéfinie
    • 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.
      Menu déroulant du champ Action Bar
    • 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 Enregistrer l'élément 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).

Gestion de l'ajout d'un produit

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 via la barre des documents ouverts.
  2. Affichez le code de l'option de validation dans l'Action Bar :
  3. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Test de la fenêtre

Affichez la fenêtre "FEN_Liste_des_produits" sous l'éditeur de fenêtres et lancez son test sous le simulateur (Tester la fenêtre 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.
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.
Utilisation de l'appareil photo et affichage d'une image

Présentation

Nous allons gérer la photo du produit en utilisant l'appareil photo du matériel.
Pour cela, nous allons :
  • 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.
Avertissement
Pour tester cette fonctionnalité, il est nécessaire de réaliser un Go sur l'appareil mobile (et non sur le simulateur). En effet, cette fonctionnalité utilise des ressources matérielles qui ne sont pas accessibles lors d'un Go sur le simulateur. Dans le cas d'un test sur l'appareil mobile, l'assistant de génération de l'application est automatiquement lancé.
Pour plus de détails sur la génération d'une application mobile, vous pouvez consulter les tutos suivants :

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. Positionnez le champ Image à gauche de la fenêtre.
  3. Alignez-le avec le champ Libellé (utilisez les règles d'alignement pour vous aider).
  4. Ajoutez un champ Bouton dans la fenêtre :
    • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton : 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 Menu déroulant à 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 :
    Catalogue d'images
  6. Sélectionnez par exemple l'image Image à sélectionner 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.

Définition du style du champ

Le projet utilise le gabarit "Material 3". Ce champ Bouton utilise le style par défaut défini pour ce type de champ (fond du champ violet). Nous avons déjà modifié ce style en ajoutant l'image. Comme pour ce bouton, le fond violet n'est pas nécessaire, nous allons changer 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 "Material 3".
    Styles du gabarit
  4. Cliquez sur la loupe et indiquez "BTN_Vierge".
    Recherche du style
    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. L'image associée au champ Bouton est conservée.

Prise de photo

Nous allons saisir maintenant le code WLangage permettant de prendre une photo et de l'afficher dans le champ Image de la fiche produit.

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 Enregistrer l'élément 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).

Un bouton pour sélectionner une photo dans l'album de photos

Nous allons ajouter un champ Bouton pour sélectionner une des photos existantes dans l'album de l'appareil et l'associer au produit.

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.
Remarque : Ce champ Bouton correspondant à un "Copier - Coller" du champ Bouton de prise de photo, les caractéristiques de style sont automatiquement les mêmes. Il n'y a pas besoin de les modifier !

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 Enregistrer un élément 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).
Gestion du code-barres du produit

Présentation

Le fichier de données "Produit" contient une rubrique "Code_Barres". Cette rubrique permet de stocker la valeur d'un code-barres. Certains matériels (notamment ceux qui possèdent un appareil photo) peuvent scanner un code-barres pour récupérer sa valeur.
Nous allons gérer le code-barres grâce à l'appareil photo du matériel mais aussi en utilisant une fonction spécifique du WLangage.
Avertissement
Pour tester cette fonctionnalité, il est nécessaire de réaliser un Go sur l'appareil mobile (et non sur le simulateur). En effet, cette fonctionnalité utilise des ressources matérielles qui ne sont pas accessibles lors d'un Go sur le simulateur. Dans le cas d'un test sur l'appareil mobile, l'assistant de génération de l'application est automatiquement lancé.
Pour plus de détails sur la génération d'une application mobile, vous pouvez consulter les tutos suivants :

Mise en place

Tout d'abord nous allons créer un champ Bouton.
A vous de jouer :
Nous avons créé plusieurs boutons dans cette leçon, voici juste quelques indications : Le champ doit être créé à côté du champ "Code-b." (redimensionnez le champ de saisie si nécessaire).
  • Le nom du bouton est "BTN_Code_Barres".
  • Le libellé est vide.
  • Le champ est associé à une image de code-barres via le catalogue d'images (cherchez par exemple avec le mot-clé "Code").

Réduisez si nécessaire la taille du champ.
Comme pour le champ Bouton permettant de prendre une photographie, nous allons modifier le style associé au champ. Le style utilisé étant le même que pour les boutons précédents, nous allons juste "copier" le style :
  1. Sélectionnez le bouton de prise de photo.
  2. Sous le volet "Style", dans le groupe "Style et gabarit", cliquez sur "Copier le style".
  3. Cliquez ensuite sur le champ Bouton que vous venez de créer. Le style est automatiquement appliqué.
Passons au code WLangage de ce champ. Ce code 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 Enregistrer l'élément 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).
Gestion des ancrages dans la fiche Produit
Nous avons positionné tous les champs dans la fiche Produit. Selon les matériels, la résolution verticale et horizontale peut différer.
L'ancrage permet d'adapter la taille des champs à la résolution et permet ainsi d'éviter des zones "Vides" dans la fenêtre (notamment à droite et en bas).
Si le matériel destination de l'application est connu dès la création du projet, les fenêtres ont la taille du matériel cible. Dans ce cas, aucun ancrage n'est nécessaire.
Si le matériel destination n'est pas connu ou est hétérogène, il faut choisir dès la création du projet la plus petite résolution commune. L'ancrage dans ce cas est nécessaire.

Nous allons 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" (Centré horizontalement).
    Gestion des ancrages
  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.
  2. Affichez le menu contextuel de la sélection (clic droit) et sélectionnez l'option "Ancrage".
  3. Sélectionnez l'option "Largeur" (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" (Droite).
Tous les ancrages ont été définis dans la fenêtre. Les flèches rouges indiquant l'orientation des ancrages sont affichées :
Fenêtre sous l'éditeur avec ancrage
Utilisation du champ Carte
Nous allons voir comment manipuler le champ Carte et les fonctions GPS du WLangage.
Notre base de données contient un fichier de données "Magasin". Ce fichier de données contient les adresses de magasins que nous allons localiser sur une carte à l'aide des fonctions de cartographie.

Création de la fenêtre

Tout d'abord, nous allons créer une nouvelle fenêtre et lui ajouter un champ de type Carte.

A vous de jouer :
Comme nous avons déjà créé une fenêtre dans cette leçon, voici juste quelques indications :
  • La fenêtre doit être une fenêtre vierge.
  • Le titre de la fenêtre est "Carte des magasins" (et le nom proposé est donc "FEN_Carte_des_magasins").

Création du champ Carte

Pour créer le champ Carte dans la fenêtre :
  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 dans 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 Enregistrer un élément parmi les boutons d'accès rapide.

Affichage des magasins sur le champ Carte

Nous allons maintenant ajouter le code qui permet d'afficher sur une carte tous les magasins présents dans le fichier de données "Magasin".
Pour cela, nous allons parcourir le fichier de données "Magasin" avec une boucle POUR TOUT. Ensuite, nous allons utiliser des variables de type Marqueur. Une variable de type Marqueur permet de définir une marque qui sera présente sur une carte.
Une marque contient différentes informations. Nous utiliserons uniquement les informations suivantes :
  • Nom,
  • Latitude,
  • Longitude.
La fonction <Carte>.AjouteMarqueur permet d'ajouter la marque sur le champ Carte. Ensuite, il suffit de régler le niveau de zoom suffisant pour voir tous les marqueurs sur le champ Carte. Si le zoom n'est pas correctement réglé, certains marqueurs peuvent ne pas être visibles ou bien se chevaucher sur le champ.

Code WLangage associé à la fenêtre

Nous allons saisir le code WLangage permettant d'afficher les magasins directement dans le code d'initialisation de la fenêtre (la fenêtre contenant uniquement le champ Carte).
Pour saisir le code WLangage permettant d'afficher les magasins :
  1. Affichez le menu contextuel du bouton correspondant à la fenêtre (dans la barre des boutons) et sélectionnez l'option "Code de l'élément". 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 Enregistrer l'élément parmi les boutons d'accès rapide.
  4. Fermez la fenêtre de code.
Lancez le test de la fenêtre "FEN_Carte_des_magasins" sous le simulateur (Tester la fenêtre parmi les boutons d'accès rapide).
Avertissement
Lors du test, la carte peut afficher un message indiquant un problème de chargement. Le champ Carte possède des conditions d'utilisations spécifiques. Ces conditions doivent également être remplies pour que le champ Carte s'affiche correctement sur le mobile. Pour plus de détails, consultez Conditions d'utilisation du champ Carte.
Fermez ensuite le simulateur.
Utilisation d'un champ Zone multiligne
Le champ "Zone multiligne" est un champ très utilisé sur les plateformes mobiles. Ce champ permet de regrouper différents champs :
  • options sur une catégorie,
  • regroupement d'informations sur un contact, etc.
Ce champ peut contenir à la fois :
  • des lignes définies en édition (lignes statiques),
  • des lignes définies en exécution, par programmation (lignes dynamiques).
Nous allons utiliser un champ Zone multiligne pour faire le menu principal de notre application. Nous allons créer une nouvelle fenêtre et y insérer un champ Zone multiligne.
La fenêtre que nous allons réaliser est la suivante :
Fenêtre à réaliser

Création de la fenêtre

Tout d'abord, nous allons créer une fenêtre et lui ajouter un champ de type Zone multiligne.

A vous de jouer :
Comme nous avons déjà créé une fenêtre dans cette leçon, voici juste quelques indications :
  • La fenêtre doit être une fenêtre vierge.
  • Le titre de la fenêtre est "Menu" (et le nom proposé est donc "FEN_Menu").

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.
Le champ Zone multiligne contient actuellement une ligne vierge. Nous allons le modifier pour y ajouter autant de lignes que d'options de notre menu.
Notre menu va comporter 3 options :
  • 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".
      Champ Zone multiligne
  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éé.
Chaque ligne est composée d'un champ Image, d'un champ Libellé et d'une image de flèche. Nous allons maintenant modifier le champ Image et le champ Libellé de chaque ligne afin de représenter l'action du menu.

Modification de la 1ère ligne : accéder à la liste des produits
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 Menu contextuel. 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.
      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.
    Champ Zone multiligne
Modification de la 2ème ligne : accéder à la carte des magasins
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 Menu contextuel. 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.
Modification de la 3ème ligne : sortir de l'application
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 Menu contextuel. 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 Enregistrer l'élément 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).
Test de l'application
Il reste un dernier réglage à effectuer, indiquer que la fenêtre de menu est la première fenêtre de l'application. Pour cela, nous allons lancer un test complet du projet et indiquer quelle est la première fenêtre du projet.

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 Tester la fenêtre 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 Tester le projet 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.
En résumé
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 - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Corrigé".
Cette leçon nous a permis de découvrir de nombreux éléments du développement d'une application mobile :
  • la gestion des enregistrements dans une base de données (ajout et modification),
  • l'utilisation de quelques champs bien utiles dans une application mobile : Zone répétée, carte, zone multiligne,
  • l'utilisation de fonctionnalités spécifiques (photo, code-barres, etc.).
Nous avons également vu l'importance de l'ancrage des champs. Dans la prochaine leçon, nous allons manipuler les agencements, qui permettent notamment d'obtenir une interface complètement différente selon l'orientation utilisée.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 20/12/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale