Créer des document paginés avec Flying Saucer

Mise en application

L'éternel Baba au rhum

Voici un code XHTML reprenant la recette du Baba au rhum :

1
<?xml version="1.0" encoding="UTF-8"?>
2
<!DOCTYPE html>
3
<html xmlns="http://www.w3.org/1999/xhtml">
4
    <head>
5
        <title>Recette de Baba au Rhum</title>
6
    </head>
7
    <body>
8
        <div id="body-content">
9
            <h1>Baba au rhum</h1>
10
11
            <h2>Prérequis</h2>
12
            <div id="prerequis-content">
13
                <p><strong>Durée de préparation</strong> : 20 minutes</p>
14
                <p><strong>Durée de cuisson</strong> : 25 minutes</p>
15
                <p><strong>Difficulté</strong> : Facile</p>
16
                <p><strong>Ingrédients</strong> :</p>
17
                <ul>
18
                    <li>50 g de beurre</li>
19
                    <li>150g de sucre en poudre</li>
20
                    <li>1 sachet de levure chimique</li>
21
                    <li>3 cuillères à soupe de lait</li>
22
                    <li>3 oeufs</li>
23
                    <li>1/4 litre d'eau</li>
24
                    <li>1/4 litre de sirop de sucre de canne</li>
25
                    <li>10cl de rhum</li>
26
                </ul>
27
                <p><strong>Matériel</strong> : Fouet, Moule en couronne</p>
28
            </div>
29
30
            <h2>Recette</h2>
31
32
            <p>Faire préchauffer le four thermostat 6 (180°C).</p>
33
            <p>Travailler au fouet les jaunes d'oeufs avec le sucre jusqu'à ce que le mélange blanchisse</p>
34
            <p>Ajouter le lait chaud, le beurre fondu, la farine et la levure. Battre les blancs en neige ferme.</p>
35
            <p>Mélanger les délicatement à la pâte.</p>
36
            <p>Verser la pâte dans un moule en couronne préalablement beurré ou dans des moules individuels.</p>
37
            <p>Enfourner et laisser cuire 25 min puis démouler aussitôt.</p>
38
            <p>Faire chauffer le sirop chaud avec l'eau, le sirop de sucre de canne et le rhum et en arroser le baba jusqu'à complète absorption.</p>
39
            <p>Servir frais avec une salade de fruits ou/et de la chantilly.</p>
40
        </div>
41
    </body>
42
</html>

Ainsi que le style que nous voulons lui appliquer :

1
#body-content {
2
    font-family:sans-serif;
3
    width: 50%;
4
    margin-left:10%;
5
    margin-right:auto;
6
}
7
8
#prerequis-content {
9
    border: 5px solid #0099ff;
10
}
Question
Placez-vous dans votre dossier de travail, pour avoir les jar 'à portée de cd'.
Créez un fichier baba.xhtml contenant le code ci-dessus, liez le style associé, puis générez un fichier PDF à l'aide d'une simple ligne de commande.
Indice
Invoquez la classe org.xhtmlrenderer.simple.PDFRenderer de Flying Saucer en lui donnant les bons arguments
Solution
1
<head>
2
    <title>Recette de Baba au Rhum</title>
3
    <link href="baba-web.css" rel="stylesheet" type="text/css"/>
4
</head>
1
java -cp core-renderer.jar:iText-2.0.8.jar org.xhtmlrenderer.simple.PDFRenderer baba.xhtml baba.pdf
Question
Le rendu n'est pas optimal. En effet, les règles appliquées se prêtent à une utilisation web, mais produisent un effet indésirable dans la génération PDF (notamment, la largeur du div#body-content )
Corriger cela en appliquant les principes de CSS vu précédemment.
Indice
Il est possible d'appliquer plusieurs feuilles de style. Il est aussi possible d'indiquer le support média visé.
Il est nécessaire, dans notre cas, de corriger les propriétés margin et width du div possédant l'id prerequis-content
Solution
Créer une deuxième feuille CSS, baba-print.css, et la lier au document XHTML. Corriger la largeur et les marges du div fautif.
1
<head>
2
    <title>Recette de Baba au Rhum</title>
3
    <link href="baba-web.css" rel="stylesheet" type="text/css"/>
4
    <link href="baba-print.css" rel="stylesheet" type="text/css" media="print"/>
5
</head>
Et dans ce nouveau fichier CSS :
1
#body-content {
2
    width: auto;
3
    margin: auto;
4
}
Rappel
L'attribut media permet d'indiquer que nous ne souhaitons appliquer ce deuxième style qu'en cas de document imprimable/paginé. Elle s'applique après le style principal, venant simplement modifier les règles déjà en place.
Question
Préciser la feuille de style créée afin de générer une page A4 en portrait, possédant des marges de 2cm.
Nous souhaitons également insérer un compteur de pages en bas à droite du document pour les pages de gauche, et inversement pour les pages de droite.
Indice
Utiliser les sélecteurs et pseudo-classes vu précédemment :
  • @page, :left et :right
  • @bottom-right, @bottom-left
Solution
1
@page {
2
  size: A4 portrait;
3
  margin: 2cm;
4
}
5
6
@page:left{
7
  @bottom-right {
8
    content: counter(page);
9
    text-align: right;
10
  }
11
}
12
13
@page:right{
14
  @bottom-left {
15
    content: counter(page);
16
    text-align: left;
17
  }
18
}
Question
Enfin, ajouter un saut de page, permettant de garder les prérequis sur la première, et les étapes de la recette sur la seconde.
Indice
1
<div id="prerequis">
2
    <h2>Prérequis</h2>
3
    <div id="prerequis-content">
4
        <p><strong>Durée de préparation</strong> : 20 minutes</p>
5
        ...
6
        <p><strong>Matériel</strong> : Fouet, Moule en couronne</p>
7
    </div>
8
</div>
Rappelez-vous des propriétés CSS : page-break-before , page-break-after
Solution
Il existe plusieurs implémentations possibles... En voici une :
1
<div id="prerequis">
2
    <h2>Prérequis</h2>
3
    <div id="prerequis-content">
4
        <p><strong>Durée de préparation</strong> : 20 minutes</p>
5
        ...
6
        <p><strong>Matériel</strong> : Fouet, Moule en couronne</p>
7
    </div>
8
</div>
1
#prerequis{
2
	page-break-after: always;
3
}
PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer
								Jean Vintache, Samuel Martineau, Fabien Michalon, 2013-2015 (Contributions : Stéphane Crozat, les étudiants de NF29) 
								Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)