Transcript XSL-FO  THEORIE PRATIQUE

XSL-FO
 THEORIE
 PRATIQUE
THEORIE XSL-FO
Présentation

XSL-FO (XSL Formatting Objects) permet d’exprimer
de manière très précise le rendu d’un document. Il
gère la pagination d’un document, les notes de bas
de page, les marges,… Il est possible de préciser
avec exactitude l’emplacement des différents objets
sur la page, les polices des caractères, l’affichage de
tableaux, etc.

Un document XSL-FO est assez pénible à réaliser à
la main, c’est pourquoi on utilise XSLT dans le but de
générer du XSL-FO à partir de données au format
XML.
Présentation

Ce langage, qui a failli tomber dans les oubliettes,
doit sa renaissance à FOP (Formatting Object
Processor).

FOP, développé dans le cadre du projet Apache,
permet à partir d’un document XSL-FO de générer un
document PDF. Il représente ainsi la solution idéale
pour l’édition de factures ou de contrats sur le Web.
Architecture utilisée pour générer du PDF

Les données à présenter sont en XML. A partir d’une
feuille de style XSLT, on génère un document XSLFO, à l’aide d’un processeur XSLT.

On utilise ensuite un processeur FOP pour convertir
le document XSL-FO en PDF.
Architecture utilisée pour générer du PDF
XML - données
XSLT
Processeur XSLT
Document XSL-FO
Processeur FOP
Document PDF
PRATIQUE XSL-FO
Exemple d’organisation d’un fichier XSL-FO

Nous allons utiliser un exemple simple que nous
avons créé afin de montrer les différentes
composantes d’un fichier XSL-FO.

Il est possible de trouver les exemples à l’adresse:
http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette
Fichier XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="recettefo.xsl" type="text/xsl"?>
<?cocoon-process type="xslt"?>
<!DOCTYPE recette SYSTEM "recette.dtd">
<recette>
<titre>Les Bonnes Recettes de Cuisine</titre>
<gateau photo="gateau.gif">
<type>Gâteau aux Noix et au Chocolat blanc</type>
<ingredients>
<ingredient>250g de chocolat blanc</ingredient>
<ingredient>60g de noix</ingredient>
…
<ingredient>10g de levure chimique</ingredient>
</ingredients>
<preparation>
Faites ramollir le beurre dans un petit bol, lui même dans un grand bol d'eau très chaude.
fouettez le beurre énergiquement et y ajoutez les sucres. ajoutez l'oeuf entier …
</preparation>
<internet>http://www.medi1.com/scripts/recettes.php3?r=616</internet>
</gateau>
</recette>
Feuille de style XSL-FO

On appelle une page XSL-FO de la manière suivante:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="recette">
<xsl:processing-instruction name="cocoon-format">type="text/xslfo"</xsl:processing-instruction>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
Page layout
Page top margin
BEFORE
P
a
g
e
l
e
f
t
m
a
r
g
i
n
S
T
A
R
T
BODY
AFTER
Page bottom margin
P
a
g
e
E
N
D
r
i
g
h
t
m
a
r
g
i
n
Architecture de la racine FO
Sous la racine fo:root il y a toujours:
 un fo:layout-master-set qui définit un ou plusieurs page layout définis avec
fo:simple-page-master
 des déclarations à option fo:declarations
 une séquence d’un ou plusieurs fo:page-sequences qui contiennent du texte
(littéralement ou fournis par XSLT) et des instructions de formatage.
Squelette XSL-FO de base
<xsl:template match="page">
<fo:root>
<fo:layout-master-set>
<!-- Definition of a single master page. It is simple (no headers etc.) -->
<fo:simple-page-master master-name="first" >
<!-- required element body -->
<fo:region-body/>
</fo:simple-page-master>
</fo:layout-master-set>
<!-- Definition of a page sequence -->
<fo:page-sequence master-name="first">
<fo:flow flow-name="xsl-region-body" font-size="14pt" line-height="14pt">
<xsl:apply-templates/>
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>
Pagination
<fo:layout-master-set>
<fo:simple-page-master master-name="first"
page-height="29.7cm"
page-width="21cm"
margin-top="1cm"
margin-bottom="2cm"
margin-left="2.5cm"
margin-right="2.5cm">
<fo:region-body margin-top="1cm"/>
<fo:region-before extent="1cm"/>
<fo:region-after extent="1.5cm"/>
</fo:simple-page-master>
<fo:simple-page-master master-name="right"
page-height="29.7cm"
page-width="21cm"
margin-top="1cm"
margin-bottom="2cm"
margin-left="2.5cm"
margin-right="2.5cm">
<fo:region-body margin-top="1cm"/>
<fo:region-before extent="1cm"/>
<fo:region-after extent="1.5cm"/>
</fo:simple-page-master>
Pagination
<fo:simple-page-master master-name="left"
page-height="29.7cm"
page-width="21cm"
margin-top="1cm"
margin-bottom="2cm"
margin-left="2.5cm"
margin-right="2.5cm">
<fo:region-body margin-top="1cm"/>
<fo:region-before extent="1cm"/>
<fo:region-after extent="1.5cm"/>
</fo:simple-page-master>
<fo:page-sequence-master master-name="run">
<fo:repeatable-page-master-alternatives maximum-repeats="no-limit" >
<fo:conditional-page-master-reference master-reference="left" odd-or-even="even" />
<fo:conditional-page-master-reference master-reference="right" odd-or-even="odd" />
<fo:conditional-page-master-reference master-reference="title"/>
</fo:repeatable-page-master-alternatives>
</fo:page-sequence-master>
</fo:layout-master-set>
<!-- end: defines page layout -->
Pagination
<!-- actual layout -->
<fo:page-sequence master-reference="run" initial-page-number="1">
<fo:static-content flow-name="xsl-region-before">
<fo:block text-align="end" font-size="10pt" font-family="sans-serif" line-height="11pt" color="lightslategray" >
<xsl:value-of select="titre"/> <fo:page-number/>
</fo:block>
</fo:static-content>
<fo:flow flow-name="xsl-region-body" font-size="12pt" line-height="11pt">
<xsl:apply-templates/>
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>
Les listes

Mécanisme puissant: listes ordinaires, notes en bas de page, simples tables,
etc.
fo:list-block
fo:list-item
fo:list-item-label
fo:list-item-body
fo:list-block: contient la liste et contient quelques définitions pour la géométrie
 fo:list-item: enfants de fo:list-block, c.a.d. des items qui contiennent un label et
un body (voir ci-dessous)
 fo: fo:list-item-label: contient le contenu du label (typiquement un fo:block
avec un nombre, un caractère dingbat, etc.)
 The fo:list-item-body contient le corps d’un item, un ou plusieurs fo:block

Une simple « bullet-list »
<xsl:template match="ingredients">
<fo:block color="navy" font-size="12pt" text-align="justify" space-before.optimum="15pt"
background-color="lavender">Ingrédients :</fo:block>
<xsl:apply-templates select="ingredient" />
</xsl:template>
<xsl:template match="ingredient">
<fo:list-block space-before.optimum="4pt">
<fo:list-item space-before.optimum="4pt">
<fo:list-item-label end-indent="label-end()"><fo:block>·</fo:block>
</fo:list-item-label>
<fo:list-item-body start-indent="body-start()">
<fo:block text-align="justify" font-size="10pt">
<xsl:value-of select="." />
</fo:block>
</fo:list-item-body>
</fo:list-item>
</fo:list-block>
</xsl:template>

Résultat : http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/liste.pdf
Les tables

ressemblent un peu aux tables HTML
fo:table-and-caption
fo:table-caption
fo:table-column








fo:table
fo:table-header
fo:table-body
fo:table-footer
fo:table-row
fo:table-row
fo:table-row
fo:table-cell
fo:table-cell
fo:table-cell
fo:table-and-caption:
fo:table-caption: La caption d’une table
fo:table: la table proprement dite. Elle contien header et footer à option et un body.
fo:table-column: permet de specifier notamment la longeur d’une colonne
fo:table-header: Ligne entête, contient des lignes ou cellules
fo:table-footer: Ligne "footer", contient des lignes ou cellules
fo:table-body: contient des lignes ou cellules
fo:table-row: contient des cellules qui contiennent des fo:blocks
Un tableau à deux colonnes
<xsl:template match="gateau">
<fo:table table-layout="fixed" space-before.optimum="15pt">
<fo:table-column column-number="1" column-width="5cm" />
<fo:table-column column-number="2" column-width="10cm" />
<fo:table-body>
<fo:table-row>
<fo:table-cell column-number="1">
<fo:block space-before.optimum="12pt">
<fo:external-graphic src="{@photo}" />
</fo:block>
</fo:table-cell>
<fo:table-cell column-number="2">
<fo:block color="navy" font-size="16pt" text-align="center" spacebefore.optimum="15pt">
<xsl:apply-templates select="type" />
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</xsl:template>

Résultat : http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/table.pdf
Les images

L’insertion d’une image se fait avec le tag :
<fo:external-graphic src="image"/>
Insertion d’une image
<xsl:template match="gateau">
<fo:block color="navy" font-size="16pt" text-align="center" space before.optimum="15pt">
<xsl:apply-templates select="type" />
</fo:block>
<fo:block space-before.optimum="12pt">
<fo:external-graphic src="{@photo}" />
</fo:block>
</xsl:template>
Résultat : http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/image.pdf
Les liens
L’insertion d’un lien Internet ou d’une adresse E-mail se fait avec le tag:
<fo:basic-link external-destination="http://tecfa.unige.ch">
 Autres liens possibles :

–
–
–
–
–
–
–
internal-destination
indicate-destination
show-destination
destination-placement-offset
target-presentation-context
target-processing-context
target-stylesheet
Insertion d’un lien
<xsl:template match="internet">
<fo:block color="navy" font-size="12pt" text-align="justify" space-before.optimum="12pt"
background-color="lavender">
Site Internet :
</fo:block>
<fo:block color="navy" font-size="12pt" text-align="justify" space-before.optimum="15pt">
<fo:basic-link external-destination="{.}">
<xsl:value-of select="." />
</fo:basic-link>
</fo:block>
</xsl:template>
Résultat : http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/lien.pdf
Exemple complet

Résultat final après avoir mis les différents éléments ensemble :
http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/recettefo.xsl

Résultat final en PDF :
http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/recette.pdf