26
CIS 375—Web App Dev II XSLFO

CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

Embed Size (px)

Citation preview

Page 1: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

CIS 375—Web App Dev II

XSLFO

Page 2: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

2

XSLFO Introduction XSLFO stands for Extensible Stylesheet

Language ___________________. XSLFO is an _____-based markup language. XSLFO is a W3C Recommendation and is now

formally named _____. “XSL” consists of three parts:

XSLT (a language for transforming XML documents) XSL (a vocabulary for formatting XML documents) XPath (a language for defining parts of an XML

document) This may sound a little confusing, but

sometimes life IS a little confusing.

Page 3: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

3

XSLFO Documents XSLFO documents are stored in files with a *.fo

or a *.____ extension. They can also have the *.____ extension, because

this makes them more accessible to XML editors. XSLFO documents start with an XML ___________:

<?xml version="1.0" encoding="ISO-8859-1"?> The <fo:root> element contains the XSLFO

document and declares a namespace. To make XML elements unique, “fo” is given an XML

namespace, such as http://www.w3.org/1999/XSL/Format.

<fo:root xmlns:fo=http://www.w3.org/1999/XSL/Format> <!-- The full XSL-FO document goes here -->

</fo:root>

Page 4: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

4

XSLFO Document Structure

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set> <fo:simple-page-master master-name=“MyPage">

<!-- Page template goes here --> </fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-name="MyPage"> <!-- Page content goes here -->

</fo:page-sequence>

</fo:root>

Page 5: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

5

XSLFO Areas The XSL formatting model defines a number of

___________ areas to display output. One such area is called a _______. Each XSL-FO Page contains a number of _______:

region-body, region-before (header), region-after (footer), region-start (left sidebar), and region-end.

XSLFO Regions contain _______ areas. XSLFO Block areas most often contain _____ areas. XSLFO Line areas contain _______ areas. XSLFO Inline areas define _____ inside Lines

(bullets, single character, graphics, and more).

Page 6: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

6

Simple XSLFO Document "Blocks" of content “______" into "Pages" and

then to the output media.<?xml version="1.0" encoding="iso-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master master-name="my-page"> <fo:region-body margin="1in"/> </fo:simple-page-master> </fo:layout-master-set>

<fo:page-sequence master-reference="my-page"> <fo:flow flow-name="xsl-region-body"> <fo:block>Hello, world!</fo:block> </fo:flow> </fo:page-sequence></fo:root>

Page 7: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

7

hello.fo in an XSL Formatter(see http://www.antennahouse.com/)

Page 8: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

8

XSLFO Flow XSLT-FO pages are filled with ________ from the

<fo:flow> element. The <fo:flow> element contains all the

elements to be printed to the page. When the page is full, the same page _______

will be used until all the text is printed. The <fo:flow> element has a "flow-name"

_______. xsl-region-body (into the region-body) xsl-region-before (into the region-before) xsl-region-after (into the region-after) xsl-region-start (into the region-start) xsl-region-end (into the region-end)

Page 9: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

9

XSLFO Pages XSLFO uses page templates called "Page

________" to define the layout of  pages. The following illustrates page masters for odd

and even page numbers:

<fo:simple-page-master master-name="left">

<fo:region-body margin-left="2in" margin-right="3in" />

</fo:simple-page-master>

<fo:simple-page-master master-name="right">

<fo:region-body margin-left="3in" margin-right="2in" />

</fo:simple-page-master>

Page 10: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

10

Example Page Master<?xml version="1.0" encoding="iso-8859-1"?><fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master master-name="A4" page-width= "297mm" page-height= "210mm" margin-top= "1cm" margin-bottom="1cm" margin-left="1cm" margin-right= "1cm"> <fo:region-body margin="3cm"/> <fo:region-before extent="2cm"/> <fo:region-after extent="2cm"/> <fo:region-start extent="2cm"/> <fo:region-end extent="2cm"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="A4"> <fo:flow flow-name="xsl-region-body"> <fo:block>Example Page Master</fo:block> </fo:flow> </fo:page-sequence></fo:root>

Page 11: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

11

Page 12: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

12

XSLFO Blocks XSL-FO output is normally nested inside

<fo:block> elements,  nested inside <fo:flow> elements, nested inside <fo:page-sequence> elements.<fo:page-sequence>

<fo:flow>

<fo:block>

<!-- Output goes here -->

</fo:block>

</fo:flow>

</fo:page-sequence>

Blocks can have many formatting attributes such as, margin, border-width, border-color, padding, background-color, font-family, etc.

Page 13: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

13

Example of XSLFO Blocks This code would be placed within the ______

element:<fo:block

font-size="14pt" font-family="verdana" color="red"

space-before="5mm" space-after="5mm“ padding="2mm">

W3Schools

</fo:block>

<fo:block

text-indent="5mm"

font-family="verdana" font-size="12pt"

space-before="5mm" space-after="5mm">

At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

</fo:block>

Page 14: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

14

Example from Previous Slide

Page 15: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

15

XSLFO List Blocks The following code creates a bulleted list:<fo:list-block provisional-distance-between-starts="10pt" >

<fo:list-item><fo:list-item-label>

<fo:block>&#x2022;</fo:block></fo:list-item-label><fo:list-item-body start-indent="body-start()">

<fo:block>Volvo</fo:block></fo:list-item-body>

</fo:list-item><fo:list-item>

<fo:list-item-label><fo:block>&#x2022;</fo:block>

</fo:list-item-label><fo:list-item-body start-indent="body-start()">

<fo:block>Saab</fo:block></fo:list-item-body>

</fo:list-item></fo:list-block>

Page 16: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

16

Example from previous slide:

Page 17: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

17

XSLFO Tables The hierarchy of XSLFO table elements (each

element contains the listed sub-elements).<fo:table-and-caption>

<fo:table>

<fo:table-column> (optional)

<fo:table-header> (optional)

<fo:table-cell>

<fo:block>

<fo:table-body>

<fo:table-row>

<fo:table-cell>

<fo:block>

Page 18: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

18

XSLFO Table Example<fo:table-and-caption><fo:table>

<fo:table-column column-width ="25mm"/>

<fo:table-column column-width ="25mm"/>

<fo:table-header> <fo:table-cell> <fo:block font-weight = "bold“>

Car</fo:block> </fo:table-cell> <fo:table-cell> <fo:block font-weight="bold">

Price</fo:block> </fo:table-cell> </fo:table-header>

<fo:table-body> <fo:table-row>

<fo:table-cell><fo:block>Volvo</fo:block>

</fo:table-cell> <fo:table-cell>

<fo:block>$50000</fo:block></fo:table-cell>

</fo:table-row> <fo:table-row>

<fo:table-cell><fo:block>SAAB</fo:block>

</fo:table-cell><fo:table-cell>

<fo:block>$48000</fo:block></fo:table-cell>

</fo:table-row> </fo:table-body>

</fo:table> </fo:table-and-caption>

Page 19: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

19

Output from Table Example

Page 20: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

20

Generate XSLFO from XML (1)

XML document:<?xml version="1.0" encoding="ISO-8859-1" ?>

<info>

<header>W3Schools</header>

<paragraph>At W3Schools you will find all the Web-buildingtutorials you need, from basic HTML and XHTML toadvanced XML, XSL, Multimedia and WAP.</paragraph>

</info>

Page 21: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

21

Generate XSLFO from XML (2)

XSL document:<?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:output method="xml" version

="1.0" /><xsl:template match="info"><fo:root

xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set> <fo:simple-page-master

master-name="simple" page-width="150mm"

page-height="200mm"> <fo:region-body margin="3cm"/> </fo:simple-page-master> </fo:layout-master-set>

<fo:page-sequence master-reference="simple">

<fo:flow flow-name="xsl-region-body"><fo:block font-size="14pt" font-family

="verdana" color="red" space-before="5mm" space-

after="5mm"> <xsl:apply-templates select

="header" /></fo:block><fo:block

font-size="10pt" font-family ="verdana"

space-before="5mm" space-after ="5mm">

<xsl:apply-templates select ="paragraph" /></fo:block>

</fo:flow> </fo:page-sequence></fo:root></xsl:template></xsl:stylesheet>

Page 22: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

22

XSLFO from XML Output

Page 23: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

23

PDF Output

Page 24: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

XSLFO Table w/ XSLT (cd_xslfo.xsl)

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:output method="xml" version ="1.0" />

<xsl:template match="/">

<fo:root xmlns:fo= "http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set> <fo:simple-page-master master-name="my-page"

page-width="150mm" page-height="200mm">

<fo:region-body margin="1in"/> </fo:simple-page-master> </fo:layout-master-set>

<fo:page-sequence master-reference="my-page"> <fo:flow flow-name="xsl-region-body"> <fo:table-and-caption> <fo:table>

<fo:table-column column-width ="2in"/>

<fo:table-body>

<xsl:for-each select="CATALOG/CD"> <fo:table-row> <fo:table-cell>

<fo:block font-size="10pt" font-

family ="verdana" color="red" space-before="5mm"

space-after="5mm">

<xsl:value-of select="TITLE"/>

</fo:block> </fo:table-cell> </fo:table-row> </xsl:for-each> </fo:table-body>

</fo:table> </fo:table-and-caption>

</fo:flow> </fo:page-sequence>

</fo:root></xsl:template></xsl:stylesheet>

Page 25: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

25

Output from cd_xslfo.xsl

Page 26: CIS 375—Web App Dev II XSLFO. 2 XSLFO IntroductionIntroduction XSLFO stands for Extensible Stylesheet Language ___________________. XSLFO is an _____-based

26

XSLFO Software Special software is required to format XSL

documents. This software can produce output as _____. http://www.antennahouse.com/xslformatter.ht

ml

http://www.lunasil.com/ http://www.scriptura-xsl.com/index.html