PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 24 !
  • 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 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 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.

Corrigé

Si vous n'avez pas créé les pages des leçons précédentes, vous pouvez suivre cette leçon en ouvrant un projet corrigé : dans la page d'accueil de WEBDEV (Ctrl + <), cliquez sur "Cours d'auto-formation", puis sélectionnez "Site WEBDEV Complet (Avec pages)".
Un projet corrigé complet est également disponible : dans la page d'accueil de WEBDEV (Ctrl + <), cliquez sur "Cours d'auto-formation", puis sélectionnez "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'impri­mante 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 informa­tions 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, ...).

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'affi­cher 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 :
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 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 Commande, le contenu du fichier LigneCommande et le contenu du fichier Client.
    1. Dans la zone de gauche de l'écran, sélectionnez le fichier Commande et cliquez sur la flèche bleue () : les rubriques du fichier Commande apparaissent au centre de l'écran.
    2. Répétez cette opération pour les fichiers LigneCommande et Client.
La fenêtre de description de la requête est la suivante :
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 LigneCommande.
    2. Cliquez sur le bouton “flèche haut” à 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 : 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 :
      • Le nom de la rubrique,
      • L'affichage ou non de la rubrique dans le résultat de la requête,
      • La gestion du tri pour la rubrique,
      • 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 :
      Effectuez les opérations suivantes :
      • Sélectionnez "Est égal à".
      • Cochez "au paramètre".
      • Indiquez le nom du paramètre : "pIDCommande".
    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 vert en bas de l'écran).
    8. Validez les informations de sauvegarde
    9. La représentation graphique de la requête est affichée :

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

  • Pour créer un état :
    1. Cliquez sur 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 :
    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 "D'un fichier de données ou d'une requête existante". Passez à l'étape suivante.
    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. Répondez "Non". 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.
        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. Cet écran permet de définir la mise en page de l'état.
      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 "Evolution" et passez à l'étape suivante.
    14. Il ne reste plus qu'à donner un nom et un titre à l'état.
      • Saisissez le titre "Facture".
      • Saisissez le nom "ETAT_Facture".
    15. Validez.
    16. 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.
      Choisissez “Réduire le tableau”.
    17. Validez les informations de sauvegarde.
    18. L'état apparaît en édition sous l'éditeur d'états :
    19. Les différentes lignes de la commande sont regroupées sous forme de tableau.
  • Exécutez cet état en cliquant sur 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 :
      • Aperçu avant impression : l'état est affiché à l'écran dans une fenêtre spécifique.

        Note

        L'aperçu avant impression est disponible uniquement lors du développement du site.
        En exécution, l'utilisateur n'aura pas d'aperçu avant impression. 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é.
      Choisissez "Aperçu avant impression" 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 "1".
      Validez.
    3. L'exécution de l'état s'affiche à l'écran.

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, ...).
    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.)".
    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".
  • 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 qui apparaît en haut à droite du champ.
    3. Sélectionnez l'option "Editer le cadre". Les options de configuration apparaissent :
    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 :
    4. Notre état "Facture" est terminé. Enregistrez l'état en cliquant sur parmi les boutons d'accès rapide.
    5. Vérifiez les modifications effectuées en exécutant l'état en mode "Aperçu avant impression" (cliquez sur parmi les boutons d'accès rapide).
    6. Fermez l'aperçu avant impression.
Affichage de l'état imprimé depuis un 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 bouton présent dans la page permettant de rechercher une commande. Ce bouton permettra d'imprimer la facture de la commande sélectionnée.

Mise en place de l'impression

Pour imprimer l'état "ETAT_Facture" :
  1. Placez-vous sur la page "PAGE_Recherche_Multicritere" : cliquez sur le bouton "PAGE_Recherche_Multicritere" dans la barre des boutons.
  2. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Bouton".
  3. Cliquez à droite du champ Table pour créer le bouton.
  4. Sélectionnez le bouton et appuyez sur la touche Entrée du clavier. Le libellé passe en édition.
  5. Remplacez "Bouton" par "Imprimer" et validez.
  6. Affichez le code de ce bouton (touche F2) et saisissez le code de clic serveur suivant :
    iDestination(iPDFGénérique)
    iInitRequêteEtat(ETAT_Facture, ...
    TABLE_REQ_RechercheCommandes.COL_IDCommande[TABLE_REQ_RechercheCommandes])
    iImprimeEtat(ETAT_Facture)
    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 iInitRequêteEtat. Dans notre cas, le paramètre correspond au numéro de la commande en cours, affiché dans le champ Table.
    • La fonction iImprimeEtat 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 de choisir à quelle application déléguer l'affichage sur le poste de l'internaute.
  7. Fermez l'éditeur de code.
  8. Enregistrez la page ( 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 les critères et lancez une recherche.
    3. Sélectionnez une des commandes affichée dans le champ Table.
    4. Imprimez la commande via le bouton "Imprimer".
    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".
    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 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire