XSL-FO

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: http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette

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>http://www.medi1.com/scripts/recettes.php3?r=616</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-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">

11. Page layout Page top margin BEFORE Page Page left START right END BODY margin margin 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" 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>

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. 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-templatesselect="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-ofselect="." /> </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

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-columncolumn-number="1" column-width="5cm" /> <fo:table-columncolumn-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-graphicsrc="{@photo}" /> </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-templatesselect="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

21. Les images • L’insertion d’une image se fait avec le tag : <fo:external-graphicsrc="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-templatesselect="type" /> </fo:block> <fo:block space-before.optimum="12pt"> <fo:external-graphicsrc="{@photo}" /> </fo:block> </xsl:template> Résultat :http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/image.pdf

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

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-ofselect="." /> </fo:basic-link> </fo:block> </xsl:template> Résultat :http://tecfa.unige.ch/staf/staf-g/glaus/staf2x/ex3/recette/lien.pdf

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