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

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

Création de la fenêtre

1. Cliquez sur 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").
   
   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.
     
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.
   
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.
    
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 :
    
    • 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é.
    
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).
    
    
    
    

    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.

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

1. Cliquez sur parmi les boutons d'accès rapide (ou utilisez la touche F9).
   
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

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.

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

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

Amélioration de l'UI

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.

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.

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).
   
3. Nous voulons que les bords externes et internes des champs soient alignés. Cliquez sur l'option "Justifier (Int. et Ext.)".
   

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.

Vous obtenez le résultat suivant.

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.

1. Lancez le test de 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.

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

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

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

   
   
   

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

1. Cliquez sur 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.

Ajouter une option de validation dans l'Action Bar

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

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

     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.
     
     

     Pour revenir à l'interface générale de description de l'Action Bar, il suffit de cliquer sur le bouton .
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.
     
     
     
     

     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.
8. Enregistrez les modifications en cliquant sur 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

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)

   
   
   

   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

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

Principe

• 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

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

Gestion de l'ajout d'un 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 :
   • 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).

Test de la fenêtre

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

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.

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 :

• Déployer une application Android.
• Déployer une application iOS.

Création du bouton prise de 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  : la forme du champ apparaît sous la souris.
   • Cliquez ensuite en haut à droite du champ Image pour créer le champ Bouton.

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.

Définition du style du 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".
   
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. L'image associée au champ Bouton est conservée.

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

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

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.

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

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 :

• Déployer une application Android.
• Déployer une application iOS.

Mise en place

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

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

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.

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

Création du 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 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 parmi les boutons d'accès rapide.

Affichage des magasins sur le champ Carte

• Nom,
• Latitude,
• Longitude.

Code WLangage associé à la fenêtre

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

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

• 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

Création du 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

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

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.
     
     

     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.

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.
   

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.

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.

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.

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.

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.

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

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

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.

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.

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

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