XSL-FO THEORIE PRATIQUE.

Présentation au sujet: "XSL-FO THEORIE PRATIQUE."— Transcription de la présentation:

1 XSL-FO THEORIE PRATIQUE

2 THEORIE XSL-FO

3 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.

4 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.

5 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 XSL-FO, à l’aide d’un processeur XSLT. On utilise ensuite un processeur FOP pour convertir le document XSL-FO en PDF.

6 Architecture utilisée pour générer du PDF
XML - données XSLT Processeur XSLT Document XSL-FO Processeur FOP Document PDF

7 PRATIQUE XSL-FO

8 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:

9 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> </gateau> </recette>

10 Feuille de style XSL-FO
On appelle une page XSL-FO de la manière suivante: <?xml version="1.0" encoding="ISO "?> <xsl:stylesheet version="1.0" xmlns:xsl=" xmlns:fo=" <xsl:template match="recette"> <xsl:processing-instruction name="cocoon-format">type="text/xslfo"</xsl:processing-instruction> <fo:root xmlns:fo="

11 Page layout Page top margin BEFORE Page Page left START right END BODY
AFTER Page bottom margin

12 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.

13 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>

14 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"

15 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 -->

16 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>

17 fo:list-item-label fo:list-item-body
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

18 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> Résultat :

19 Les tables ressemblent un peu aux tables HTML fo:table-and-caption:
fo:table-caption fo:table fo:table-column 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

20 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 /> </fo:block> </fo:table-cell> <fo:table-cell column-number="2"> <fo:block color="navy" font-size="16pt" text-align="center" space before.optimum="15pt"> <xsl:apply-templates select="type" /> </fo:table-row> </fo:table-body> </fo:table> </xsl:template> Résultat :

21 Les images L’insertion d’une image se fait avec le tag :
<fo:external-graphic src="image"/>

22 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 /> </xsl:template> Résultat :

23 Les liens L’insertion d’un lien Internet ou d’une adresse se fait avec le tag: <fo:basic-link external-destination=" Autres liens possibles : internal-destination indicate-destination show-destination destination-placement-offset target-presentation-context target-processing-context target-stylesheet

24 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> </xsl:template> Résultat :

25 Exemple complet Résultat final après avoir mis les différents éléments ensemble : Résultat final en PDF :