DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 2024 !
Aide / Tuto WINDEV Mobile / Tuto - Développement d'une application Android et iOS
  • Leçon 6 - Imprimer le catalogue produit
  • Présentation
  • Création de l'état
  • Test de l'état
  • Modifications de l'état
  • Suppression des libellés
  • Modification du libellé du produit
  • Photo, référence et description du produit
  • Code-barres du produit
  • Prix du produit
  • Date de réapprovisionnement du produit
  • Test de l'état
  • Lancement de l'impression d'un état par programmation
  • Ajouter une option dans le champ Zone multiligne
  • Paramétrer l'option ajoutée
  • Programmation de l'impression
  • En résumé

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

Leçon 6 - Imprimer le catalogue produit
Ce que vous allez apprendre :
  • Créer un état de type fiche.
  • Lancer l'impression d'un état.
Durée de la leçon 20 mn
Présentation
Cette leçon permet d'imprimer la liste des produits triés par référence.
Pour cela, nous allons utiliser un état de type fiche, qui permet de représenter clairement un catalogue de données.
Qu'est-ce qu'un état ?
Un état permet d'obtenir une vue personnalisée d'informations : données saisies dans la base de données, présentes dans un fichier texte, provenant d'un champ Table, etc.
Un état est créé selon le principe suivant :
  • les données à imprimer sont issues d'une source de données (fichier de données décrit dans une analyse, requête, etc.).
  • l'état regroupe, trie et met en forme les données.
L'état créé peut ensuite être affiché dans l'application mobile dans un fichier PDF.


Avertissement
Cette leçon est basée sur l'exemple WM Gestion Produits, manipulé dans la leçon 1. Pour suivre cette leçon, vous devez avoir effectué les manipulations des leçons précédentes.
Création de l'état
Nous allons tout d'abord créer un état de type Fiche. Pour cela, nous allons utiliser l'assistant de création d'états de WINDEV Mobile :
  1. Cliquez sur le bouton Créer un élément parmi les boutons d'accès rapide.
  2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Etat" puis sur "Etat". L'assistant de création d'un état se lance. L'assistant de création d'un état propose plusieurs types d'états :
    Assistant de création d'un état - Type de l'état
  3. Sélectionnez "Fiche". Passez à l'étape suivante.
  4. Sélectionnez la source des données de l'état. L'état va être basé sur le fichier de données Produit. Sélectionnez "Un fichier de données ou une requête existante".
    Assistant de création d'un état - Source de données
    Passez à l'étape suivante.
  5. Dans la liste des fichiers de données et des requêtes, sélectionnez le fichier de données "Produit".
    Assistant de création d'un état - Sélection du fichier de données
    Passez à l'étape suivante.
  6. Définissez la clé de parcours du fichier de données. Dans notre cas, nous allons parcourir le fichier de données Produit selon la référence du produit. Sélectionnez la clé de parcours "Référence".
    Assistant de création d'un état - Parcours du fichier de données
    Passez à l'étape suivante.
  7. L'assistant permet maintenant de définir les options de tri des données dans l'état. Par défaut, l'assistant propose la rubrique utilisée comme clé de parcours du fichier de données.
    Assistant de création d'un état - Tri des données
    Conservez les options par défaut et passez à l'étape suivante.
  8. L'assistant demande d'indiquer s'il y a une rupture.
    Qu'est-ce qu'une rupture ?
    Une Rupture est une opération qui consiste à regrouper des enregistrements (ou lignes) suivant un ou plusieurs critères. Attention, les enregistrements (ou lignes) sont bien entendu imprimés.
    Une rupture est OBLIGATOIREMENT liée à un tri.
    Pour plus de détails, consultez Rupture dans un état.
    Assistant de création d'un état - Rupture
  9. Dans cet exemple, nous n'utiliserons pas de rupture. Répondez "Je ne veux pas de rupture dans l'état". Passez à l'étape suivante.
  10. Cette étape permet d'indiquer dans quel ordre sont imprimées les rubriques et leur répartition dans les différents blocs.
    • La rubrique IDProduit ne sera pas affichée dans l'état : décochez la rubrique IDProduit.
    • Les rubriques seront affichées dans le bloc Corps selon l'ordre suivant :
      • Libellé
      • Photo
      • Description
      • Code_Barres
      • Prix
      • Reférence
      • Quantité
      • DateRéAppro
    • Pour chaque rubrique, sélectionnez la ligne correspondante et utilisez les boutons fléchés à droite de la liste pour modifier sa position dans la liste.
      Assistant de création d'un état - Rubriques à afficher
  11. Passez à l'étape suivante.
  12. L'état affichant des rubriques de type numérique, cette étape permet de définir si des calculs doivent être effectués dans l'état. Dans notre exemple, aucun calcul ne doit être réalisé. Cliquez sur le bouton "Aucun calcul".
    Assistant de création d'un état - Rupture
    Passez à l'étape suivante.
  13. Cette étape permet de définir la mise en page de l'état.
    Assistant de création d'un état - Format du papier
    Nous garderons les valeurs par défaut avec l'orientation "Portrait".
    Marges d'impression
    Lors du choix des marges d'impression, n'oubliez pas de tenir compte des marges physiques des imprimantes. Les marges physiques sont les marges réservées par l'imprimante dans lesquelles il n'est pas possible d'imprimer. De plus, les marges physiques diffèrent en fonction des modèles d'imprimante.
  14. Passez à l'étape suivante.
  15. Cette étape permet de sélectionner le gabarit utilisé pour l'état. Il est conseillé d'utiliser le même gabarit que pour les fenêtres. Dans notre cas, sélectionnez par exemple le gabarit "Material 3".
    Assistant de création d'un état - Gabarit de l'état
    Passez à l'étape suivante.
  16. Il ne reste plus qu'à donner un nom et un libellé à l'état et à le sauvegarder.
    • Saisissez le nom : "ETAT_Produit".
    • Saisissez le titre : "Catalogue Produits".
      Avertissement
      Le nom et le titre sont différents.
  17. Validez.
  18. L'état apparaît sous l'éditeur d'états.
    Etat en édition
  19. Enregistrez l'état (Ctrl + S).
L'état est généré. Nous allons immédiatement le tester pour voir le résultat.
Test de l'état
Pour lancer le test de l'état que nous venons de réaliser :
  1. Cliquez sur Tester l'élément parmi les boutons d'accès rapide.
  2. Dans la fenêtre de choix du mode d'impression, sélectionnez "Visualisateur de rapports".
    Choix du mode d'impression
  3. Validez. L'état s'exécute et s'affiche à l'écran en mode "Aperçu".
    Affichage de l'état
Vous pouvez imprimer directement la page en cours ou la totalité du document en cliquant sur l'imprimante (volet "Imprimer").
Fermez le visualisateur de rapports.
L'impression via le visualisateur de rapports permet d'obtenir un aperçu réel de l'impression. Ce mode d'impression est disponible uniquement lors du développement de l'application mobile.
Modifications de l'état
Grâce à l'assistant, nous obtenons rapidement un état directement utilisable.
Pour vous permettre de découvrir les fonctionnalités de l'éditeur d'états, nous allons effectuer quelques modifications dans l'état créé automatiquement afin qu'il ressemble plus à un catalogue produit.

Suppression des libellés

Dans un état, le libellé d'un champ et son contenu sont indépendants. Par exemple, les informations correspondant à la description du produit sont affichées dans l'état par deux champs :
  • un champ Libellé qui contient le libellé du champ ("Descr.:" dans notre état).
  • un champ Libellé lié à la rubrique du fichier de données dans lequel les données seront affichées.
Dans notre cas, pour optimiser la présentation de notre état, supprimez les libellés des champs suivants : Libellé, Description, Code-barres, Prix et Référence.

Modification du libellé du produit

Nous allons afficher le libellé du produit en police Arial 20.
Pour cela :
  1. Sélectionnez le champ correspondant au libellé du produit.
  2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
  3. Dans l'onglet "Style", sélectionnez l'élément "Libellé principal".
  4. Pour l'option "Police", sélectionnez "Arial".
  5. Pour l'option "Taille", saisissez 20.
  6. Validez la fenêtre de description.
  7. Adaptez la taille du champ (option "Adapter la taille" du menu contextuel) et positionnez-le en haut à gauche du bloc "Corps".

Photo, référence et description du produit

Sélectionnez les différents champs présents dans la page (Description, code-barres, prix, référence et date de réappro) et déplacez-les vers la moitié droite de l'état.
Sélectionnez la photo du produit. Ce champ doit être agrandi et positionné sous le libellé du produit.
Réduisez la taille du champ affichant la référence, et positionnez-le sous l'image du produit.
Sélectionnez le champ correspondant à la description du produit et positionnez-le à droite du champ Image. Diminuez sa taille si nécessaire.

Code-barres du produit

Le code-barres du produit apparaît dans l'état sous la forme d'un libellé. Nous allons le remplacer par un champ Code-barres.
  1. Supprimez le champ affichant le code-barres du produit.
  2. Déplacez les champs placés dessous vers le bas.
  3. Sous le volet "Création", dans le groupe "Données", déroulez "Code-barres" et sélectionnez "EAN 128". Cliquez dans l'état sous le champ correspondant à la description du produit.
Nous allons maintenant associer le champ Code-barres à la rubrique correspondante dans le fichier de données :
  1. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
  2. Dans l'onglet "Liaison", sélectionnez la rubrique "Code_Barres" du fichier de données Produit.
  3. Validez la fenêtre de description du champ.

Prix du produit

Pour le prix du produit, nous allons modifier le style de ce champ afin que le prix soit visible dans le catalogue :
  1. Déplacez le champ correspondant au prix du produit à droite du champ Code-barres.
  2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
  3. Dans l'onglet "Style", sélectionnez l'élément "Libellé principal".
  4. Les modifications à effectuer sont :
    • Pour l'option "Taille", saisissez 20.
    • Cochez les cases "G" (gras) et "I" (Italique).
  5. Validez la fenêtre de description.
  6. Agrandissez si nécessaire le champ pour que le libellé apparaisse en entier.

Date de réapprovisionnement du produit

Modifiez le libellé du champ "Réappro." :
  1. Sélectionnez le champ "Réappro.".
  2. Appuyez sur la touche Espace du clavier : le libellé passe en modification.
  3. Remplacez le libellé par "Date de réappro.".
  4. Validez (touche Entrée).
  5. Affichez le menu contextuel du champ et sélectionnez l'option "Adapter la taille".
Alignez à droite la date de réapprovisionnement :
  1. Sélectionnez le champ correspondant à la date de réapprovisionnement.
  2. Sous le volet "Modification", dans le groupe "Edition rapide", cliquez sur l'icône "Aligné à droite".
  3. La date est automatiquement alignée à droite.
Les champs concernant la quantité et la date de réapprovisionnement vont être déplacés sous le prix :
  1. Sélectionnez les champs (libellés et rubriques) correspondant à la quantité et à la date de réapprovisionnement.
  2. Positionnez ces champs sous le code-barres.

Test de l'état

Vous obtenez l'état suivant sous l'éditeur :
Etat en édition
Enregistrez l'état (Ctrl + S).
L'état est terminé. Nous allons immédiatement le tester pour voir le résultat.
Exécutez cet état en cliquant sur Tester l'élément parmi les boutons d'accès rapide.
Choisissez "Visualisateur de rapports" et validez. L'état s'exécute et s'affiche dans le visualisateur de rapports.
Affichage de l'état
Vous pouvez imprimer directement la page en cours ou la totalité du document en cliquant sur l'imprimante (volet "Imprimer").
Fermez le visualisateur de rapports puis le simulateur.
Lancement de l'impression d'un état par programmation
Notre état étant terminé, il faut maintenant intégrer son impression depuis notre application. Dans la fenêtre "FEN_Menu", nous allons ajouter une nouvelle option dans le champ Zone multiligne pour lancer directement l'impression de cet état.

Ajouter une option dans le champ Zone multiligne

Pour insérer une nouvelle option dans la fenêtre "FEN_Menu" :
  1. Affichez la fenêtre "FEN_Menu" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur" par exemple).
  2. Sélectionnez le champ Zone multiligne qui permet d'afficher le menu.
  3. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
  4. Dans l'onglet "Général", ajoutez une nouvelle ligne entre l'option "Carte des magasins" et l'option "Quitter l'application" :
    • Cliquez sur le bouton "Nouvelle".
    • Dans l'assistant qui s'affiche, choisissez "Ligne simple avec picto".
    • Cliquez sur "Terminer".
  5. Dans la fenêtre de description du champ Zone multiligne, sélectionnez la ligne ajoutée et utilisez la flèche pour remonter la ligne à la position supérieure (avant "Quitter l'application").
  6. Validez la fenêtre de description.
Nous allons maintenant modifier la ligne que nous avons insérée.

Paramétrer l'option ajoutée

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_Imprimer").
    • Cliquez sur le bouton Menu contextuel à droite du champ "Image". 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 "Imprimer" 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 "Imprimer") 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_Imprimer").
    • Changez le libellé (par exemple "Imprimer le catalogue").
  4. Validez la fenêtre de description.
  5. Le menu apparait sous l'éditeur.
Le Libellé "Imprimer le catalogue" apparaît en gris. Nous allons copier le style du libellé "Carte des magasins" pour l'appliquer à notre nouveau libellé :
  1. Sélectionnez le champ Libellé "Carte des magasins".
  2. Sous l'onglet "Style", dans le groupe "Style et gabarit", cliquez sur le bouton "Copier le style".
  3. Le curseur de souris se transforme en pinceau.
  4. Cliquez sur le champ Libellé "Imprimer le catalogue". Le style est automatiquement appliqué au champ.
Vous obtenez la fenêtre suivante :
Menu en édition

Programmation de l'impression

Nous allons changer le code WLangage utilisé pour la sélection du champ Zone multiligne.
  1. Sélectionnez le champ Zone multiligne.
  2. Affichez les événements WLangage associés (touche F2).
  3. Remplacez la ligne :
    CAS 3 // Sortir de l'application
    Ferme()
    par :
    CAS 3 // Imprimer le catalogue
    iDestination(iPDFGénérique)
    ETAT_Produit.Imprime()
    // Ouverture du fichier 
    LanceAppliAssociée(iDernierFichier())
    CAS 4 // Sortir de l'application 
    Ferme()
    Dans ce code WLangage :
    • la fonction iDestination permet de paramétrer la destination de l'impression. Dans notre cas (une application mobile), l'état que nous avons créé va être imprimé sous forme d'un fichier PDF grâce à la constante iPDFGénérique.
    • la fonction <Etat>.Imprime permet de lancer l'impression de l'état ETAT_Produit. Le fichier PDF correspondant est donc créé.
    • la fonction LanceAppliAssociée permet d'afficher le fichier PDF généré dans le lecteur de PDF (connu par la fonction iDernierFichier) disponible sur le périphérique en cours.
  4. Enregistrez les modifications en cliquant sur Enregistrer l'élément 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 la fenêtre et ses options de menu en cliquant sur Tester l'élément parmi les boutons d'accès rapide. Sous le simulateur, le fichier PDF correspondant au catalogue produit est généré et ouvert dans le lecteur PDF utilisé par le poste en cours.
Dans notre exemple, le menu étant également affiché en tant que fenêtre coulissante, l'impression du catalogue produit peut également être ajouté de la même manière dans la fenêtre FI_ZML_Options.
En résumé
Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient les différentes fenêtres et états créés et manipulés dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Corrigé".
Cette leçon nous a permis de découvrir la création et la modification d'un état, ainsi que son impression par programmation.
Dans la prochaine leçon, nous nous arrêterons sur l'utilisation des Webservices dans une application WINDEV Mobile.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 24/11/2023

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