PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 24 !
  • Ce que vous allez apprendre dans cette leçon ...
  • Analyse du projet
  • Afficher la liste des produits
  • Création de la fenêtre
  • Création de la fenêtre fiche
  • Création de la fenêtre
  • Création des champs
  • Affichage de la fiche depuis la liste des produits
  • Gestion de la création et de la modification d'un produit
  • Modification de la fiche produit
  • Création d'un nouveau produit
  • Utilisation de l'appareil photo et affichage d'une image
  • Présentation
  • Création du bouton prise de photo
  • Prise de photo
  • Sélection d'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 la carte
  • 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
Leçon 5.2. Développement de l’application
Ce que vous allez apprendre dans cette leçon ...
  • Créer une fenêtre contenant une zone répétée.
  • Champs spécifiques : champ Zone répétée, champ Zone multiligne, champ Carte, ...
  • Manipulation de la base de données.
  • Fonctionnalités spécifiques à l'appareil utilisé (GPS, Photo, ...).

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Analyse du projet
Examinons notre projet de départ. Ce projet ne contient aucune fenêtre. Il contient uniquement l'analyse décrivant les fichiers de données HFSQL Classic que nous allons utiliser. Les fichiers de données correspondants sont fournis avec des données pour réaliser les différents tests.
  • 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 "Produit", qui contient la description du produit : nom, prix, quantité, ...
      • Un fichier "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, ... Le fichier "Caractéristique" est donc lié au fichier "Produit".
      • Un fichier "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).
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".
Nous allons créer cette fenêtre grâce à l'assistant de création de fenêtres.

Note

L'assistant de création de fenêtres propose de nombreuses fenêtres prédéfinies. Ces fenêtres proposent des interfaces modernes pour vos applications.
La plupart de ces fenêtres peuvent être directement générées à partir de vos données, en intégrant le code WLangage nécessaire à leur fonctionnement. Elles sont immédiatement utilisables.

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.
    3. L'assistant de création d'une fenêtre se lance.
    4. Si vous avez ajouté la plateforme iOS, plusieurs plateformes sont proposées. Il est conseillé de choisir la plateforme ayant la plus petite résolution. Passez à l'étape suivante de l'assistant à l'aide des boutons fléchés en bas de la fenêtre.
    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 Produit.
    6. Passez à l'étape suivante.
    7. Sélectionnez le style de la 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 à 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 de la zone répétée par simple balayage de la ligne correspondante.
      • Générer un code d'ouverture de fiche : Si cette option est choisie, l'assistant propose alors de générer une fenêtre fiche en saisie ou en affichage.
    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.

      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 en temps réel !
      Cette fonctionnalité est très utile, notamment pour adapter la taille des champs à leur contenu.
  • Nous allons effectuer un premier test dans le simulateur 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, il suffit d'activer cette plateforme en double-cliquant sur son nom dans l'explorateur de projet.
Remarque : Dans cette partie, les images représentant les tests correspondent à une coque Android.
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 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

Si 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 "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 "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 ("Nom", "Code-barres", "Date de 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", "Nom", "Prix", "Quantité", "Code-barres", "Date de réappro.", "Description".
    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). La fenêtre apparaît avec tous les champs vides.
  • Pour afficher les données du produit :
    1. Affichez les traitements 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 le traitement "Fin d'initialisation de FEN_Fiche_du_produit", saisissez le code suivant :
      FichierVersEcran()

      La fonction FichierVersEcran permet d'afficher dans les champs 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". Cette zone répétée est liée au fichier Produit.
    3. Fermez la fenêtre de code.
    4. Enregistrez la fenêtre.

Affichage de la fiche depuis la liste des produits

Nous allons maintenant voir comment afficher la fiche du produit sélectionné dans 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 éléments ouverts :
    2. Faites un clic droit sur le champ Zone répétée et dans le menu qui s'affiche, sélectionnez l'option "Code".
    3. Dans la fenêtre de code qui apparaît, saisissez le code suivant dans le traitement "Sélection d'une ligne de ..." :
      OuvreFenêtreMobile(FEN_Fiche_du_produit)

      Note

      Laissez-vous guider par l'assistance à la saisie de code : dès que vous allez taper la parenthèse ouvrante "(", une liste déroulante va s'ouvrir proposant le nom de toutes les fenêtres existantes dans le projet. Il suffit de sélectionner la fenêtre au clavier ou à la souris.
      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.
    4. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
    5. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
  • 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.
Gestion de la création et de la modification d'un produit
Nous allons maintenant modifier nos deux fenêtres afin de gérer l'ajout et la modification d'un produit.

Modification de la fiche 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.
Aucune modification n'est à faire.
Nous allons rajouter un bouton de validation dans l'Action Bar de la fenêtre "FEN_Fiche_du_produit" pour gérer la validation des modifications.
  • 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 éléments 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.
      Si votre projet utilise uniquement une configuration de projet Android, seules les options correspondant à l'Action Bar pour Android sont affichées.
      De même, pour une configuration de projet iOS, seules les options correspondant à l'Action Bar pour iOS sont affichées.
      Si votre 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 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. L'interface de saisie d'une option de la barre d'outils apparaît.
    4. Cliquez sur le bouton "+" pour ajouter une option. Une nouvelle option par défaut est créée en haut à droite.
    5. Modifiez les caractéristiques de cette option :
      • Dans la zone "Libellé", 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 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 le traitement "Sélection du menu", saisissez le code suivant :
        EcranVersFichier()
        HEnregistre(Produit)
        Ferme()

        Examinons ce code :
        • La fonction FichierVersEcran permet d'initialiser les rubriques avec les valeurs des champs liés, pour l'enregistrement courant.
        • La fonction HEnregistre permet de mettre à jour les données du fichier 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 le traitement "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 éléments 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 le traitement "Fermeture d'une fenêtre fille", le code suivant est automatiquement affiché :
      ZoneRépétéeAffiche(ZR_Produit, taCourantBandeau)
      Examinons ce code :
      • Le traitement "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 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 a été automatiquement généré lors de la création de la fenêtre par l'assistant.
    3. 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

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 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 éléments 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. 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é", 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 de cette option va permettre d'ouvrir la fenêtre "Fiche du produit", en mettant ses champs à vide. Pour saisir ce code :
      • 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 le traitement "Sélection du menu", saisissez le code suivant :
        HRAZ(Produit)
        OuvreFenêtreMobile(FEN_Fiche_du_produit)

        La fonction HRAZ 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 éléments 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 traitement "Clic sur" ne change pas :
        EcranVersFichier()
        HEnregistre(Produit)
        Ferme()

        Examinons ce code :
        • Par défaut, la fonction HEnregistre est équivalente à la fonction HModifie (modification de l'enregistrement courant dans le fichier de données).
        • Si la fonction HRAZ a été appelée précédemment, la fonction HEnregistre fait un ajout d'enregistrement dans le fichier de données (équivalent à la fonction HAjoute).
    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

Si votre projet utilise plusieurs plateformes, faites 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

Attention !

Ce paragraphe nécessite un matériel comportant un appareil photo. Si ce n'est pas le cas, vous pouvez passer au paragraphe suivant.
De plus, ce paragraphe nécessite l'installation de l'application sur le matériel car il utilise des ressources matérielles qui ne sont pas accessibles en mode Simulation.

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 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 bouton permettant de sélectionner une photo dans l'album du mobile.

Création du bouton prise de photo

  • Pour créer le bouton de prise de la photo :
    1. Affichez la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
    2. Ajoutez un bouton dans la fenêtre :
      • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur  : la forme du bouton apparaît sous la souris.
      • Cliquez ensuite en haut à droite de l'image du produit pour créer le bouton.
  • Nous allons modifier le bouton pour lui associer une image représentant un appareil photo :
    1. Sélectionnez le bouton 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 le mot "photo", puis sélectionnez le thème "Android Holo" et validez. Plusieurs images apparaissent :
    6. Sélectionnez par exemple la seconde 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 bouton.
    11. Donnez un nom au bouton : "BTN_AppareilPhoto".
    12. Videz le libellé du bouton.
    13. Validez la fenêtre de description.
    14. Sous l'éditeur, réduisez la taille du bouton.

Prise de photo

Nous allons saisir maintenant le code pour prendre une photo et l'afficher dans le champ Image de la fiche produit.
  • Pour gérer la prise de photo :
    1. Dans le menu contextuel du bouton (clic droit), sélectionnez l'option "Code".
    2. Saisissez le code suivant dans le traitement "Clic sur" :
      // Variable locale
      sPhoto est une chaîne
      // On lance l'appareil photo
      sPhoto = VidéoLanceAppli(viCaptureImage)
      SI sPhoto <> "" ALORS
      IMG_Photo = sPhoto
      FIN
      Dans ce code, 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

Nous allons ajouter un bouton pour sélectionner une des photos existantes dans l'album de l'appareil et l'associer au produit.
  • Pour créer le bouton de sélection de la photo, nous allons simplement faire un "Copier - Coller" du bouton de prise de photo que nous venons de créer :
    1. Sélectionnez le bouton "BTN_AppareilPhoto" que vous venez de créer.
    2. Utilisez la combinaison de touches Ctrl + C : le 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 bouton apparaît sous le curseur.
    4. Cliquez dans la fenêtre à côté du bouton "BTN_AppareilPhoto" : le nouveau bouton est automatiquement créé.
    5. Affichez la fenêtre de description du bouton (double-cliquez sur le champ) :
      • Donnez un nom au bouton : "BTN_Album_Photo".
      • Sélectionnez une image dans le catalogue d'images.
    6. Validez la fenêtre de description.
  • Le code de ce 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 du traitement "Clic sur" par le code suivant :
      // Variable locale
      sPhoto est une chaîne
      // On lance la sélection
      sPhoto = AlbumSélecteur(albumImage)
      SI sPhoto <> "" ALORS
      IMG_Photo = sPhoto
      FIN
      Dans ce code, 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).
Gestion du code-barres du produit

Attention !

Ce paragraphe nécessite un matériel comportant un appareil photo.
Si ce n'est pas le cas, vous ne pourrez pas tester son utilisation.
De plus, ce paragraphe nécessite l'installation de l'application sur le matériel car il utilise des ressources matérielles qui ne sont pas accessibles en mode Simulation.

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.

Mise en place

  • Pour créer le bouton de gestion des codes-barres :
    1. Affichez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
    2. Ajoutez un bouton dans la fenêtre :
      • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
      • La forme du bouton apparaît sous la souris.
      • Créez le bouton à côté du champ "Code-barres" (redimensionnez le champ de saisie si nécessaire).
    3. Affichez la fenêtre de description du bouton (double-cliquez sur le champ) :
      • Donnez un nom au bouton : "BTN_Code_Barres".
      • Videz le libellé du bouton.
      • 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 bouton.
  • Le code de ce bouton permet de scanner le code-barres.
    1. Dans le menu contextuel du bouton (clic droit), sélectionnez l'option "Code".
    2. Saisissez le code suivant dans le traitement "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, 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 en haut à droite de l'éditeur de code).
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. 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.
  • 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) :
      • la photo du produit,
      • le bouton de prise de photo,
      • le 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) :
      • Nom
      • Code-barres
      • Date de réappro.
      • Description
    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 bouton de gestion des codes-barres. 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 :
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.
  • 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.
    3. Un message concernant la gestion des ascenseurs de la fenêtre apparaît. En effet, la fenêtre comme le champ Carte possèdent chacun leur propre ascenseur. Il y a donc un conflit. Un seul ascenseur doit être activé. Il est préférable :
      • de désactiver l'ascenseur de la fenêtre car la fenêtre a une taille fixe,
      • de garder actif l'ascenseur du champ Carte.
    4. Cliquez sur "Désactiver l'ascenseur automatique". Le champ Carte apparaît sous l'éditeur de fenêtres.
    5. Affichez la fenêtre de description du champ "Carte" (double-clic sur le champ par exemple).
    6. Dans la fenêtre de description du champ, indiquez le nom du champ "CARTE_MAGASIN" et validez.
    7. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.

Affichage des magasins sur la carte

Principe
Nous allons maintenant ajouter le code qui permet d'afficher sur une carte tous les magasins présents dans le fichier "Magasin".
Pour cela, nous allons parcourir le fichier "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 CarteAjouteMarqueur permet d'ajouter la marque sur la carte. Ensuite, il suffit de régler le niveau de zoom suffisant pour voir tous les marqueurs sur la carte. Si le zoom n'est pas correctement réglé, certains marqueurs peuvent ne pas être visibles ou bien se chevaucher sur la carte.
Mise en place
  • Pour saisir le code 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 traitements associés à la fenêtre s'affichent.
    2. Saisissez le code suivant dans le traitement "Déclarations globales de ...".
      // Variables globales
      gMarqueur est un Marqueur
      // On charge les magasins
      POUR TOUT Magasin
      // Coordonnées du marqueur
      gMarqueur.Position.Latitude = Magasin.Latitude
      gMarqueur.Position.Longitude = Magasin.Longitude
      // Nom du marqueur
      gMarqueur.Nom = Magasin.Nom
      // Ajout du marqueur
      CarteAjouteMarqueur(CARTE_MAGASIN,gMarqueur)
      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 en haut à droite de l'éditeur de code).
  • 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.
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, ...
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 :

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

Programmation du menu

  • Pour terminer, nous allons écrire le code 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 la section de code "Sélection (clic) d'une ligne dans ...", saisissez le code suivant :
      SELON ZM_MENU
      CAS 1 // Liste des produits
      OuvreFenêtreMobile(FEN_Liste_des_produits)
      CAS 2 // Carte des magasins
      OuvreFenêtreMobile(FEN_Carte_des_magasins)
      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).
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 l'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 l'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.
  • Pour lancer le test du projet :
    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.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire