Créer un état simple avec LazReport

Jean-Paul Humbert

Basé sur un exemple concret, ce tutoriel explique pas à pas comment créer un état simple avec LazReport.

Commentez

- Titre : Créer un état simple avec LazReport

- Auteur : Jean-Paul Humbert

- Parution : 15 août 2009

- Mise à jour : 5 octobre 2009

- Licence : Copyright ® 2009 Jean-Paul Humbert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Création de l'état

- III. Titre de l'état

- IV. Définition du contenu

- V. Mise en page du contenu

- VI. A suivre...

I - Introduction

LazReport est un ensemble de composants qui permettent la conception d'états pour un programme écrit en Lazarus.

La réalisation de ces états est faite en plein écran, avec possibilité de voir le résultat à tout moment de la conception. De plus, LazReport permet l'écriture d'instructions style Lazarus, directement dans le concepteur, instructions qui seront exécutées lors de l'impression de l'état.

Pour l'instant, découvrons LazReport au moyen de la réalisation d'un état simple.

II - Création de l'état

Prenons le cas d'un état qui doit donner la liste des articles en stock. Cet état comportera les colonnes suivantes :

- Code article;

- Libellé;

- Quantité en Stock;

- Prix d'achat;

- Valeur du Stock.

Nous allons supposer que nous disposons d'une table dans une base de données, table qui portera le nom de Table1.

Notre état s'appellera Etat1. Nous créons donc une forme (Form1) dans laquelle nous déposons les composants suivants :

- Un composant d'accès à la base (dans notre cas un TZquery de Zeos, mais tout composant peut convenir);

- Un composant TDataSource que nous relions à notre Zquery;

- Un composant TfrReport

- Un composant TfrDBDataset

Touche F11 sur le composant DataSource1, que nous relions au Zquery1.

Touche F11 sur le composant frDBDataset1 et, dans la propriété DataSet, faisons la liaison avec notre DataSource1.

Touche F11 sur le composant frReport1 et, dans la propriété DataSet, faisons la liaison avec notre frDBDataset1 : ceci pour disposer des champs de la table.

Pour pouvoir tester notre état, nous définissons dans le composant Zquery une requête qui lit l'ensemble de notre table Table1, puis nous activons la connexion :

select * from table1

Faisons un double clic sur le composant frReport : une nouvelle fenêtre nous affiche une feuille vide. Cette feuille s'appelle Page1 (regardez dans le coin supérieur gauche de la partie grisée).

L'état va être composé de différentes bandes. Chaque bande a une fonction bien particulière mais, plutôt que de décrire toutes ces fonctions, nous allons les utiliser les unes après les autres et expliquer au fur et à mesure.

III - Titre de l'état

En premier lieu, nous voulons mettre un titre sur notre état :

ETAT DU STOCK

Ce titre ne devra apparaître qu'une seule fois, sur la haut de la première page.

Vous avez repéré le mot Page 1 ? Juste à gauche, il y a un icône symbolisant une flèche de souris et deux icônes en dessous, deux petits traits en pointillé : posez la souris dessus, il doit apparaître Insérer la bande. Clic gauche, puis amenez la souris sur la feuille blanche. Un cadre en pointillé apparaît. Arrangez-vous pour mettre ce cadre dans le coin supérieur gauche de la feuille et re-clic.

Dans la fenêtre qui s'ouvre, vous avez tous les choix possibles de bandes. Cliquez sur le premier (Report Title) :

LazReport vous aide : il vous présélectionne la bande qui lui paraît être la mieux adaptée.

La bande se remplit avec une grille. C'est uniquement visuel : vous pouvez augmenter ou diminuer la hauteur de cette bande. Ce que vous définissez ainsi ne pourra pas être utilisé pour autre chose que le titre.

Mettons maintenant notre texte. Vous vous souvenez où vous avez pris la bande ? Juste au-dessus de cet icône, il y en a un autre. Posez la souris dessus : 'Insérer un objet Rectangle'. Clic gauche puis clic dans la partie hachurée :

Vous remarquerez qu'avant votre deuxième clic, un petit cadre en pointillé est apparu. Nous le reverrons souvent.

Au deuxième clic, la fenêtre de l'éditeur de texte apparaît :

Dans la zone Mémo, tapez le texte du titre :

ETAT DU STOCK

puis cliquez sur Ok. Notre texte apparaît. Il nous est possible de déplacer ce texte. Je vous propose ce qui suit.

A l'aide de la souris, augmentez la largeur pour faire en sorte que ce cadre occupe toute la largeur de la feuille : les petits points à gauche et à droite de cadre blanc vous le permettent :

Ensuite, regardez dans la deuxième barre d'outils, deux crans à droite du A souligné : le symbole montre des lignes centrées (comme sous Word ou Open Office). Cliquez dessus :

Vous pouvez aussi changer la police et même mettre en gras (ou italique ou...). Je vous conseille la manoeuvre suivante. Sélectionnez le rectangle contenant le titre et appuyez sur la touche F11 :

Cliquez à droite de Font ou sur la petite flèche noire à gauche de Font, puis sur les trois petits boutons qui apparaissent :

Le panneau classique de sélection des polices apparaît. Cette méthode est plus sûre que celle qui consisterait à utiliser la barre d'outils, j'en ai fait l'expérience !

Pour revenir à la conception, cliquez sur la croix noire.

IV - Définition du contenu

Nous allons maintenant mettre des valeurs venant de notre table Table1. Problème : vous et moi n'avons pas la même table. Je vais donc supposer que les champs s'appelleront CHAMP1, CHAMP2, etc. A vous de convertir en fonction des noms que vous avez en votre possession.

- Opération 1

Clic sur l'icône d'insertion de bande et pose de la bande sous celle déjà existante. Attention, n'hésitez pas à laisser un espace : deux bandes qui se chevauchent donnent des résultats très surprenants. En revanche, les espaces que vous mettez lors de la conception sont ignorés.

- Opération 2 : choix de la bande

Prenez une Master Data (nous verrons celles qui précèdent par la suite). Nouvelle petite fenêtre pour vous permettre de choisir la table qui va être utilisée. Et vous voyez le mot [Aucun]. Cliquez sur la pointe au bout à droite de cette zone et vous devez voir apparaître le nom de votre composant frDBDataset. Sélectionnez-le et cliquez sur Ok.

- Opération 3

Cliquez sur Insérer un rectangle et posez ce rectangle dans la bande Master data : dans la fenêtre qui s'ouvre, cliquez sur Champ DB. Nouvelle fenêtre et, là, vous avez la liste des champs de votre table. Sélectionnez-en un et validez. La zone qui s'affiche à une longueur prédéfinie... qui peut être trop petite (ou trop grande) pour ce qui va être affiché. Remarquez qu'elle comporte huit points (s'il n'y sont plus un clic sur la zone les fait apparaître). Vous savez à quoi ils servent, nous les avons déjà vus !

Juste pour voir, cliquez sur l'icône de prévisualisation ! Ce n'est pas encore une oeuvre d'art, mais cela prend forme non ? Alors, pour éviter que ce temps ne soit perdu, commençons par sauvegarder ce que nous avons fait : Menu principal -> Fichier --> Enregistrer (Attention, allez dans le répertoire de vos programmes) et donnons le nom de Etat1 !
Ouf c'est gagné ! Nous pouvons envisager en toute sérénité de prendre un apéritif bien mérité !

Prêt pour la suite ?

Je propose, à titre d'exercice, de refaire l'opération 3 pour tous les champs qui devrons apparaître sur l'état. N'oublions pas de sauvegarder.

V - Mise en page du contenu

Voyons maintenant comment améliorer notre état. Il est vraisemblable que lors de la visualisation les lignes soient très écartées, et l'état va prendre des pages et des pages. Comment resserrer ? Simple ! Cliquez sur la partie grisée de votre Master data : vous pouvez maintenant augmenter ou diminuer la hauteur de cette bande en cliquant (gauche) sur l'un des points noirs qui sont apparus au milieu, puis en montant ou descendant la souris :

Remarque importante : ne diminuez pas trop la hauteur ! Je vous conseille de faire le test suivant : cliquez sur le motMaster data et déplacez la bande : il faut que tout ce que vous avez mis dedans bouge ! Sinon, vous aurez de drôles de surprises par la suite. Et le fait de trop diminuer la bande peut provoquer cette erreur. Pour faire des bandes très fines, commencez par diminuer la police des champs que vous y avez placés.

Bien, maintenant nous allons ajouter un texte sous le titre de notre état. Voici ce texte :

État fait à la date du jj/mm/aa

Ce qui veut dire que la date devra être celle du jour de l'édition.

Assurez-vous que la hauteur de la bande Report Title soit suffisante, puis mettez un rectangle sous le titre. Dans l'éditeur de texte, tapez 'État fait à la date du' (laissez un blanc), puis cliquez sur le bouton Variables :

Si vous ne voyez pas le mot Autres sous Catégories, cliquez en bout de zone pour faire apparaître les autres choix. Si vous voyez Autres, vous avez en dessous le mot Date. Posez la souris dessus et validez par la touchez Entrée (ou faites un double clic).

[DATE] apparaît maintenant entre crochets. Cliquez sur Ok, il vous reste à centrer, et ça maintenant vous savez le faire ! Un petit aperçu ? Une petite sauvegarde (Ctrl+S) ?

Nous avançons !

Maintenant, cet état peut très bien tenir sur plusieurs pages. Ce serait plutôt sympathique d'avoir une numérotation des pages, non ?

Nous allons ajouter une bande qui va apparaître à la fin de chaque page : un Page footer. Puis, dans cette bande, mettons un rectangle au bout à droite. Bien sûr, l'éditeur de texte s'ouvre. Tapons Page (suivi d'un espace). Clic sur Variables. Normalement, Autres doit encore être affiché et nous allons poser la souris sur Page# et valider. C'est tout. Notre état a sa numérotation.

Avant d'aller plus loin, regardons comment faire apparaître l'état à partir de notre application car, pour l'instant, nous n'avons fait que de la visualisation mais rien à partir du programme.

Dans votre application, posez un bouton ayant la caption 'IMPRESSION' (je ne me suis pas trop fatigué pour trouver ce nom !). Dans l'évènement OnClick, codez ce qui suit :

Procedure TForm1.BitBtn1Click (Sender : TObject);
Begin
Frreport1.LoadFromFile('Etat1.lrf');
Frreport1.ShowReport;
End;

Faites un petit essai avant une sieste bien méritée !
A tout de suite !

On complique !!!!!! Je voudrais voir apparaître en bas de chaque page, sur la gauche, le texte suivant :

Édition faite par XXXXXXXX

Et, bien sûr, XXXXXXXX peut changer !

D'abord côté programme, nous allons définir un champ String. Ce champ sera rempli lors du lancement et l'utilisateur devra donner son nom. Mais, pour l'instant, pour faire simple, définissons une variable (type constante) ainsi :

var Nom : string = 'Mon nom';

Retournons dans notre état. Nous allons aussi y définir une variable.

Dans le menu principal, cliquez sur Fichier puis sur Liste des Variables :

Cliquez ensuite sur Variables :

Nous devons d'abord donner une espèce de titre, par exemple État variables. État est au choix, variables est impératif. Passez à la ligne suivante (touche Entrée).

Attention, toutes les lignes qui suivent doivent commencer par un espace.

Tapez donc :

Nom
Magasin

Vous devez obtenir ceci :

Cliquez sur Ok, puis encore sur Ok.

Maintenant, dans le Page footer, posez un rectangle, et tapez

État créé par :

Cliquez sur Variables : si État variables n'apparaît pas, faites la recherche (pointe à droite de la zone), posez la souris sur Nom et validez par la touche Entrée (ou double clic) : vous devez voir dans l'éditeur de texte ceci :

Cliquez sur Ok, sauvegardez et revenez dans l'application.

Clic droit sur le composant frReport1 et double clic sur l'évènement OnGetValue. Complétez pour obtenir ceci :

Procedure TForm1.Frreport1getvalue (const Parname: String; var Parvalue: Variant);
Begin
if UpperCase(ParName)='NOM' then
ParValue:= Nom;
End;

Faites un essai : ça vous convient ?

Maintenant, il serait peut être intéressant d'avoir en fin d'état le total des articles du stock. Pour cela il nous faut, bien sûr, déjà calculer le nombre d'articles. Nous pourrions le faire dans l'application, mais pourquoi faire compliqué quand tout est sous la main ? Nous avons la zone Quantité en Stock. Disons qu'il s'agit du CHAMP3 : ce que nous cherchons est donc la somme (en anglais SUM) du CHAMP3.

Nous allons ajouter une bande : ce sera un Report Summary. Plaçons alors un rectangle et tapons d'abord :

Total des Articles en Stock :

puis cliquons sur Fonction (ou Function) et reclic sur Fonction : dans la fenêtre qui s'ouvre, repérez Agregates et cliquez dessus s'il n'est pas sélectionné. A droite, vous voyez SUM :

Double clic dessus et... nouvelle fenêtre : cliquez sur le bouton fx (pas de panique, nous allons y arriver) :

Re-fenêtre :

Cliquez sur Champs DB (ou DB Fields) et double-cliquez sur le champ qui contient la quantité. Validez ou clic sur Ok. Re-Clic sur Ok. Re-re-clic sur Ok... et enfin clic sur Ok ! Youpie : nous y sommes arrivés. Peut-être faut-il agrandir la largeur du rectangle !

Enregistrez et faites un essai.

Notre état est déjà assez avancé. Cependant, un lecteur non averti risque d'avoir un peu de mal à le comprendre. Ce ne sont que des chiffres mais à quoi correspond chaque colonne ? Nous allons donc mettre un entête de colonne (Column header). L'entête de colonne va s'imprimer sur chaque nouvelle page. Il existe aussi une bande appelée Master Header : cette bande n'est imprimée qu'une seule fois au début des lignes détail.

Posons donc une bande Column header (nous dirons Entête dans la suite). Si vous n'avez pas assez de place, faites glisser les autres bandes vers le bas. Dans la bande Entête, mettons autant de rectangles qu'il y a de colonnes dans notre état et, pour chaque rectangle, un titre (Qté, Libellé, etc).

Comme nous voulons que notre état soit présentable, nous allons mettre des textes clairs et bien cadrés. Pour ce faire, je vous conseille la méthode suivante.
Regardez l'image ci-dessous :

Titre 1 est normal. Pour Titre deux, j'ai agrandi le rectangle pour faire tout apparaître. Pour Titre trois, j'ai supposé que la colonne était étroite. J'ai donc augmenté la hauteur et le titre passe sur deux lignes. Dans les trois cas, j'ai centré mon texte (nous avons vu comment faire).

Remarquez que j'ai collé le haut des rectangles avec le haut de la bande. Ceci va me permettre une mise en page bien simple.

Sélectionnons le dernier rectangle et appuyons sur la touche F11 : nous voyons que le rectangle à une hauteur de 34. Cherchons alors (par l'ascenseur) la valeur de la zone Top et notons-la (disons 120 pour notre exemple).

Tenons la touche majuscule enfoncée et cliquons sur les trois rectangles pour les sélectionner, puis, si la fenêtre F11 n'est pas visible, appuyons sur F11. Nous obtenons ce qui suit :

Remarquez que la zone Height est vide. Mettons 34 puis, dans la zone Top, mettons 120. Voilà le résultat :

Cadrons ces titres en bas de rectangle :

Un petit trait !

:

Une sauvegarde et une visualisation ! Ça vous convient ?

Vous disposez maintenant des éléments pour réaliser une bonne partie des états dont vous avez besoin. Faites des essais et familiarisez-vous avec les différentes manipulations avant de regarder la suite.

Vous avez certainement remarqué que chaque demande d'impression fait apparaître l'affichage écran (ShowReport). Si nous ne voulons pas de cette étape (parfois intéressante pour éviter des tonnes de feuilles), il est possible d'imprimer dirrectement. Dans la procédure qui lance l'affichage, modifiez l'ordre Frreport1.ShowReport comme suit :

Procedure TForm1.BitBtn1Click (Sender : Tobject);
Var
Fin : string;
Copies : integer;
Begin
Copies := 1;
Frreport1.LoadFromFile('Etat1.lrf');
Frreport1.PrepareReport;
Fin := IntToStr(Frreport1 .EMFPages.Count);
Frreport1.PrintPreparedReport(Fin,Copies);
End;

Fin donne le nombre total de pages de votre état et vous pouvez modifier Copies si besoin est.

VI - A suivre...

Que les accros des états ne se suicident pas tout de suite : un tuto complémentaire est en cours pour les cas plus complexes.
A très bientôt !