DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Recherche multicritère et impression
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Principe de l'impression sur Internet
  • Impression directe
  • Génération de documents HTML, PDF ou XML
  • De quoi est constitué un état ?
  • Création de l'état "Facture"
  • Création de la requête
  • Création de l'état basé sur une requête
  • Modifications de l'état "Facture"
  • Affichage de l'état imprimé depuis un champ Bouton
  • Mise en place de l'impression
  • Test de l'impression
Leçon 5.2. Imprimer une facture
Ce que vous allez apprendre dans cette leçon
  • Créer un état basé sur une requête.
  • Lancer l'impression d'un état basé sur une requête paramétrée.
Durée de la leçon

Durée estimée : 45 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Nous allons donner la possibilité à l'utilisateur d'imprimer directement la facture correspondant à la commande recherchée.

  • Ré-ouvrez si nécessaire le projet que vous avez manipulé dans la leçon précédente.
    1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "Site WEBDEV Complet - Exercice".
    3. WEBDEV 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é

Un projet corrigé est disponible. Ce projet contient les différents éléments créés dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 3 à 6", double-cliquez sur "Site WEBDEV Complet - Corrigé".
Principe de l'impression sur Internet
A proprement parler, on ne devrait pas parler "d'impression" sur Internet. En effet, si un document doit être "imprimé", un fichier est d'abord généré (en HTML, en PDF ou encore en XML) puis trans­mis au navigateur. Dès que le transfert du fichier est terminé, c'est à l'internaute de décider si le document qu'il vient de recevoir doit être imprimé ou non.
Une "impression" sur le serveur reste toutefois possible. Mais le document imprimé (sur l'imprimante du serveur même ou sur une imprimante partagée du réseau) ne sera pas accessible ni même consultable par l'internaute.
Le document imprimé ou généré est préparé et mis en forme avec l'éditeur d'états. Les informations contenues dans le document peuvent provenir d'une base de données.
Nous distinguerons donc deux types d'impression :
  • L'impression directe (sur l'imprimante du serveur).
  • La génération de documents divers (HTML, PDF, etc.).

Impression directe

L'impression directe consiste à imprimer directement sur une imprimante. Cette imprimante est reliée au poste serveur ou accessible depuis le réseau.
L'impression directe avec WEBDEV n'est conseillée que dans le cadre d'un Intranet ou un Extranet. Ce type d'impression permet par exemple d'imprimer des journaux de connexions des clients, d'imprimer les commandes en direct sur l'imprimante du service commercial.

Génération de documents HTML, PDF ou XML

L'impression à partir de documents HTML, PDF, XML consiste à créer un document puis à l'afficher sur le navigateur de l'internaute. Pour créer ce document, il suffit d'utiliser l'éditeur d'états de WEBDEV. Ainsi, depuis une source de données, votre site WEBDEV peut "générer" un fichier mis en forme. Ce fichier peut être au format HTML, PDF, RTF ou XML.
Le principal intérêt de cette méthode d'impression est que le fichier ainsi généré peut être trans­mis au navigateur. L'internaute peut alors imprimer ou stocker le document sur son poste.
L'impression dans un fichier peut être utilisée tant pour un site Internet que pour un site Intranet/ Extranet (par exemple : transmettre un bon de commande PDF à l'internaute, ...).
De quoi est constitué un état ?
Dans notre exemple, la facture que nous allons imprimer va correspondre à un état. Un état est un élément d'un projet permettant de regrouper les données à imprimer et à les mettre en forme. Pour créer et manipuler les états, WEBDEV propose un éditeur spécifique, l'éditeur d'états.
Un état est constitué de :
  • différents blocs. Les blocs permettent de définir les zones dans lesquelles seront affichées les données. Les différents blocs disponibles sont les suivants :
    • Début de document : bloc affiché uniquement sur la première page.
    • Entête de page : bloc affiché en haut de chaque page.
    • Corps : bloc contenant les données. Ce bloc est répété tant qu'il y a des données à imprimer.
    • Pied de page : bloc affiché en bas, sur chaque page.
    • Fin de document : bloc affiché uniquement sur la dernière page.
  • champs permettant d'afficher les données.
Voici par exemple l'état que nous allons créer :
Etat Facture à réaliser
Création de l'état "Facture"
Nous allons tout d'abord lister les informations qui doivent être affichées dans l'état :
  • Les caractéristiques de la commande : date et numéro de commande.
  • Les coordonnées du client : nom, adresse, code postal, ville et pays.
  • Les caractéristiques des lignes de commande :
    • Quantité commandée,
    • Référence du produit,
    • Libellé du produit,
    • Total HT,
    • Total TTC.
Pour créer simplement cet état, nous allons rassembler toutes les données à imprimer dans une requête. Cette requête pourra être utilisée par l'état ou par tout autre élément du projet WEBDEV (champ Table, champ Zone répétée, ...).

Note

WEBDEV propose de créer des états à partir de nombreuses sources de données : fichiers de données, requêtes, champs, fichiers texte, ...
Dans la majorité des cas, il est conseillé de rassembler les données à imprimer via une requête, puis de créer un état sur cette requête. Si une information doit être ajoutée dans l'état, il suffira d'ajouter la rubrique correspondante dans la requête.
Les états réalisés directement sur les fichiers de données doivent être réservés à des états simples, c'est-à-dire affichant des données provenant d'un seul fichier de données.

Création de la requête

  • Pour créer la requête de base de l'état, nous allons utiliser l'éditeur de requêtes.
    1. 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 "Requête­". L'assistant de création d'une requête se lance.
    2. Sélectionnez l'option "Sélection (SELECT)".
      En effet, la requête que nous allons créer va nous permettre de sélectionner les enregistrements qui seront imprimés dans l'état. Passez à l'étape suivante.
    3. La fenêtre de description de la requête apparaît.
  • Tout d'abord, donnez un nom à la requête : saisissez "REQ_Facture" à la place de "REQ_SansNom1" dans la zone "Nom de la requête".
  • Nous allons construire la requête en sélectionnant les éléments que nous voulons dans le résultat. La requête va contenir le contenu du fichier de données Commande, le contenu du fichier de données LigneCommande et le contenu du fichier de données Client.
    1. Dans la zone de gauche de l'écran, sélectionnez le fichier de données Commande et cliquez sur la flèche (Flèche) : les rubriques du fichier de données Commande apparaissent au centre de l'écran.
    2. Répétez cette opération pour les fichiers de données LigneCommande et Client.
La fenêtre de description de la requête est la suivante :
Fenêtre de description de la requête
A ce stade, cette requête permet de sélectionner toutes les commandes et les lignes de commande correspondantes.
Nous allons réorganiser les rubriques de la requête. En effet, cet ordre sera utilisé pour créer les différents champs de l'état basé sur cette requête. Nous voulons que le libellé du produit soit positionné juste après la référence du produit.
  • Pour réorganiser l'ordre des rubriques :
    1. Sélectionnez la rubrique LibelléProduit du fichier de données LigneCommande.
    2. Cliquez sur le bouton Flèche de réorganisation des rubriques à droite de la liste des rubriques. La rubrique remonte.
    3. Positionnez la rubrique juste après la référence du produit (LigneCommande.Référence).
Nous voulons sélectionner les données correspondant à une seule commande dont l'identifiant est connu. Nous allons donc définir en paramètre le numéro de commande.
  • Pour gérer le paramètre "Identifiant de la commande" :
    1. Sélectionnez au centre de l'écran la rubrique Commande.IDCommande.
    2. Cliquez dans la quatrième colonne (voir ci-dessous) : dans le menu qui s'affiche, sélectionnez l'option "Nouvelle condition".

      Note

      Lors de la description d'une requête, la zone listant les éléments de la requête est constituée de 4 colonnes :
      • Une colonne avec le nom de la rubrique,
      • Une colonne permettant d'afficher ou non la rubrique dans le résultat de la requête,
      • Une colonne pour gérer le tri pour la rubrique,
      • Une colonne affichant le nombre de conditions associées à la rubrique.
      Pour accéder à une de ces caractéristiques, il suffit de cliquer dans la colonne correspondante.
    3. Dans la fenêtre qui s'affiche, nous allons indiquer que la condition de sélection correspond à un paramètre :
      Description d'une condition
      Effectuez les opérations suivantes :
      • Sélectionnez "Est égal à".
      • Cochez "au paramètre".
      • Indiquez le nom du paramètre : "ParamIDCommande".
    4. Validez la fenêtre de description de la condition. Le chiffre "1" apparaît à droite de la rubrique Commande.IDCommande, indiquant qu'une condition de sélection a été définie.
    5. L'identifiant de la commande ne sera pas visualisable, rendez-le invisible : cliquez sur l'oeil présent sur la ligne de la rubrique et sélectionnez l'option "Ne pas afficher".
    6. De la même manière, rendez invisibles les rubriques suivantes :
      • Commande.Etat,
      • Commande.IDClient,
      • Commande.IDModeRèglement,
      • LigneCommande.IDCommande,
      • Client.IDClient.
    7. Validez la fenêtre de description de la requête (bouton "Ok").
    8. Validez les informations de sauvegarde
    9. La représentation graphique de la requête est affichée :
      Représentation graphique de la requête

Création de l'état basé sur une requête

  • Pour créer un état :
    1. Cliquez sur 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.
    3. L'assistant de création d'un état propose plusieurs types d'états :
      Assistant de création d'un état - Les différents types d'états
    4. Sélectionnez "Tableau". Passez à l'étape suivante.
    5. Sélectionnez la source des données de l'état. L'état va être basé sur la requête que vous venez de créer. Sélectionnez "Un fichier de données ou une requête existante". Passez à l'étape suivante.
      Assistant de création d'un état - Source de données
    6. Dans la liste des fichiers de données et des requêtes, sélectionnez la requête "REQ_Facture". Passez à l'étape suivante.
    7. L'assistant demande d'indiquer s'il y a une rupture. Dans cet état nous n'utilisons pas de rupture. Nous verrons ce concept un peu plus loin dans ce cours. Sélectionnez "Je ne veux pas de rupture dans l'état". Passez à l'étape suivante.
    8. Vous allez ensuite indiquer dans quel ordre sont imprimées les rubriques et leur répartition dans les différents blocs :
      • Les rubriques concernant le client vont être affichées dans le bloc "Début de document". En effet, ces informations ne doivent pas être répétées pour chaque ligne de la commande.
      • Les rubriques concernant la commande vont être affichées dans le bloc "Entête de page". En effet, ces informations ne doivent pas être répétées pour chaque ligne de la commande.
      • Les rubriques concernant les lignes de commande vont rester dans le corps de l'état. Ces rubriques seront affichées pour toutes les lignes de commandes de la commande.
      • Les rubriques concernant les totaux de la commande seront affichées dans le bloc "Fin de document". En effet, ces informations ne doivent pas être répétées pour chaque ligne de la commande.
        Assistant de création d'un état - Rubriques à afficher
        Le tableau suivant fournit les différentes affectations des rubriques dans l'ordre présenté dans l'assistant :
        RubriqueBloc
        NumCommandeDébut de document
        DateEntête de page
        TotalHT Fin de document
        TotalTVAFin de document
        TotalTTC Fin de document
        Référence Corps
        QuantitéCorps
        TotalTTC_LiCorps
        TotalHT_LiCorps
        LibelléProduit Corps
        PrixUnitaireHTCorps
        SociétéDébut de document
        NomCompletDébut de document
        AdresseDébut de document
        CodePostalDébut de document
        VilleDébut de document
        EtatDepDébut de document
        PaysDébut de document
        TéléphoneDécocher
        MobileDécocher
        EmailDécocher
    9. Passez à l'étape suivante.
    10. L'assistant propose de créer un compteur, une somme ou une moyenne sur les rubriques numériques présentes dans l'état. Dans cet état, les calculs sont faits par la requête. Cliquez sur le bouton "Aucun calcul". Passez à l'étape suivante.
    11. Cette étape permet de définir la mise en page de l'état.
      Assistant de création d'un état - Mise en page
      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'imprimantes.
    12. Passez à l'étape suivante.
    13. Cet écran permet de sélectionner le gabarit utilisé pour l'état. Il est conseillé d'utiliser le même gabarit que pour les pages. Dans notre cas, sélectionnez par exemple le gabarit "Phoenix" et passez à l'étape suivante.
    14. Il ne reste plus qu'à donner un nom et un titre à l'état.
      • Saisissez le nom "ETAT_Facture".
      • Saisissez le titre "Facture".
Assistant de création d'un état - Nom et titre de l'état
  1. Validez.
  2. Le tableau tel qu'il est défini ne rentre pas sur une page A4 portrait. WEBDEV propose de :
    • imprimer l'état sur 2 pages en largeur,
    • basculer en mode paysage,
    • réduire la taille du tableau.
      Choix de la réduction de l'état
    Choisissez "Réduire le tableau".
  3. Validez les informations de sauvegarde.
  4. L'état apparaît en édition sous l'éditeur d'états :
    Etat sous l'éditeur
  5. Les différentes lignes de la commande sont regroupées sous forme de tableau.
  • Exécutez cet état en cliquant sur Tester un élément parmi les boutons d'accès rapide.
    1. L'éditeur d'états demande la destination de l'impression. La destination de l'impression peut être au choix :
      • Visualisateur de rapports : l'état est affiché à l'écran dans une fenêtre spécifique.

        Note

        Le visualisateur de rapports est disponible uniquement lors du développement du site.
        En exécution, l'utilisateur ne pourra pas utiliser le visualisateur de rapports. Le seul aperçu disponible sera l'affichage par le navigateur du fichier généré.
      • Imprimante : l'état est directement imprimé sur l'imprimante par défaut.
      • Fichier spécifique : l'état est imprimé dans un fichier au format sélectionné.
        Choix du mode d'impression
      Choisissez "Visualisateur de rapports" et validez.
    2. L'éditeur d'états demande les paramètres de la requête utilisée par l'état. Rappelez-vous, nous avons, en effet, utilisé un paramètre pour spécifier le numéro de la commande à imprimer. Pour l'exemple, saisissez la valeur de test "5".
      Saisie des paramètres de la requête
      Validez.
    3. L'exécution de l'état s'affiche à l'écran.
      Etat affiché dans le visualisateur de rapports
    4. Fermez le visualisateur de rapports.

Modifications de l'état "Facture"

Nous allons effectuer quelques modifications dans l'état que nous venons de créer.
  • Nous allons maintenant positionner les informations concernant le client et la commande dans le haut de page :
    1. Supprimez les libellés devant les informations client (Nom, etc.).
    2. Positionnez la rubrique contenant la ville à côté du code postal.
    3. Agrandissez le champ contenant le nom de la société à l'aide des poignées : la taille du champ doit être identique à la taille des champs Code postal et Ville.
    4. Alignez les champs :
      • Sélectionnez le champ Société.
      • Appuyez sur la touche Ctrl puis sélectionnez à l'aide de la souris les champs contenant l'adresse, l'état et le pays.
      • Sous le volet "Alignement", cliquez sur "Justifier (Int. et Ext.)".
        Volet Alignement
    5. Sélectionnez les informations concernant le client et déplacez-les à l'aide de la souris sur la droite de l'état.
    6. Déplacez le numéro de commande : positionnez-le en haut du bloc "Entête de page".
      Modification de la position du champ 'Numéro de commande'
  • Nous allons créer un cadre autour des informations concernant le client. Pour cela, nous allons créer un champ Libellé superposé aux informations client. Seule la bordure de ce libellé sera visible.
    1. Créez un champ Libellé : sous le volet "Création", dans le groupe "Texte", cliquez sur "Libellé".
    2. Cliquez dans la zone "Début de document", à l'endroit où sont affichées les informations client.
    3. Appuyez sur la touche Maj et agrandissez le champ Libellé (à l'aide des poignées) afin qu'il se superpose à toutes les informations client. Cette manipulation permet d'agrandir le champ Libellé sans déplacer les champs situés dessous (contenant les informations client).
    4. Dans le menu contextuel du champ Libellé, sélectionnez "Editer le libellé" et supprimez le libellé. Cliquez dans l'état pour valider la modification.
  • Pour configurer le cadre :
    1. Sélectionnez le champ Libellé que nous venons d'ajouter.
    2. Appuyez sur la touche R et cliquez sur le picto Configurer le cadre qui apparaît en haut à droite du champ.
    3. Sélectionnez l'option "Editer le cadre". Les options de configuration apparaissent :
      Options de configuration du cadre
    4. Sélectionnez :
      • la couleur "Bleu" dans les couleurs contextuelles.
      • un cadre simple (trait fin).
      • un arrondi de 2 mm en largeur et en hauteur.
  • Nous allons positionner les totaux correctement dans le bloc "Fin de document" :
    1. Sélectionnez les champs (libellés et rubriques) correspondant aux totaux présents dans le bloc "Fin de document".
    2. Positionnez ces champs à l'aide de la souris en bas à droite du tableau (au-dessus du libellé "Développé avec WEBDEV").
    3. L'état est affiché sous l'éditeur d'états :
      Etat affiché sous l'éditeur d'états
    4. Notre état "Facture" est terminé. Enregistrez l'état en cliquant sur Enregistrer un élément parmi les boutons d'accès rapide.
    5. Vérifiez les modifications effectuées en exécutant l'état en mode "Visualisateur de rapports" (cliquez sur Tester l'état parmi les boutons d'accès rapide).
      Etat en mode 'Visualisateur de rapports'
    6. Fermez le visualisateur de rapports.
Affichage de l'état imprimé depuis un champ Bouton
Comme nous l'avons vu au début de cette leçon, le site s'exécutant sur un serveur, l'impression d'un document sera effectuée sur une imprimante reliée au serveur (et donc inaccessible pour l'utilisateur).
L'impression va donc être réalisée au format PDF sur le serveur et le document PDF généré sera téléchargé ou affiché sur le poste de l'internaute. Le document pourra ensuite être imprimé par l'utilisateur sur son imprimante.
Dans notre site, l'état "ETAT_Facture" va être imprimé depuis un champ Bouton présent dans la page permettant de rechercher une commande. Ce champ Bouton permettra d'imprimer la facture de la commande sélectionnée.
Remarque : Pour réaliser cette partie du cours, vous devez avoir créé la page "PAGE_Recherche_Multicritere" dans la Leçon 5.1. Recherche Multicritère.

Mise en place de l'impression

Pour imprimer l'état "ETAT_Facture" :
  1. Placez-vous sur la page "PAGE_Recherche_Multicritere" : cliquez sur "PAGE_Recherche_Multicritere" dans la barre des documents.
  2. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Bouton".
  3. Cliquez à droite du champ Table pour créer le champ Bouton.
  4. Sélectionnez le champ créé et appuyez sur la touche Entrée du clavier. Le libellé passe en édition.
  5. Remplacez "BOUTON" par "IMPRIMER" et validez.
    Champ Bouton sous l'éditeur
  6. Affichez le code de ce bouton (touche F2) et saisissez le code suivant dans l'événement "Clic xxx (serveur)" :
    iDestination(iPDFGénérique)
    ETAT_Facture.InitRequête(TABLE_REQ_RechercheCommandes.COL_IDCommande[TABLE_REQ_RechercheCommandes])
    ETAT_Facture.Imprime()
    FichierAffiche(iDernierFichier(), "application/pdf")

    Examinons ce code :
    • La fonction iDestination permet de définir le format d'impression utilisé (ici, format PDF).
    • L'état "ETAT_Facture" étant basé sur une requête paramétrée, il est nécessaire de passer le paramètre à la requête avant d'exécuter l'état. Cette opération est réalisée par la fonction <Etat>.InitRequête. Dans notre cas, le paramètre correspond au numéro de la commande en cours, affiché dans le champ Table.
    • La fonction <Etat>.Imprime permet de lancer la génération de l'état "Etat_Facture" au format spécifié (PDF dans notre cas).
    • La fonction FichierAffiche permet d'afficher à l'utilisateur la facture :
      • La fonction iDernierFichier permet d'obtenir le chemin du dernier fichier généré par un état.
      • "application/pdf" est le type MIME du fichier renvoyé. Lorsque ce type est précisé, le navigateur peut afficher le fichier directement ou choisir à quelle application déléguer l'affichage sur le poste de l'internaute.
  7. Fermez l'éditeur de code.
  8. Enregistrez la page (Enregistrer un élément ou Ctrl + S).

Test de l'impression

  • Il ne reste plus qu'à effectuer un test en réel :
    1. Lancez le test de la page "PAGE_Recherche_Multicritere".
    2. Spécifiez vos critères (ceux que vous voulez) et lancez une recherche.
    3. Sélectionnez une des commandes affichées dans le champ Table.
    4. Imprimez la commande via le bouton "IMPRIMER".
      Impression de l'état
    5. Le navigateur ouvre le fichier PDF. Le navigateur a remplacé la page courante par le fichier PDF. Nous allons changer ce comportement.
    6. Fermez le navigateur.
  • Pour ouvrir le fichier PDF dans un autre onglet ou navigateur :
    1. Double-cliquez sur le bouton "Imprimer" dans la page "PAGE_Recherche_Multicritere". La fenêtre de description s'affiche.
    2. Dans l'onglet "Général", dans le champ Destination, sélectionnez "Nouvel onglet du navigateur".
      Impression dans un nouvel onglet
    3. Validez.

Note

Nouvel onglet ou nouvelle fenêtre ?
L'affichage dans un nouvel onglet ou dans une nouvelle fenêtre ne peut être choisi ni par l'utilisateur ni par le développeur du site. C'est le navigateur qui choisit s'il ouvre un nouvel onglet ou une nouvelle fenêtre. Le comportement pourra être différent selon le navigateur utilisé !
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 22/05/2023

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