Conception d un modèle d impression pour Veremap.pro/Fop.

Transcription

1 Conception d un modèle d impression pour Veremap.pro/Fop. Table des matières 1. Présentation Documentation Détaillée Comment est créé le document PDF... 3 a. Description du «fichier data»... 5 b. Description du «fichier de style»... 6 c. Description du «fichier merge»... 8 d. Description du «fichier XSL»... 9 e. Description de «la classe PHP» f. Description du «fichier PDF» Procédure de test Modification à effectuer pour faire fonctionner le test Erreur possible lors du test Modification d un modèle d impression Mise en page générale Définition des trois parties principales Comment définir un tableau Comment mettre en forme les données a. Modifier la valeur d une donnée b. Modifier l apparence d une donnée Utiliser des attributs nommés Utiliser des propriétés facultatives (propre à un élément) Exemple de document comprenant du style Création d un nouveau modèle d impression Installation d un nouveau modèle d impression Documentation du modèle d impression Page 1 sur 26

2 1. Présentation L application web veremap.pro comporte deux systèmes d impression : - Un système d impression par défaut, basé sur la librairie PHP. - Un second système d impression basé sur le logiciel FOP. Le présent document décrit donc le modèle d impression de l Agence d Espace Vert de l Ile de France basé sur le second modèle via le logiciel FOP. Ce document sera découpé en plusieurs points : - Un premier qui détaille les fonctionnalités générales pour créer un document PDF. - Un second qui décrit les étapes à effectuer pour tester en ligne de commande une impression FOP. - Un troisième qui expose comment modifier le modèle (la mise en page) du document PDF qui sera généré. - Un quatrième qui détaille la création d un nouveau modèle d impression - Enfin, un cinquième qui permet d installer un nouveau modèle d impression. Documentation du modèle d impression Page 2 sur 26

3 2. Documentation Détaillée 1. Comment est créé le document PDF Mise en page du document Style du document Lorsque l utilisateur imprime son formulaire, les images de la carte, de la légende, de la carte de référence et de l échelle sont créées dans le répertoire relatif à la propriété «$properties["map_dir"]». Une fois ces images générées, le fichier dit «fichier data» est créé. Il est placé de la même manière dans le répertoire relatif à la propriété «$properties["map_dir"]» de veremap.pro et, est composé des informations relatives à l impression. Par la suite, une première transformation s effectue. Cette transformation engendre la création du fichier dit «fichier merge». Ce «fichier merge» est le résultat de la fusion entre le «fichier data» et le «fichier de style». S ensuit une seconde transformation qui génère un fichier xsl:fo temporaire à partir du «fichier merge». Enfin, à travers une troisième et dernière étape, le logiciel FOP transforme le fichier temporaire xls:fo en fichier PDF. Cette dernière transformation est réalisée à l aide d une ligne de commande exécuté en PHP. Cette dernière est, à chaque demande d impression, logué dans un fichier «/log/debug.log». Si la carte dans laquelle la demande d impression effectuée possède un module, cette ligne de commande est logué dans le fichier relatif à la propriété «$properties["debug_log_file"], si celle-ci ne possède pas de module cette ligne de commande sera logué dans le fichier relatif à la propriété «$properties["debug_log_file"]» de Veremap.pro. Documentation du modèle d impression Page 3 sur 26

4 FopTemplateA3Paysage.class.inc data.xml aev.xml Fop_merge.xsl merge.xml FopTemplateA3Paysage.xsl Fichier.pdf Documentation du modèle d impression Page 4 sur 26

5 a. Description du «fichier data» <?xml version="1.0" encoding="utf-8"?> <data> <FopTemplateA3PaysageAEV titre="patrimoine" comment="patrimoine de Saint Thibery" date="26/10/10" day="26" month="10" year="10" username="laurent" scalebartextuelle="1 : 35258"> <FopMap id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/4cc6d41b_1fc_1.png" width="345mm" height="230mm" sources="dgi, CC"/> <FopLegend id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/ legend.png" width="100mm" height="100mm"/> <FopOverview id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/4cc6d418_1fc_0.png" width="50mm" height="50mm"/> <FopScaleBar id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/4cc6d41f_1fc_2.png" width="80%" height="80%"/> </FopTemplateA3PaysageAEV> </data> Le «fichier data» correspond aux informations relatives à l impression. Il définit notamment des caractéristiques du document. Voyons en détail à quoi correspondent chaque attribut : Arborescence Valeur Description /data/<modèle>@titre Patrimoine Titre du document /data/<modèle>@comment Patrimoine de Saint Thibéry Commentaire du document /data/<modèle>@date 26/10/10 Date de la demande d impression /data/<modèle>@day 26 Jour de la demande d impression /data/<modèle>@month 10 Mois de la demande d impression /data/<modèle>@year 10 Année de la demande d impression /data/<modèle>@username laurent Utilisateur ayant effectué l impression /data/<modèle>@scalebartextuelle 1 : Echelle de la carte /data/<modèle>/fopmap[@id= 1 ]/@src C:/serveurs/Apache2/htdocs/veremap.pro/tmp/4cc6d41b_1fc_1.png Chemin de l image de la carte d id n 1 /data/<modèle>/fopmap[@id= 1 ]/@width 345mm Taille de l image de la carte d id n 1 /data/<modèle>/fopmap[@id= 1 ]/@height 230mm Hauteur de l image de la carte d id n 1 /data/<modèle>/fopmap[@id= 1 ]/@sources DGI, CC Source de l image de la carte d id n 1 Documentation du modèle d impression Page 5 sur 26

6 Les attributs du modèle et de l objet FopMap ont été détaillés dans le tableau ci-dessus. Cependant le «fichier data» est aussi composé des caractéristiques des autres images telles que la légende (FopLegend), la carte de référence (FopOverview) ainsi que celle de l échelle (FopScaleBar). b. Description du «fichier de style» <?xml version="1.0" encoding="iso "?> <style> <image id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/logo-aev-quadri.jpg" width="85px" height="25px" commentaire="a4" /> <image id="2" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/flechenord.bmp" width="60px" height="65px" commentaire="a4" /> <image id="3" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/aev_fj.jpg" width="140px" height="165px" commentaire="a3" /> <image id="4" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/flechenord.bmp" width="80px" height="85px" commentaire="a3" /> <image id="5" src="" legend="" width="" height=""/> <string id="1" value="" police="'sauna'" style="" size="15pt" couleur="rgb(0, 0, 0)" commentaire="zone header"/> <string id="2" value="sources : " police="'sauna'" size_aev="8pt" couleur="rgb(0, 0, 0)" align="left" /> <string id="3" value="légende " police="'sauna'" size_aev="16pt" align="left" weight=''style="" couleur="rgb(0, 0, 0)" textdecoration="underline" /> <string id="4" value="" police="'sauna'" style="" size="15pt" couleur="rgb(0, 0, 0)" align="right" commentaire="titre"/> <string id="5" value="commentaires : " police="'sauna'" style_aev="normal" weight='bold' size_aev="9pt" couleur="rgb(0, 0, 0)" align="center"/> <string id="6" value="" police="'sauna'" style="" size="10pt" couleur="rgb(0, 0, 0)" align="left" commentaire=" zone footer"/> <string id="7" value="" police="'sauna'" size_aev="10pt" couleur="rgb(0, 0, 0)" align="left" /> <string id="7" value=" AEV - Tous droits réservés " police="'sauna'" size_aev="10pt" couleur="rgb(0, 0, 0)" align="left" /> <string id="8" value="auteur : " police="'sauna'" size_aev="8.25pt" couleur="rgb(78, 78, 78)" align="right" style="normal" /> <string id="9" value="localisation en Ile de France " police="'sauna'" size_aev="9pt" couleur="rgb(0, 0, 0)" style_aev="italic" align="left" /> <string id="10" value="sources : " police="'sauna'" size_aev="10pt" couleur="rgb(0, 0, 0)" align="left" commentaire="pour A3" /> <string id="11" value="commentaires : " police="'sauna'" style_aev="normal" weight='bold' size_aev="12pt" couleur="rgb(0, 0, 0)" align="center"/> <string id="12" value="localisation en Ile de France " police="'sauna'" size_aev="12pt" couleur="rgb(0, 0, 0)" style_aev="italic" align="left" /> <string id="13" value="légende " police="sauna" size_aev="18pt" align="left" weight='' style="" couleur="rgb(0, 0, 0)" textdecoration="underline" /> <string id="14" value="auteur : " police="'sauna'" size_aev="10pt" couleur="rgb(78, 78, 78)" align="right" style="normal" /> <epaisseur id="1" value="0pt"/> <epaisseur id="2" value="30pt"/> <couleur id="1" value="rgb(136, 187, 61)" /> <couleur id="2" value="rgb(0, 0, 0)" /> <couleur id="3" value="rgb(255, 255, 255)" /> <couleur id="4" value="rgb(78, 78, 78)" /> <alignement id="1" value="left" /> <alignement id="2" value="center" /> <alignement id="3" value="right"/> Documentation du modèle d impression Page 6 sur 26

7 <border id="1" value="hidden" /> <border id="2" value="solid" /> <police id="1" value="courier" /> <police id="2" value="helvetica" /> <police id="3" value="times" /> <police id="4" value="sauna" /> <weight_aev id="1" value="bold" /> <textdecoration id="1" value="underline" /> <textdecoration id="1" value="none" /> <style_aev id="1" value="normal" /> <style_aev id="2" value="italic" /> <size_aev id="1" value="20pt" /> <size_aev id="2" value="8.25pt" /> <size_aev id="3" value="8pt" /> <size_aev id="4" value="30pt" /> <size_aev id="5" value="10pt" /> <size_aev id="6" value="8pt" /> </style> Le «fichier de style» est un fichier entièrement créé par l utilisateur. Il permet notamment de définir l ensemble des propriétés de style utilisables pour générer le document PDF. Il définit aussi bien des propriétés relatives aux images (taille de l image ) que des propriétés relatives aux chaines de caractères (couleur police ). Voyons par exemple en détails quelques attributs qui composent ce fichier de style : Arborescence Valeur Description /style/image[@id= 4 ]/@src C:/serveurs/Apache2/htdocs/veremap.pro/print/images/flechenord.bmp Chemin de l image d id n 4 (flèche du nord) /style/string[@id= 13 ]/@value Légende Valeur de la balise «string» d id n 13 /style/couleur[@id= 2 ]/@value Rgd(0,0,0) Valeur de la balise «couleur» d id n 2 /style/alignement[@id= 2 ]/@value center Valeur de la balise «alignement» d id n 2 /style/police[@id= 1 ]/@value Courier Valeur de la balise «police» d id n 1 /style/style_aev[@id= 2 ]/@value italic Valeur de la balise «style_aev» d id n 2 Documentation du modèle d impression Page 7 sur 26

8 c. Description du «fichier merge» <?xml version="1.0"?> <fopsource> <data> <FopTemplateA3PaysageAEV titre="patrimoine" comment="patrimoine de Saint Thibery" date="26/10/10" day="26" month="10" year="10" username="laurent" scalebartextuelle="1 : 35258"> <FopMap id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/4cc6d41b_1fc_1.png" width="345mm" height="230mm" sources="dgi, CC"/> <FopLegend id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/ legend.png" width="100mm" height="100mm"/> <FopOverview id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/4cc6d418_1fc_0.png" width="50mm" height="50mm"/> <FopScaleBar id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/tmp/4cc6d41f_1fc_2.png" width="80%" height="80%"/> </FopTemplateA3PaysageAEV> </data> <style> <image id="1" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/logo-aev-quadri.jpg" width="85px" height="25px" commentaire="a4"/> <image id="2" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/flechenord.bmp" width="60px" height="65px" commentaire="a4"/> <image id="3" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/aev_fj.jpg" width="140px" height="165px" commentaire="a3"/> <image id="4" src="c:/serveurs/apache2/htdocs/veremap.pro/print/images/flechenord.bmp" width="80px" height="85px" commentaire="a3"/> <image id="5" src="" legend="" width="" height=""/> <string id="1" value="" police="'sauna'" style="" size="15pt" couleur="rgb(0, 0, 0)" commentaire="zone header"/> <string id="2" value="sources : " police="'sauna'" size_aev="8pt" couleur="rgb(0, 0, 0)" align="left"/> <string id="3" value="légende " police="'sauna'" size_aev="16pt" align="left" weight="" style="" couleur="rgb(0, 0, 0)" textdecoration="underline"/> <string id="4" value="" police="'sauna'" style="" size="15pt" couleur="rgb(0, 0, 0)" align="right" commentaire="titre"/> <string id="5" value="commentaires : " police="'sauna'" style_aev="normal" weight="bold" size_aev="9pt" couleur="rgb(0, 0, 0)" align="center"/> <string id="6" value="" police="'sauna'" style="" size="10pt" couleur="rgb(0, 0, 0)" align="left" commentaire=" zone footer"/> <string id="7" value="" police="'sauna'" size_aev="10pt" couleur="rgb(0, 0, 0)" align="left"/> <string id="7" value=" AEV - Tous droits réservés " police="'sauna'" size_aev="10pt" couleur="rgb(0, 0, 0)" align="left"/> <string id="8" value="auteur : " police="'sauna'" size_aev="8.25pt" couleur="rgb(78, 78, 78)" align="right" style="normal"/> <string id="9" value="localisation en Ile de France " police="'sauna'" size_aev="9pt" couleur="rgb(0, 0, 0)" style_aev="italic" align="left"/> <string id="10" value="sources : " police="'sauna'" size_aev="10pt" couleur="rgb(0, 0, 0)" align="left" commentaire="pour A3"/> <string id="11" value="commentaires : " police="'sauna'" style_aev="normal" weight="bold" size_aev="12pt" couleur="rgb(0, 0, 0)" align="center"/> <string id="12" value="localisation en Ile de France " police="'sauna'" size_aev="12pt" couleur="rgb(0, 0, 0)" style_aev="italic" align="left"/> <string id="13" value="légende " police="sauna" size_aev="18pt" align="left" weight="" style="" couleur="rgb(0, 0, 0)" textdecoration="underline"/> <string id="14" value="auteur : " police="'sauna'" size_aev="10pt" couleur="rgb(78, 78, 78)" align="right" style="normal"/> <epaisseur id="1" value="0pt"/> <epaisseur id="2" value="30pt"/> <couleur id="1" value="rgb(136, 187, 61)"/> <couleur id="2" value="rgb(0, 0, 0)"/> Documentation du modèle d impression Page 8 sur 26

9 <couleur id="3" value="rgb(255, 255, 255)"/> <couleur id="4" value="rgb(78, 78, 78)"/> <alignement id="1" value="left"/> <alignement id="2" value="center"/> <alignement id="3" value="right"/> <border id="1" value="hidden"/> <border id="2" value="solid"/> <police id="1" value="courier"/> <police id="2" value="helvetica"/> <police id="3" value="times"/> <police id="4" value="sauna"/> <weight_aev id="1" value="bold"/> <textdecoration id="1" value="underline"/> <textdecoration id="1" value="none"/> <style_aev id="1" value="normal"/> <style_aev id="2" value="italic"/> <size_aev id="1" value="20pt"/> <size_aev id="2" value="8.25pt"/> <size_aev id="3" value="8pt"/> <size_aev id="4" value="30pt"/> <size_aev id="5" value="10pt"/> <size_aev id="6" value="8pt"/> </style> </fopsource> Le «fichier merge» est un fichier XML né de la fusion du «fichier data» et du «fichier de style». Il sera donc composé de l ensemble des informations relatives à l impression («fichier data») ainsi que des informations relatives au «fichier de styles». Ce fichier est donc définit tout d abord par des balises générales <fopsource></fopsource> qui elle-même encadreront les balises définissants les données (<data></data) et les balises définissants le style (<style></style>) du document. d. Description du «fichier XSL» <?xml version="1.0" encoding="iso "?> Documentation du modèle d impression Page 9 sur 26

10 <xsl:stylesheet version="1.0" xmlns:xsl=" <!-- Définition des attributs pour le block header -->... <!--Fin Définition des attributs pour le block header --> <!-- Définition des attributs pour le block footer -->... <!--Fin Définition des attributs pour le block footer --> <xsl:template match="/"> <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name="simple" page-height="29.7cm" page-width="42cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm"> <fo:region-body region-name="content" margin="2cm 0cm 0cm 0cm" /> <fo:region-before region-name="header" extent="2in"></fo:region-before> <!--fo:region-after region-name="footer" extent="0in" display-align="before" precedence="true"></fo:region-after--> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="simple" > <!-- Début de l'en-tête qui se retrouvera sur chaque page --> <fo:static-content flow-name="header"> <fo:block> <fo:table table-layout="fixed" width="100%" border-collapse="collapse" font-size="7pt"> <fo:table-column column-width="34.5cm" /> <fo:table-column column-width="0.1cm" /> <fo:table-column column-width="6cm" /> <fo:table-body> <fo:table-row height="1.25cm"> <fo:table-cell padding-top="0cm" border-width="0pt"> <fo:block xsl:use-attribute-sets="header_block" line-height="2cm" > <xsl:value-of <fo:table-cell height="1.25cm" > <fo:block> <fo:table-cell padding-top="0cm" border-width="0pt" > <fo:block-container position="absolute" top="-5pt" left="0pt" text-align="left"> <fo:block line-height="1.25cm" text-align="left" > Documentation du modèle d impression Page 10 sur 26

11 <xsl:attribute name="text-align"> <xsl:value-of <xsl:attribute name="background-color"> <xsl:value-of <fo:external-graphic> <xsl:attribute name="src"> <xsl:value-of <xsl:attribute name="text-align"> <xsl:value-of <xsl:attribute name="content-width" > <xsl:apply-templates <xsl:attribute name="content-height" > <xsl:apply-templates <xsl:attribute name="vertical-align"> <xsl:value-of select="baseline"/> </fo:external-graphic> </fo:block-container> </fo:table-row> </fo:table-body> </fo:table> </fo:static-content> <!-- Fin de l'en-tête -->... Le document XSL permet de transformer le «fichier merge» en fichier XSL:FO puis en document PDF. La structure d un document XSL:FO est décrite dans les ouvrages ci-dessous : - Documentation du modèle d impression Page 11 sur 26

12 Livre : «Definitive XSL-FO» de G. KEN HOLMAN e. Description de «la classe PHP» La classe PHP permet simplement de définir la taille de certaines images telles que la carte (largeur : 200, hauteur : 290), la légende (largeur : 50, hauteur : 150), et l échelle (largeur : 80). Documentation du modèle d impression Page 12 sur 26

13 f. Description du «fichier PDF» Résultat de la transformation du fichier xsl:fo via le logiciel FOP, le fichier PDF définit la mise en page du «fichier XSL». Il va notamment reprendre les informations saisies par l utilisateur au moment de la validation de l impression (ex : titre «Bois Chardon»), mais il affichera aussi d autres informations telles que certaines images (carte, légende ), le nom de l utilisateur, la source. Le fichier PDF est en fait le rendu final d un procédé qui aura demandé plusieurs étapes de transformations. 3. Procédure de test 1. Modification à effectuer pour faire fonctionner le test Pour faire fonctionner la procédure de test, il faut tout d abord s assurer que la ligne de commande dos qui se trouve dans le fichier «/veremap.pro/print/test/test_fop.bat» soit correcte. Pour cela, éditez le fichier «test_fop.bat» avec un éditeur de texte standard (ex : Notepad++) puis remplacez «C» par le nom du disque du serveur sur lequel est installé veremap.pro. Exemple : Documentation du modèle d impression Page 13 sur 26

14 C:/serveurs/fop-0.93/fop -c C:/serveurs/Apache2/htdocs/veremap.pro/print/fop/conf.xml -xml C:/serveurs/Apache2/htdocs/veremap.pro/tmp/ merge.xml -xsl C:/serveurs/Apache2/htdocs/veremap.pro/print/templates/FopTemplateA3PaysageAEV.xsl -pdf C:/serveurs/Apache2/htdocs/veremap.pro/tmp// pdf D:/serveurs/fop-0.93/fop -c C:/serveurs/Apache2/htdocs/veremap.pro/print/fop/conf.xml -xml D:/serveurs/Apache2/htdocs/veremap.pro/tmp/ merge.xml -xsl D:/serveurs/Apache2/htdocs/veremap.pro/print/templates/FopTemplateA3PaysageAEV.xsl -pdf D:/serveurs/Apache2/htdocs/veremap.pro/tmp// pdf Une fois cette modification éventuelle effectuée exécutez le fichier «test_fop.bat» en fenêtre console (démarrer/exécuter/ouvrir : cmd). Pour cela, saisissez le chemin complet de l emplacement de votre fichier.bat (ou faites glisser/déposer le fichier dans la fenêtre console), puis validez. Un fichier PDF nommé «impression_fop.pdf» sera généré dans «/veremap.pro/print/test/result» et ce dernier indiquera que votre application veremap.pro est correctement paramétrée pour réaliser des impressions via FOP. Il est également possible de lancer directement le fichier.bat sans passer par la fenêtre console mais cette manipulation empêche l utilisateur de vérifier un éventuel message d erreur / de réussite. 2. Erreur possible lors du test Lors de l ouverture du document PDF généré suite au point précédent, il est possible que celui-ci soit en erreur et, que le message suivant apparaisse : Dans ce cas présent, il s agit surement d un manque de mémoire lié à Fop. Pour remédier à ce problème, il est indispensable de modifier le fichier «./serveurs/fop-0.93/fop.bat». Pour cela, ouvrir ce dernier avec un éditeur de texte standard, puis remplacez la dernière ligne du fichier : "%JAVACMD%" %LOGCHOICE% %LOGLEVEL% -cp "%LOCALCLASSPATH%" org.apache.fop.cli.main %FOP_CMD_LINE_ARGS% en : "%JAVACMD%" -Xmx256m %LOGCHOICE% %LOGLEVEL% -cp "%LOCALCLASSPATH%" org.apache.fop.cli.main %FOP_CMD_LINE_ARGS% A présent, supprimez le document PDF existant dans «./serveurs/apache2/htdocs/veremap.pro/print/test/result» puis lancez à nouveau le fichier «./serveurs/apache2/htdocs/veremap.pro/print/test/test_fop.bat». Documentation du modèle d impression Page 14 sur 26

15 Vérifiez la correcte ouverture du fichier PDF et si un problème persiste contacter le support de Veremes. 4. Modification d un modèle d impression 1. Mise en page générale Le document PDF généré est en fait mis en page à partir de plusieurs tableaux XSL:FO réalisés dans le «fichier XSL». Il est nécessaire en réalité de posséder 3 tableaux différents pour obtenir le résultat attendu. Un tableau pour l en-tête, un tableau pour le contenu du document et enfin un dernier pour le pied de page (qui est vide dans votre cas). Ces tableaux sont ensuite éclatés en plusieurs lignes et colonnes comme nous pouvons le constater grâce à la capture ci-dessous. La structure de ces tableaux est en fait créée comme ceci : <fo:block> Premier bloc de données (en-tête ou contenu ou pied de page ) <fo :table > propriété Tableau de tout ce qu il aura dans le block <fo:table-body> Corps du tableau : les données. <fo:table-row> Première ligne du tableau <fo:table-cell > Première cellule de la ligne <fo:block> Block de données de la cellule Documentation du modèle d impression Page 15 sur 26

16 <xsl:attribute > Attributs de la cellule </fo:table-row> </fo:table-body> </fo :table> Pour qu un tableau XLS:FO soit correctement formé, nous pouvons nous rendre compte qu il faut que chaque ligne ou cellule ait une balise ouvrante puis fermante (ex : <fo:table-row></fo:tablerow>). 2. Définition des trois parties principales Comme nous l avons vu dans le précédent point, le document PDF qui sera généré est en fait un assemblage de plusieurs tableaux XSL:FO. Ainsi pour modifier le contenu du document PDF, il est donc nécessaire de modifier soit la structure des différents tableaux (ajouter des lignes, des colonnes ), soit la valeur de leurs attributs (mettre la date plutôt que la source ). Cependant pour modifier l élément du document que l on souhaite (ex : modifier l aspect et les valeurs de l entête seulement), il est nécessaire de connaitre quelques détails importants. Le code suivant va définir le document PDF en déterminant la taille (Format A3 : 29.7 / 42cm) de celui-ci ainsi que certaine propriétés comme les marges. Ce morceau de code va permettre de fixer, via des balises prédéfinies du XSL (fo:region-body, fo:region-before, fo:region-after), l en-tête, du pied de page, du corps du document. <fo:layout-master-set> <fo:simple-page-master master-name="simple" page-height="29.7cm" page-width="42cm" margin-top="1cm" margin-bottom="2cm" marginleft="1cm" margin-right="1cm"> <fo:region-body region-name="content" margin="2cm 0cm 0cm 0cm" /> <fo:region-before region-name="header" extent="2in"></fo:region-before> <fo:region-after region-name="footer" extent="0in" display-align="before" precedence="true"></fo:region-after> </fo:simple-page-master> </fo:layout-master-set> Ainsi, chaque bloc bien distinct du code XSL:FO (le bloc de code de l en-tête par exemple) fera référence à une de ces trois partie. Voyons ceci dans un tableau explicatif : Fait référence à En-tête <fo:static-content flow-name="header"> <fo:region-before region-name="header" extent="2in"></fo:region-before> Contenu <fo:flow flow-name="content"> <fo:region-body region-name="content" margin="2cm 0cm 0cm 0cm"/> Pied de page <fo:static-content flow-name="footer"> <fo:region-after region-name="footer" extent="0in" display-align="before" precedence="true"></fo:region-after> 3. Comment définir un tableau Documentation du modèle d impression Page 16 sur 26

17 Pour une meilleure compréhension du contenu et du rendu du document PDF retourné, nous allons par la suite étudier en détail l une des trois partie de ce document : l en-tête. L en-tête du document est construit sous forme d un tableau XSL:FO. Ce dernier comporte une seule ligne mais plusieurs colonnes comme nous pouvons le constater lorsque les bordures de celui-ci sont apparentes. Voyons ensemble comment réaliser ce tableau entre couper de lignes et de colonnes. Le code XSL:FO qui permet de réaliser la structure du tableau est le suivant : <fo:static-content flow-name="header"> <fo:block> <fo:table table-layout="fixed" width="100%" border-collapse="collapse" font-size="28pt"> <fo:table-column column-width="34.5cm" /> <fo:table-column column-width="0.1cm" /> <fo:table-column column-width="6cm" /> <fo:table-body> <fo:table-row height="1.25cm"> <fo:table-cell padding-top="0cm" border-width="0pt"> <fo:table-cell height="1.25cm" > <fo:table-cell padding-top="0cm" border-width="0pt" > </fo:table-row> </fo:table-body> </fo:table> </fo:static-content> A la suite de cette syntaxe, il est possible de noter différentes choses. Tout d abord, comme expliqué dans un des points précédents ce tableau est encadré par un objet XSL:FO (<fo:static-content flow-name="header">) qui fait référence à l objet «en-tête» définit plus haut dans le «fichier XSL». Une fois cette référence effectué, la création du tableau lui-même est effectué. Il est initialisé avec plusieurs paramètres (width, border-collapse ). S ensuit l initialisation de propriété facultatives (propriétés développées plus bas dans le document). <fo:table-column column-width="34.5cm" /> <fo:table-column column-width="0.1cm" /> <fo:table-column column-width="6cm" /> Documentation du modèle d impression Page 17 sur 26

18 Une fois l initialisation de ce tableau effectué, son contenu peut enfin être ajouté. On insère ainsi un «body», puis une ligne (<fo:table-row height="1.25cm">) dans laquelle on intègrera des cellules (<fo:table-cell ). C est donc à cet endroit que les données devront êtres ajoutées. Comprenons donc le fait que si nous voulons ajouter une ligne à l en-tête du tableau, il suffit d ouvrir une nouvelle balise «table-row» après la fermeture de la précédente. Ex : <fo:table-row height="1.25cm"> Ligne 1 <fo:table-cell padding-top="0cm" border-width="0pt"> Colonne 1 / Ligne1 <fo:table-cell height="1.25cm" > Colonne 2 / Ligne1 <fo:table-cell padding-top="0.5cm" border-width="0pt" > Colonne 3 / Ligne1 </fo:table-row> <fo:table-row height="1.25cm"> Ligne 2 <fo:table-cell padding-top="0cm" border-width="0pt"> Colonne 1 / Ligne 2 <fo:table-cell height="1.25cm" > Colonne 2 / Ligne 2 <fo:table-cell padding-top="0.5cm" border-width="0pt" > Colonne 3 / Ligne 2 </fo:table-row> De la même manière, il est très facile d ajouter une nouvelle colonne à un tableau. Pour cela, il suffit de rajouter une nouvelle cellule à l emplacement souhaité dans la ligne,. Ex : Un tableau comprenant une ligne et trois colonnes (dont celle du milieu pouvant être ajouté à postériori). <fo:static-content flow-name="header"> <fo:block> <fo:table border="2pt solid black"> <fo:table-body> <fo:table-row height="1.25cm" border="2pt solid black"> <fo:table-cell> <fo:block> <fo:table-cell> <fo:block>colonne insérée Documentation du modèle d impression Page 18 sur 26

19 <fo:table-cell> <fo:block> </fo:table-row> </fo:table-body> </fo:table> </fo:static-content> Bien évidemment les propriétés du tableau tout comme celles des colonnes, lignes, ou cellule sont modifiables à n importe quel moment par l utilisateur. 4. Comment mettre en forme les données Une fois la structure du tableau réalisé, il y a donc la possibilité de le remplir. Pour cela il est obligatoire de mettre les données dans un bloc qui est lui-même matérialisé pas les balises (<fo:block>). Une fois ce block créé, il faut y ajouter des attributs. Dans ce cas, deux options se posent à nous. Soit les données sont de type texte soit elles sont de type images. La seule différence qu il existe entre les deux c est qu il est impératif d ajouter les balises <fo:external-graphic></fo:external-graphic> si la donnée est de type image. a. Modifier la valeur d une donnée Une fois le tableau mis en place, il reste à y intégrer les données. Pour cela, une syntaxe est à respecter. La syntaxe est la suivant : <xsl:value-of select="chemin de la donnée"/> Elle va permettre de lire les données du «fichier merge» qui sera lui-même généré dans le répertoire relatif à la propriété «$properties["map_dir"]» de veremap.pro. Ce fichier XML est un fichier composé de balises. L exemple ci-dessous illustre l explication caché qui se trouve derrière les termes «Balises». Exemple (en balise) Exemple de fichier XML <Balise1> <Balise2> <Balise3></Balise3> <Balise3></Balise3> <Balise3></Balise3> </Balise2> <Balise2> <Balise3></Balise3> <Balise3></Balise3> <Balise3></Balise3> </Balise2> <fopsource> <data> <FopTemplateA3Paysage titre="bois chardon" comment="documentation détaillée d un document XML"> <FopMap id="1" src=" " > </ FopTemplateA3Paysage> </data> <style> <couleur id="1" value="rgb(136, 187, 61)"/> <couleur id="2" value="rgb(255, 0, 0)"/> Documentation du modèle d impression Page 19 sur 26

20 </Balise1> <alignement id="1" value="left"/> <alignement id="2" value="center"/> <police id="1" value="helvetica "/> <police id="2" value="courier "/> </style> </fopsource > Ainsi, à travers cette petite comparaison, il est facile d ajouter ou de modifier une information et d y affecter un style particulier (un couleur, une police ). Ex : Modifier l en-tête du tableau pour que celui-ci fasse apparaitre le commentaire dans sa première cellule du tableau revient à faire : Avant : Après : Avant : <fo:static-content flow-name="header"> <fo:block> <fo:table table-layout="fixed" width="100%" border-collapse="collapse" font-size="28pt"> <fo:table-column column-width="34.5cm" /> <fo:table-column column-width="0.1cm" /> <fo:table-column column-width="6cm" /> <fo:table-body> <fo:table-row height="1.25cm"> <fo:table-cell padding-top="0cm" border-width="0pt"> <xsl:value-of select="fopsource/data/foptemplatea3paysageaev/@titre"/> </fo:table-row> </fo:table-body> </fo:table> </fo:static-content> Après : <fo:table-cell padding-top="0cm" border-width="0pt"> <xsl:value-of select="fopsource/data/foptemplatea3paysageaev/@comment"/> De la même manière nous pouvons changer l image qui se trouve dans la 3 ème cellule du tableau. Le procédé est le même, bien qu il faille ajouter les balises <fo:external-graphic></fo:externalgraphic>. <fo:table-cell> Documentation du modèle d impression Page 20 sur 26

21 <fo:block> <fo:external-graphic> <xsl:attribute name="src"> <xsl:value-of </fo:external-graphic> b. Modifier l apparence d une donnée Ajouter un commentaire dans la cellule d un tableau avec un style bien définit (couleur d écriture rouge, centré et en Helvetica), revient à développer le code suivant : <fo:table-cell> <fo:block> <!-- Définition des styles du commentaire --> <xsl:attribute name="text-align"> <xsl:value-of select="fopsource/style/alignement[@id='2']/@value"/> Valeur de la balise «alignement» d id n 2 (center) <xsl:attribute name="color"> <xsl:value-of select="fopsource/style/couleur[@id='2']/@value"/> Valeur de la balise «couleur» d id n 2 (rgb(255,0,0)) <xsl:attribute name="font-family"> <xsl:value-of select="fopsource/style/police[@id='1']/@value"/> Valeur de la balise «police» d id n 1 (Helvetica) <!-- Définition du commentaire --> <xsl:value-of select="fopsource/data/foptemplatea3paysage/@comment"/> Commentaire de la balise «FopTemplateA3Paysage» Utiliser des attributs nommés Pour faciliter la simplicité du développeur et ainsi lui permettre de réutiliser du code, on utilise des attributs que l on pourrait appeler «attribut nommé». Ces attributs sont utilisés car ils permettent notamment de : - Modifier rapidement des données qui auront le même rendu. - Modifier une seule fois des données qui auront le même rendu. - Avoir une meilleure lisibilité du document. Pour utiliser l ensemble de ces attributs il faut les implémenter la balise «<fo:block>» dans laquelle on y rajoutera un attribut nommé «xsl:use-attribute-sets». Ex : <fo:table-cell> <fo:block xsl:use-attribute-sets="header_block"> Attribut nommé «header_block» <xsl:value-of select="fopsource/data/foptemplatea3paysage/@titre"/> Sur l exemple ci-dessus, la cellule du tableau sera définie par le style de l attribut nommé «header_block». Cet attributs peut définir aussi bien le style d écriture (la police, la taille, la couleur ) que le style de la cellule en elle-même (la couleur de fond, l alignement de ce que contiendra la cellule ). Généralement et pour une meilleure lisibilité du document, on place ces «attributs nommés» tout en haut du document XSL. Cet attribut «header_block» est détaillé ci-dessous : Documentation du modèle d impression Page 21 sur 26

22 <!-- Définition des attributs pour le block header --> <xsl:attribute-set name="header_block" > <xsl:attribute name="font-family"> <xsl:value-of Valeur de la balise «police» d id n 4 (sauna) <xsl:attribute name="font-style"> <xsl:value-of select="fopsource/style/style_aev[@id='1']/@value"/> Valeur de la balise «style_aev» d id n 1 (normal) <xsl:attribute name="font-size"> <xsl:value-of select="fopsource/style/size_aev[@id='4']/@value"/> Valeur de la balise «size_aev» d id n 4 (20pt) <xsl:attribute name="color"> <xsl:value-of select="fopsource/style/couleur[@id='3']/@value"/> Valeur de la balise «couleur (d écriture)» d id n 3 (rgb(255, 255, 255)) <xsl:attribute name="border-color"> <xsl:value-of select="fopsource/style/couleur[@id='1']/@value"/> Valeur de la balise «couleur(de bordure)» d id n 1 (rgb(136, 187, 61)) <xsl:attribute name="border-width"> <xsl:value-of select="fopsource/style/epaisseur[@id='1']/@value"/> Valeur de la balise «epaisseur» d id n 1 (0pt) <xsl:attribute name="border-style"> <xsl:value-of select="fopsource/style/border[@id='1']/@value"/> Valeur de la balise «border» d id n 1 (hidden) <xsl:attribute name="background-color"> <xsl:value-of select="fopsource/style/couleur[@id='1']/@value"/> Valeur de la balise «couleur (de fond de la cellule)» d id n 1 (rgb(136, 187, 61)) <xsl:attribute name="vertical-align"> <xsl:value-of select="middle"/> Alignement vertical : centré <xsl:attribute name="font-weight"> <xsl:value-of select="fopsource/style/weight_aev[@id='1']/@value"/> Valeur de la balise «weight_aev» d id n 1 (bold) <xsl:attribute name="text-align"> <xsl:value-of select="fopsource/style/alignement[@id='2']/@value"/> Valeur de la balise «alignement» d id n 2 (center) </xsl:attribute-set> <!--Fin Définition des attributs pour le block header --> Utiliser des propriétés facultatives (propre à un élément) Les autres propriétés utilisées pour mettre en forme le document PDF, sont des propriétés facultatives. Elles sont notamment utilisées pour donner une taille aux colonnes des tableaux XSL. Revenons sur l exemple du tableau qui constitue l en-tête. <fo:static-content flow-name="header"> <fo:block> <fo:table table-layout="fixed" width="100%" border-collapse="collapse" font-size="28pt" > <fo:table-column column-width="34.5cm" /> <fo:table-column column-width="0.1cm" /> <fo:table-column column-width="6cm" /> <fo:table-body> </fo:table-body> </fo:table> </fo:static-content> Documentation du modèle d impression Page 22 sur 26

23 L objet «fo :table-column» contient un nombre important de propriétés. La propriété «column-width» est la propriété la plus utilisée pour cet objet. Elle va permettre de paramétrer en une seule fois la taille de l ensemble des colonnes du tableau. <fo:table-column column-width="34.5cm" /> Colonne 1 : 34.5 cm <fo:table-column column-width="0.1cm" /> Colonne 2 : 0.1 cm <fo:table-column column-width="6cm" /> Colonne 3 : 6 cm 5. Exemple de document comprenant du style Pour illustrer l ensemble des explications ci-dessus, voyons le code XSL:FO qui permettra d obtenir l ensemble de l en-tête suivant : <!-- Début de l'en-tête qui se retrouvera sur chaque page --> <fo:static-content flow-name="header"> Propriété qui définit le l en-tête <fo:block> <fo:table table-layout="fixed" width="100%" border-collapse="collapse" font-size="7pt"> <fo:table-column column-width="34.5cm" /> Propriété facultatives <fo:table-column column-width="0.1cm" /> Propriété facultatives <fo:table-column column-width="6cm" /> Propriété facultatives <fo:table-body> <fo:table-row height="1.25cm"> Ligne 1 du tableau <fo:table-cell padding-top="0cm" border-width="0pt"> Ligne 1 Colonne 1 <fo:block xsl:use-attribute-sets="header_block" line-height="2cm" > Propriété nommé «header_block» <xsl:value-of select="fopsource/data/foptemplatea3paysageaev/@titre"/> «Bois Chardon» <fo:table-cell height="1.25cm" > Ligne 1 Colonne 2 <fo:block> <fo:table-cell padding-top="0cm" border-width="0pt" > Ligne 1 Colonne 3 <fo:block-container position="absolute" top="-5pt" left="0pt" text-align="left"> <fo:block line-height="1.25cm" text-align="left" > <xsl:attribute name="text-align"> <xsl:value-of select="fopsource/style/alignement[@id='2']/@value"/> Propriété de style : l alignement <xsl:attribute name="background-color"> <xsl:value-of select="fopsource/style/couleur[@id='3']/@value"/> Propriété de style : couleur de fond de la cellule <fo:external-graphic> <xsl:attribute name="src"> <xsl:value-of select="fopsource/style/image[@id='3']/@src"/> Insertion de l image <xsl:attribute name="text-align"> <xsl:value-of select="fopsource/style/alignement[@id='1']/@value"/> Propriété de style : alignement <xsl:attribute name="content-width" > Documentation du modèle d impression Page 23 sur 26

24 <xsl:apply-templates Propriété de style : largeur de l image <xsl:attribute name="content-height" > <xsl:apply-templates select="fopsource/style/image[@id='3']/@height"/> Propriété de style : hauteur de l image <xsl:attribute name="vertical-align"> <xsl:value-of select="baseline"/> </fo:external-graphic> </fo:block-container> </fo:table-row> </fo:table-body> </fo:table> </fo:static-content> <!-- Fin de l'en-tête --> A travers ce morceau de code, il est notable que l en-tête du document qui sera généré est à la fois composé de propriétés facultatives (dimension de la taille des colonnes), de propriétés nommées et des propriétés de style telles que la taille, la police De plus, il est important de se rappeler que pour ajouter une image, il est obligatoire de rajouter la balise «fo:external-graphic» dans l attribut <block> de la cellule. De plus, pour matérialiser l en-tête du document, il ne faut pas oublier de définir à partir des balises <fo:static-content flow-name="header"> dans quelle partie on se trouve. 5. Création d un nouveau modèle d impression Pour définir un nouveau modèle d impression, plusieurs étapes importantes sont nécessaires : - Tout d abord, créer un fichier modèle : Exemple : créer un fichier modèle FopTemplateA3PaysageForestier.xsl dans $properties["veremap_root"]/print/template. - Ensuite, créer un fichier de classe : le fichier de classe doit avoir exactement le même que le fichier modèle. Exemple : créer un fichier de classe FopTemplateA3PaysageForestier.class.inc dans $properties["veremap_root"]/print/template. - Enfin, paramétrer le tout dans l application Veremap.admin. Pour paramétrer l application à partir de veremap.admin, allez dans le menu «Impression modèle d impression» et ajoutez un nouveau modèle. Vous allez arriver sur une fenêtre telle que celle-ci-dessous dans laquelle vous allez pouvoir entrer le nom de votre modèle d impression, y donner une description et y affecter une classe. Le nom de la classe que vous allez entrer dans cette fenêtre doit impérativement être la même que celle que vous avez créé précédemment (ex : FopTemplateA3PaysageForestier.class.inc). Documentation du modèle d impression Page 24 sur 26

25 Dans les captures suivantes, vous constaterez à quel endroit, dans la fenêtre des impressions de Veremap.pro, se trouve le nom ainsi que la description. Le fichier de classe n est lui pas apparent dans la fenêtre de Veremap.pro mais il reste néanmoins très important Une fois l ensemble de ces étapes effectuées, testez le tout à partir de votre application Veremap.pro. Documentation du modèle d impression Page 25 sur 26

26 6. Installation d un nouveau modèle d impression L installation d un nouveau modèle d impression se découpe en plusieurs points différents : - La copie des fichiers : o Copier le «fichier de classe» dans /veremap.pro/print/templates/foptemplatea3paysageaevforestier.class.inc o Copier le «fichier XSL» dans /veremap.pro/print/templates/foptemplatea3paysageaevforestier.xsl o Copier le «fichier de style» dans /veremap.pro/print/style/aev.xml - Le paramétrage dans veremap.admin. Pour paramétrer l application à partir de veremap.admin, allez dans le menu «Impression modèle d impression» et ajoutez un nouveau modèle. Vous allez arriver sur une fenêtre (voir cidessus) dans laquelle vous allez pouvoir entrer le nom du votre modèle d impression (ex : FopTemplateA3PaysageAEVForestier), y donner une description et y affecter le nom de la classe que vous venez de copié dans «/veremap.pro/print/templates/». Le nom de la classe est (ex : FopTemplateA3PaysageAEVForestier.class.inc). Documentation du modèle d impression Page 26 sur 26