PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 27 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Création de l'état
  • Modification de l'état
  • Lancement de l'impression d'un état par programmation
Leçon 4.6. Imprimer le catalogue produit
Ce que vous allez apprendre dans cette leçon
  • Créer un état de type fiche.
  • Lancer l'impression d'un état.
Durée de la leçon

Durée estimée : 20 mn
Leçon précédenteSommaireLeçon suivante
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.

  • Pour suivre cette leçon, ouvrez si nécessaire le projet "WM Gestion Produits" que vous avez manipulé dans la leçon précédente.
    1. Affichez la page d'accueil de WINDEV Mobile (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 4 - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS (Exercice)".
    3. WINDEV Mobile vous propose d'ouvrir le projet que vous avez manipulé dans la leçon précédente. Vous pouvez ouvrir le projet présent sur votre poste ou ouvrir le projet original. Choisissez "Ouvrir la copie locale".

      Corrigé

      Si vous n'avez pas créé l'application "WM Gestion Produits" dans la partie précédente, un projet corrigé est disponible. Ce projet contient toutes les différents éléments créés dans cette partie et vous permet de vérifier vos manipulations.
      Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 4 - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS (Corrigé)".
Création de l'état
  • Pour créer un état :
    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 "D'un fichier de données ou d'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. Conservez les options par défaut et passez à l'étape suivante.
    8. L'assistant demande d'indiquer s'il y a une rupture.

      Note

      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.
      Assistant de création d'un état - Rupture
    9. Dans cet exemple, nous n'utiliserons pas de rupture. Répondez "Non". 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
      • Utilisez les boutons fléchés à droite de la liste pour modifier l'ordre des rubriques.
        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".

      Note

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

Note

Attention : Le nom et le titre sont différents.
  1. Validez.
  2. L'état apparaît sous l'éditeur d'états.
    Etat en édition
    Enregistrez l'état (Ctrl + S).
L'état est généré. 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. La destination de l'impression peut être au choix :
    Choix du mode d'impression
  • Choisissez "Visualisateur de rapports" et 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 puis le simulateur.
Modification de l'état
Nous allons effectuer quelques modifications dans l'état créé automatiquement afin qu'il ressemble plus à un catalogue produit.
  • Supprimez les libellés des champs suivants : Libellé, Description, Code-barres, Prix et Référence.
  • Sélectionnez le champ correspondant au libellé du produit. Nous allons afficher le libellé du produit en police Arial 20. Pour cela :
    1. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
    2. Dans l'onglet "Style", sélectionnez l'élément "Libellé principal".
    3. Pour l'option "Taille", saisissez 20.
    4. Validez la fenêtre de description.
    5. Adaptez la taille du champ (option "Adapter la taille" du menu contextuel) et positionnez-le en haut à gauche du bloc "Corps".
  • Sélectionnez le champ correspondant à la description du produit et positionnez-le à droite du champ Image.
  • 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. 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.
    3. Pour lier le champ à la rubrique du fichier de données :
      • Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
      • Dans l'onglet "Liaison", sélectionnez la rubrique "Code_Barres" du fichier de données Produit.
      • Validez la fenêtre de description du champ.
  • Agrandissez la photo du produit.
  • Réduisez la taille du champ affichant la référence, et positionnez-le sous l'image 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.
  • 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.
  • 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é, nous allons créer un nouvelle option de menu dans notre fenêtre "FEN_Menu" pour lancer directement l'impression de cet état.

  • Pour insérer un menu 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 nous 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.

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

Note

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