PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 25 !
  • 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 le champ 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 de la leçon

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 Ouvrir l'éditeur d'analyses parmi les boutons d'accès rapide du menu de WINDEV Mobile.
    2. L'éditeur d'analyses s'affiche.
      Analyse correspondant à ce cours
    3. Cette analyse est composée de 3 fichiers de données :
      • Un fichier de données "Produit", qui contient la description du produit : nom, prix, quantité, ...
      • Un fichier de données "Caractéristique", qui contient les différentes caractéristiques du produit. Par exemple, si le produit est un T-shirt, ses caractéristiques correspondront à la taille, la couleur, ... Le fichier de données "Caractéristique" est donc lié au fichier de données "Produit".
      • Un fichier de données "Magasin", qui contient pour chaque magasin, ses coordonnées GPS.
    4. Fermez l'éditeur d'analyses (cliquez sur la croix en haut à droite de l'éditeur).
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 d'une fenêtre.

Note

L'assistant de création d'une fenêtre présente 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 Créer un parmi les boutons d'accès rapide. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Fenêtre" puis sur "Fenêtre".
    2. Dans l'assistant, sélectionnez l'onglet "Standard". Dans la zone "Téléphone", choisissez "Zone répétée" et validez.

      Note

      Si vous utilisez une configuration iOS, la fenêtre de création d'une nouvelle fenêtre contient des options supplémentaires, spécifiques à iOS.
      Il est possible de créer une fenêtre de type "Zone répétée" sur une plateforme iOS comme sur une plateforme Android.
      Rappel : Les images présentes dans la partie 5 de ce cours utilisent la configuration Android. Si vous utilisez la configuration iOS, des différences peuvent être observées.
    3. L'assistant de création d'une fenêtre se lance.
    4. 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.
      Assistant de création d'une fenêtre
      Passez à l'étape suivante de l'assistant.
    5. L'assistant propose de choisir la source des données associée à la fenêtre. Dans notre cas, il s'agit 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
    6. Passez à l'étape suivante.
    7. Sélectionnez le style du champ Zone répétée : "Image + Titre + Libellé dessous". Ce modèle permet d'obtenir une interface contenant l'image du produit, son nom et sa description.
      Sélection du style du champ Zone répétée
    8. Passez à l'étape suivante.
    9. L'assistant propose automatiquement les rubriques du fichier de données correspondant aux différents champs de la zone répétée générée.
      Paramétrage de la zone répété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 :
      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.
    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é.
      Titre et nom de la fenêtre Zone Répétée
    15. Validez l'assistant. La fenêtre est automatiquement créée, affichée sous l'éditeur et enregistrée.
      Fenêtre créée par l'assistant

      Note

      Dans la fenêtre affichée sous l'éditeur, des données apparaissent automatiquement. Ce concept se nomme "Live Data" : vous voyez les données présentes dans vos fichiers de données en temps réel !
      Cette fonctionnalité est très utile, notamment pour adapter la taille des champs à leur contenu.
  • Nous allons effectuer un premier test dans le simulateur pour visualiser le résultat. 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
  • 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 le volet "Explorateur de projet".
Remarque : Dans cette partie, les images représentant les tests correspondent à une coque Android.
Création de la fenêtre 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.

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 :
Configuration à sélectionner pour l'enregistrement de l'élément

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 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.
      Drag and Drop des rubriques
    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".
      Réorganisation des champs
    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.
        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" (Tester la fenêtre parmi les boutons d'accès rapide).
    1. La fenêtre apparaît avec tous les champs vides.
    2. Fermez le simulateur.
  • Pour afficher les données du produit :
    1. Affichez les événements WLangage associés à la fenêtre :
      • Dans la zone à côté de la fenêtre, faites un clic droit de souris.
      • Dans le menu contextuel qui s'affiche, sélectionnez "Code".
      • L'éditeur de code apparaît.
    2. Dans l'événement "Fin d'initialisation de FEN_Fiche_du_produit", saisissez le code WLangage suivant :
      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". 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

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 documents ouverts :
      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 ..." :
      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.
    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).
  • Testez à nouveau 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.
    • 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.
Action Bar de la fenêtre
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 documents ouverts.
  • Pour ajouter une option de validation dans l'Action Bar de la fenêtre :
    1. Sélectionnez l'Action Bar (en haut de la fenêtre).
    2. Affichez la fenêtre de description de l'Action Bar : clic droit et sélectionnez l'option "Description" du menu contextuel.
      Description de l'Action Bar

      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 (n'importe lequel présent dans la fenêtre). L'interface de saisie d'une option de la barre d'outils apparaît.
    4. Cliquez sur le bouton "+" pour ajouter une option (bouton présent sous la zone "En haut à droite"). Une nouvelle option par défaut est créée en haut à droite.
    5. Modifiez les caractéristiques de cette option :
      • Dans la zone "Libellé de l'option", saisissez "Valider".
        Options du champ Action Bar

        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".
        Image prédéfinie de l'option
      • 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 alt) Bouton '2'.
    6. Le code WLangage de cette option va permettre d'enregistrer les modifications effectuées dans la fenêtre "FEN_Fiche_du_produit". Pour saisir ce code :
      • Sélectionnez si nécessaire le champ Action Bar de la fenêtre.
      • Cliquez sur le bouton "OK".
      • Un menu déroulant avec l'option "Valider" apparaît.
        Option 'Valider' dans l'Action Bar

        Note

        Ce menu déroulant est visible uniquement en édition pour saisir le code WLangage associé à l'option. En exécution, ce menu déroulant ne sera pas affiché.
      • Faites un clic droit sur l'option.
      • Dans le menu contextuel qui s'affiche, sélectionnez l'option "Code".
      • Dans l'événement "Sélection du menu", saisissez le code WLangage suivant :
        EcranVersFichier()
        HEnregistre(Produit)
        Ferme()

        Examinons ces lignes de code :
        • La fonction EcranVersFichier 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 de données pour l'enregistrement courant.
    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).
  • 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)

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

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 WLangage de la fenêtre "Fiche du produit" pour gérer l'ajout dans le fichier de données Produit.
  • Pour ajouter une option dans l'Action Bar de la fenêtre :
    1. Affichez si nécessaire la fenêtre "FEN_Liste_des_produits" sous l'éditeur : cliquez sur le bouton correspondant dans la barre des documents ouverts.
    2. Sélectionnez l'Action Bar (en haut de la fenêtre).
    3. Affichez la fenêtre de description de l'Action Bar : clic droit et sélectionnez l'option "Description" du menu contextuel.
      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 :
        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 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).
  • Maintenant, vérifions la gestion de l'ajout d'un nouvel enregistrement dans la fenêtre de la fiche du produit.
    1. Affichez la fenêtre "FEN_Fiche_du_produit" sous l'éditeur : cliquez sur le bouton correspondant dans la barre des documents ouverts.
    2. Affichez le code de l'option de validation dans l'Action Bar :
      • Sélectionnez l'Action Bar.
      • Cliquez sur le bouton "OK".
      • Un menu déroulant avec l'option "Valider" apparaît.
      • Dans le menu contextuel de l'option "Valider" (clic droit), sélectionnez l'option "Code".
      • Le code WLangage de l'événement "Clic sur" ne change pas :
        EcranVersFichier()
        HEnregistre(Produit)
        Ferme()

        Examinons à nouveau 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 (ce qui est le cas lors de l'ajout d'un nouveau produit), la fonction HEnregistre ajoute un nouvel 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 (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.

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

Création du bouton prise de photo

  • Pour créer le champ Bouton permettant la prise de la photo :
    1. Affichez la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
    2. Ajoutez un champ Bouton dans la fenêtre :
      • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur 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 le mot "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_AppareilPhoto".
    12. Videz le libellé du champ.
    13. Validez la fenêtre de description.
    14. Sous l'éditeur, réduisez la taille du champ.
  • Ce champ Bouton utilise le style par défaut du gabarit "Phoenix" associé au projet : le fond du champ est bleu. Dans notre cas, le fond bleu n'est pas nécessaire. Nous allons modifier le style associé au champ :
    1. Sélectionnez si nécessaire le champ Bouton que vous venez de créer.
    2. Affichez le menu contextuel et sélectionnez l'option "Choisir un style".
    3. La fenêtre qui s'affiche liste tous les styles utilisables pour les champs Bouton présents dans le gabarit Phoenix.
      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 en utilisant la touche Entrée. Le style "BTN_Vierge" est automatiquement sélectionné.
    6. Validez la fenêtre de sélection des styles.
    7. Le style choisi est automatiquement appliqué au champ Bouton.

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
      sPhoto est une chaîne
      // On lance l'appareil photo
      sPhoto = VidéoLanceAppli(viCaptureImage)
      SI sPhoto <> "" ALORS
      IMG_Photo = sPhoto
      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).

Sélection d'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_AppareilPhoto" 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_AppareilPhoto" : 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
      sPhoto est une chaîne
      // On lance la sélection
      sPhoto = AlbumSélecteur(albumImage)
      SI sPhoto <> "" ALORS
      IMG_Photo = sPhoto
      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

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 un champ Bouton permettant de gérer des codes-barres :
    1. Affichez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
    2. Ajoutez un champ Bouton dans la fenêtre :
      • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton.
      • La forme du champ apparaît sous la souris.
      • Créez le champ à côté du champ "Code-barres" (redimensionnez le champ de saisie si nécessaire).
    3. Affichez la fenêtre de description du champ Bouton (double-cliquez sur le champ) :
      • Donnez un nom au champ : "BTN_Code_Barres".
      • Videz le libellé du champ.
      • Sélectionnez une image de code-barres dans le catalogue d'images (cherchez par exemple avec le mot-clé "Code").
    4. Validez la fenêtre de description.
    5. Sous l'éditeur, réduisez la taille du champ.
  • Comme pour le champ Bouton permettant de prendre une photographie, nous allons modifier le style associé au champ :
    1. Sélectionnez si nécessaire le champ Bouton que vous venez de créer.
    2. Affichez le menu contextuel et sélectionnez l'option "Choisir un style".
    3. Dans la fenêtre listant les styles disponibles, cliquez sur la loupe et indiquez "BTN_Vierge".
      Recherche du style
    4. Validez en utilisant la touche Entrée. Le style "BTN_Vierge" est automatiquement sélectionné.
    5. Validez la fenêtre de sélection des styles.
    6. Le style choisi est automatiquement appliqué au champ Bouton.
  • Le code WLangage de ce champ Bouton va permettre de scanner le code-barres.
    1. Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Code".
    2. Saisissez le code WLangage suivant dans l'événement "Clic sur" :
      // Variable locale
      cb est un CodeBarres
      // Lancement du scan
      cb = CBCapture()
      SI cb..Contenu <> "" ALORS
      SAI_Code_barres = cb..Contenu
      FIN
      Dans ce code WLangage, la fonction CBCapture permet de décoder les informations stockées dans un code-barres en utilisant la caméra de l'appareil.
    3. Enregistrez les modifications en cliquant sur 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).
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) :
      • 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) :
      • 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" (Largeur).
    4. Validez.
  • Répétez cette opération pour le champ Bouton permettant la gestion des codes-barres. 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.
  • Pour créer la fenêtre :
    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 é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 Enregistrer un élément parmi les boutons d'accès rapide.

Affichage des magasins sur le champ Carte

Principe
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 CarteAjouteMarqueur 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.
Mise en place
  • Pour saisir le code WLangage permettant d'afficher les magasins :
    1. Faites un clic droit à l'extérieur de la fenêtre. Dans le menu contextuel, sélectionnez l'option "Code". Les différents événements WLangage associés à la fenêtre s'affichent.
    2. Saisissez le code WLangage suivant dans l'événement "Déclarations globales de ...".
      // Variables globales
      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 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).
  • 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). 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 :
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.
  • Pour créer la fenêtre :
    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, 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".
        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.

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

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
      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 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.
  • 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.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 25
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire