Java Apache XML (JAX) Lektion 10: XML III. Tree Transformation & Formatting. 2 Schritte von einer XML Datei zu gestaltetem Output:

Transkript

1 Was sind FO? 4Formatting Objects sind ein Bestandteil von XSL. Jeder Tag, der mit <fo: beginnt, ist ein Formatting Object Tag. 4Formatting Objects bezeichnen Formateigenschaften von Dokumentteilen (Seiten, Abschnitte, etc.) und Dokumentinhalten (Schrift, Grafiken, Schriftstrukturen wie Tabellen, Listen etc.). 4 Spezifische Format-Semantik 10-1 Tree Transformation & Formatting 2 Schritte von einer XML Datei zu gestaltetem Output: 1. Tree Transformation Aufbau eines Result Tree aus XML und XSL Source. Result Tree enthält Formatanweisungen (FO, HTML,...) 2. Formatting Interpretation des transformierten Baumes und Senden von Anweisungen an ein Ausgabemedium (Browser, Printer, etc.) Formatting Objects sind bestimmte Tags aus dem XSL Namespace, die das Format von Inhalten in einem transformierten Baum (Result Tree, 1) ausdrücken

2 <XML> (SOURCE TREE) <XSL> (Style Information) Parser 1: Transformer Aus XML/XSL wird RESULT TREE (Formatangaben: FO, HTML, etc.) Parser 2: Formatter Output (Browser, Printer, PDF/PS File, etc.) 10-3 Transformation nach HTML XML: DATEN <baum> <art>buche</art> </baum> XSL: DATENDARSTELLUNG <h1>baumarten</h1> <font style= color:blue > <xsl:value-of-select= baum/art /> </font> Resultat in HTML: <h1>baumarten</h1> <font style= color:blue > Buche </font> Resultat im Browser: Baumarten Buche

3 Transformation nach FO XML: DATEN <baum> <art>buche</art> </baum> XSL: DATENDARSTELLUNG (dieses Mal in FO) <fo:block font-size= 18pt >Baumarten <fo:block font-color= blue > <xsl:value-of-select= baum/art /> Resultat in FO: <fo:block font-size= 18pt > Baumarten <fo:block font-color= blue > Buche Resultat nach Formatting: Baumarten Buche 10-5 Struktur innerhalb von <fo:root> <fo:root> = Wurzelelement jeder FO-Datei <fo:root> Beschreibung von Vorlagen Innerhalb <layout-master-set> (Vorlagen) Beschreibung der konkreten Dokument-Inhalte (Daten) </fo:root>

4 FO: Links, Rechts? Dokument aufgeteilt in 5 Regionen: 4 Body (~Hauptinhalt) 4 Start, End (~Seitenkolonnen, z.b. für Randbemerkungen) 4 Before, After (~Kopf- und Fusszeile) Richtungsangaben = Schriftrichtung-Sensitiv 4L R: Start = links, End = rechts 4 R L: Start= rechts, End = links 4 Idem Oben Unten [Before,After] left margin before start top margin before end body body after end after start bottom margin right margin 10-7 Sprache FO <fo:root> Wurzelelement jeder FO-Datei <fo:layout-master-set> Beinhaltet sämtliche Masters (~Vorlagen) einer FO- Datei <fo:simple-page-master> Beschreibt gewisse globale Eigenschaften einer Seite oder einer ihrer 5 Teile, Kindobjekt von <fo:layout-master-set> <fo:page-sequence> Beschreibt eine konkrete Seite, deren Format durch den referenzierten page-master z.t. vorgegeben wird

5 Sprache FO <fo:flow> Ein Flow-Objekt ist direkt einer der 5 Dokumentregionen (body,before,after,start,end) zugeordnet. Es beinhaltet die Flow Objekte eines Dokumentes Text, Bilder, etc. <fo:block> Beinhaltet andere Blocks oder Lines oder direkt Inhalt. block-progression-direction top bottom bottom top <fo:inline> Beinhaltet direkt Inhalt, ~ eine Zeile innerhalb eines Blocks inline-progression-direction left right right left 10-9 FO insgesamt 56 Formatting Objects für Master-Vorlagen, konkrete Seiten, Blöcke, Buchstaben, Tabellen, Listen, Fuss- und Kopfnoten, eingebundene Grafiken, Links etc. 246 Properties um die Formatting Objects zu spezialisieren: Schrift- und Hintergrundfarben, Schriftfamilie, Schriftgrösse, Ausrichtung, Abstände, Rahmen etc

6 Anwendungsbeispiel FOP Mission von XML.APACHE.ORG = XML-Projekt der Apache Gruppe. 4«robust, full-featured, commercial-quality, and freely available XML support on a wide variety of platforms» FOP (Formatting Objects Processor) = Formatter 4XML Source + XSL Result Tree durch Transformer 4 Result Tree Output durch Formatter [FOP] FOP generiert aus FO- und XML+XSL-Dateien: 4pdf, ps,... Binäre Formate 4txt, xml, svg,... ASCII Formate Anwendungsbeispiel FOP Details FOP implementiert 39 der 56 Formatting Objects sowie 110 von 246 Formatting Properties. FOP transformiert FO resp. XML+XSL Dateien nach PDF (Portable Document Format) PCL (Hewlett-Packard PCL Printers) PostScript Txt (Text only) SVG (Scalable Vector Graphics) AT (Area Tree in XML) Print (Direkte Ausgabe an einen Drucker) MIF (Maker Interchange Format, für Adobe Framemaker) AWT (Abstract Windowing Toolkit, viewer only)

7 FO Beispiel Tabelle I <?xml version="1.0" encoding="utf-8"?> <fo:root xmlns:fo=" file: table.fo <fo:layout-master-set> <fo:simple-page-master master-name="simple" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="2cm" margin-left="2cm" margin-right="2cm"> <fo:region-body margin-top="1cm"/> <fo:region-before extent="0.5cm"/> <fo:region-after extent="1cm"/> </fo:simple-page-master> </fo:layout-master-set> <fo:block font-size="18pt" font-family="sans-serif" line-height="24pt" space-after.optimum="15pt" background-color="red" color="white" text-align="center" padding-top="5pt"> Creating a simple XSL-FO Table FO Beispiel Tabelle II <fo:block font-size="16pt" font-family="sans-serif" space-after.optimum="15pt" text-align="left"> An XSL-FO table with a header plus 4 columns and 3 rows <fo:block text-align="start"> In this document we will use the <fo:table> element to create a simple XSL-FO table. Notice, if we look at the code for this page, that we have had to "escape" the characters for the left and right angled brackets of the <fo:table> element so as to avoid errors during the parsing of the text of the document

8 FO Beispiel Tabelle III <fo:table margin="0.5cm"> <fo:table-column column-width="40mm"/> <fo:table-column column-width="40mm"/> <fo:table-column column-width="50mm"/> <fo:table-column column-width="40mm"/> <fo:table-body> <fo:table-row font-size="14pt" font-weight="bold"> <fo:table-cell > <fo:block>technology </fo:table-cell> <fo:table-cell > <fo:block>abbreviation </fo:table-cell> <fo:table-cell > <fo:block>status </fo:table-cell> <fo:table-cell > <fo:block>date </fo:table-cell> </fo:table-row> </fo:table-body> </fo:table> </fo:flow> </fo:page-sequence> </fo:root> XSL-FO Browser

9 Alles <fo:? <?xml version="1.0"?> <Legi> <Nachname>Stanger</Nachname> <Vorname>Gregor</Vorname> <AnzSem>9</AnzSem> <Dept>Physik</Dept> <Matr.Nr.> </Matr.Nr.> <Photo image="gregor.stanger" /> </Legi> <?xml version="1.0" encoding="utf-8"?> <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master margin-right="0.75in" margin-left="0.75in" margin-bottom="0.3in" margin-top="0.1in" page-width="8.5in" page-height="6.0in" master-name="all"> <fo:region-body margin-bottom="0.10in" margin-top="0.10in"/> <fo:region-before extent="0.05in"/> <fo:region-after extent="0.2in"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence format="i" master-name="all"> <fo:flow flow-name="xsl-region-body"> <fo:table> <fo:table-column column-width="50mm"/> XML FO I file: legi_pdf.xsl <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl=" xmlns:fo=" version="1.0"> <xsl:template match="legi"> <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name="all" page-height="6.0in" page-width="8.5in" margin-top="0.1in" margin-bottom="0.3in" margin-left="0.75in" margin-right="0.75in"> <fo:region-body margin-top="0.10in" marginbottom="0.10in"/> <fo:region-before extent="0.05in"/> <fo:region-after extent="0.2in"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-name="all" format="i"> <fo:flow flow-name="xsl-region-body"> file: anna.ferraioli.xml <?xml version="1.0"?> <Legi> <Nachname>Ferraioli</Nachname> <Vorname>Anna</Vorname> <AnzSem>1</AnzSem> <Dept>Math</Dept> <Matr.Nr.> </Matr.Nr.> <Photo image="anna.ferraioli" /> </Legi>

10 XML FO II <fo:table> </fo:table> file: legi_pdf.xsl <fo:table-column column-width="50mm"/> <fo:table-column column-width="5mm"/> <fo:table-column column-width="60mm"/> <fo:table-column column-width="50mm"/> <fo:table-column column-width="25mm"/> <fo:table-body> <fo:table-row><fo:table-cell ></fo:table-cell> <fo:table-cell > <fo:block> <fo:external-graphic src="file:img/unibas.jpg" /> </fo:table-cell> </fo:table-row><fo:table-row> <fo:table-cell ><xsl:apply-templates select="photo"/></fo:table-cell> <fo:table-cell ></fo:table-cell> <fo:table-cell > <xsl:apply-templates select="nachname"/> <xsl:apply-templates select="vorname"/> </fo:table-cell> </fo:table-row<fo:table-row> <fo:table-cell ><fo:block> <fo:external-graphic src="file:img/legi2.gif" /> </fo:table-cell> <fo:table-cell ></fo:table-cell> </fo:table-row> </fo:table-body> XML FO III file: legi_pdf.xsl </fo:flow> </fo:page-sequence> </fo:root> </xsl:template> <xsl:template match="nachname"> <fo:block color="blue" space-before.optimum="20pt"> Name: <xsl:value-of select="."/> </xsl:template> <xsl:template match="vorname"> <fo:block color="blue" space-before.optimum="3pt"> Vorname: <xsl:value-of select="."/> </fo:block > </xsl:template> <?xml version="1.0"?> <Legi> <Nachname>Ferraioli</Nachname> <Vorname>Anna</Vorname> <AnzSem>1</AnzSem> <Dept>Math</Dept> <Matr.Nr.> </Matr.Nr.> <Photo image="anna.ferraioli" /> </Legi> <xsl:template match="photo"> <fo:block > <fo:external-graphic /><xsl:value-of select="."/> </xsl:template> </xsl:stylesheet>

11 Darstellung von XML XSLT <?xml version="1.0"?> <Legi> <Nachname>Ferraioli</Nachname> <Vorname>Anna</Vorname> <AnzSem>1</AnzSem> <Dept>Math</Dept> <Matr.Nr.> </Matr.Nr.> <Photo image="anna.ferraioli" /> </Legi> XSLT FOP START JAVA -cp PFAD org.apache.xalan.xslt.process -IN in.xml -XSL htmlstyle.xsl -OUT out.html JAVA -cp PFAD org.apache.xalan.xslt.process -IN in.xml -XSL pdfstyle.xsl -OUT out.fo JAVA -cp PFAD org.apache.fop.apps.fop -fo out.fo -pdf out.pdf PFAD = " batik.jar; xalan.jar; xerces.jar; fop.jar"

12 Scalable Vector Graphics (SVG) Line file:simpleline.svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <svg width="500" height="200"> <line x1="10" y1="10" x2="490" y2="190" style="stroke:#000000; stroke-width:5;"/> </svg>

13 Box file: simplesvgdoc.svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <svg width="500" height="400"> <rect x="100" y="100" width="300" height="200" style="stroke:#000000; fill:#ff0000; stroke-width:3;"/> </svg> Chart file: HorizBarv4.svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG //EN" " <svg width="500" height="500"> <title>horizontal Bar Chart - SVGenius.com sales by Quarter 2001</title> <text x="100" y="50" class="header">svgenius.com - Quarterly Sales 2001</text> <text x="70" y="160" class="label">q1</text> <text x="150" y="420" class="label">20</text> <rect id="background" x="100" y="100" width="300" height="300" style="fill:#cccccc"/> <g id="leftline"> <line x1="100" y1="100" x2="100" y2="400" style="stroke:black;"/> <g id="bottomline"> <line x1="100" y1="400" x2="400" y2="400" style="stroke:black;"/>

14 Chart <g id="quarters1to4"> <rect x="100" y="150" width="120" height="10" class="bar"/> <rect id="q2sales" x="100" y="210" width="180" height="10" style="display:none;" class="bar"> <animate begin="q2button.click" dur="1s" attributename="display" from="none" to="block" fill="freeze"/> </rect> <g id="controls"> <a id="q2button"> <ellipse cx="160" cy="450" rx="40" ry="15" class="button"/> <text x="150" y="455" style="font-size:14; fill:black; stroke:black;">q2</text> </a> </svg> Chart <?xml version='1.0'?> <?xml-stylesheet href="verticalbarvxslt.xsl" type="text/xsl"?> <MonthlySales > <Year>2001</Year> <MaxValue>100</MaxValue> <Month name="january">10</month> <Month name="march">30</month> <Month name="november">90</month> <Month name="december">100</month> </MonthlySales>

15 Chart <?xml version="1.0" encoding="utf-8"?> <svg width="600" height="500"> <text x="150" y="50" style="font-size:18; fontweight:normal; stroke:red; fill:red;"> SVGenius.com - Monthly Sales 2001</text> <rect x="100" y="90" width="400" height="310" style="fill:#cccccc;"/> <line x1="100" y1="90" x2="100" y2="400" style="stroke:#000099; stroke-width:0.1"/> <g style="fill:#000000; font-size:12; font-family:arial"> <text x="75" y="400">0</text> <line x1="100" y1="400" x2="500" y2="400" style="stroke:#000000; stroke-width:0.2"/> <g style="fill:#000000; font-size:12; font-family:arial"> <text x="75" y="370">10</text> SVG aus Excel file: jaxchart.svg

16 Uhr I file: clock.svg <?xml version="1.0" encoding="iso "?> <!DOCTYPE svg SYSTEM "svg stylable.dtd" > <svg onload="settime(evt)"> <defs> <script language="javascript"> <![CDATA[ function SetTime(LoadEvent) { var Now = new Date(); var Seconds = Now.getSeconds(); var Minutes = Now.getMinutes() + Seconds / 60; var Hours = Now.getHours() + Minutes / 60; var SVGDocument = LoadEvent.getTarget().getOwnerDocument(); SVGDocument.getElementById("seconds").setAttribute('transform', 'rotate(' + (Seconds * 6) + ')'); SVGDocument.getElementById("minutes").setAttribute('transform', 'rotate(' + (Minutes * 6) + ')'); SVGDocument.getElementById("hours").setAttribute('transform', 'rotate(' + (Hours * 30) + ')'); }]]> </script> </defs> Uhr II <circle cx="100" cy="100" r="80" style="fill:white;stroke:black"/> <text x="130" y="46" style="font-size:15">1</text> <text x="154" y="71" style="font-size:15">2</text> <text x="58" y="46" style="font-size:15">11</text> <text x="92" y="37" style="font-size:15">12</text> <g transform="translate( )"> <g id="hours"> <line x1="0" y1="0" x2="0" y2="-35" style="stroke-width:4;stroke:black"> <animatetransform attributename="transform" type="rotate" dur="43200s" values="0;360" repeatcount="indefinite"/> </line> <g id="minutes"> <line x1="0" y1="0" x2="0" y2="-55" style="stroke-width:2;stroke:black"> <animatetransform attributename="transform" type="rotate" dur="3600s" values="0;360" repeatcount="indefinite"/> </line> <g id="seconds"> <line x1="0" y1="0" x2="0" y2="-75" style="stroke-width:1;stroke:red"> <animatetransform attributename="transform" type="rotate" dur="60s" values="0;360" repeatcount="indefinite"/> </line> <circle cx="100" cy="100" r="3" style="fill:black;stroke:black"/> </svg>

17 CML 2 SVG