xml and modern techniques of content management – 2010/11czarnik/zajecia/xml10/06-en... · 2010....

Presentation of XML Documents

Patryk Czarnik

Institute of Informatics University of Warsaw

XML and Modern Techniques of Content Management – 2010/11

StylesheetsSeparating content and presentationAssociating style with document

CSSIdea and applicationsCSS sheet structureFormatting

XSLPresentation by transformationXSLT — IntroductionXSL-FO

Separating content and presentationI According to XML best practices documents contain:

I content/dataI markup for structure and meaning (semantical markup)I no formatting

I How to present?I “hard-coded” interpretation of known document typesI external style sheets

Stylesheets idea

<person position="starszy referent"> <name>Dawid</name> <surname>Paszkiewicz</surname> <phone type="office">+48223213203</telefon> <phone type="mobile">+48501502503</telefon> <email>paszkiewicz@superfirma.pll</email></pracownik>

* yellow backgorund* blue font and border* italic font for name* typewritter font for email

* font 'Times 10pt'* 12pt for name* abbreviation before phone number

<person position="starszy referent"> <name>Arkadiusz</name> <surname>Gierasimczyk</surname> <phone type="office">+48223213213</phone> <phone type="mobile">+48501502503</phone> <email>gieras@superfirma.pll</email></pracownik>

Advantages of separating content and formattingI General advantages of semantical markup

I better content understanding and easier analysisI Ability to show again

I the same document after modificationI another document of the same structure

I Formatting managed in one placeI easy to change look of whole class of documents

I Ability to define many stylesheets for a document, depending on:

I purposeI medium (screen, paper, voice)I detail level (full report, summary)I reader preferences (font size, colors, . . . )

Standards related to XML presentationI General:

I Associating Style Sheets with XML documentsI Stylesheet languages:

I DSSSL (deprecated, applied to SGML)Document Style Semantics and Specification Language

I CSSCascading Style Sheets

I XSLExtensible Stylesheet Language

Associating Style Sheets with XML documentsI W3C RecommendationI Processing instruction xml-stylesheet

One stylesheet

<?xml-stylesheet type="text/xsl" href="default.xsl"?>

Alternative stylesheets

<?xml-stylesheet title="Blue"type="text/css" href="blue.css" ?>

<?xml-stylesheet title="Yellow" alternate="yes"type="text/css" href="yellow.css" ?>

<?xml-stylesheet title="Big fonts" alternate="yes"type="text/css" href="big.css" ?>

Cascading Style SheetsI Style sheets idea beginnings: 1970s

I motivation — different printer languages and properties

I CSS beginnings: 1994I CSS Level 1 Recommendation: December 1996I CSS Level 2 Recommendation: May 1998

I implemented (more or less completly) in present-day internetbrowsers

I CSS Level 3 — work still in progress:I modularisation,I new features.

I CSS 2.1 — Candidate Recommendation:I CSS 2 corrected and made less ambiguousI also, a bit less ambitious (unsupported features thrown out)

CSS applicationsI First and main application: style for WWW sitesI Separation of content and formatting for HTMLI Simple stylesheets for XML

Ideologically important

! especially from Level 2

! according to web accessibility

I support for alternative presentation methods(e.g. voice)

I enabling reader to provide her/his own style(e.g. larger font and contrast colors for people with eyesightdisability)

Example XML

<department id="D07"><name>Accountancy</name>

<person position="accountant" id="102103"><name>Dawid</name><surname>Paszkiewicz</surname><phone type="office">+48223213203</phone><phone type="mobile">+48501502503</phone><email>paszkiewicz@superfirma.pll</email>

</person>

< person position="manager" id="102104"><name>Monika</name><surname>Domzałowicz</surname><phone type="office">+48223213200</phone><phone type="mobile">+48501502513</phone><email>mdom@superfirma.pll</email>

</person>...</department>

Example stylesheet

person {display: block;margin: 10px auto 10px 30px;padding: 0.75em 1em;width: 200px;border-style: solid;border-width: 2px;border-color: #002288;background-color: #FFFFFF; }

person[position=’manager’] {background-color: #DDFFDD; }

name, surname {display: inline;font-size: larger; }

person[position=’manager’] name {font-weight: bold; }

Result of formatting

SelectorsI person — element nameI name, surname — two elementsI department name — descendantI department > name — childI A + B — element B directly following AI name:first-child — ‘name’ being first childI person[position] — test of attribute existenceI person[position=’manager’] — attribute value testI person[position~=’manager’] — value is element of listI person#k12 — ID-type attribute valueI ol.staff — equivalent to ol[class~=’staff’]

(HTML specific).

Style depending on media type

Example

@media print {person {background-color: white;font-family: serif;

}}

@media screen {person {background-color: yellow;font-family: sans-serif;

}}

@media all {person {border-style: solid;

}}

display propertyI Kind of visual object representing an elementI Allowed values: inline, block, list-item, run-ininline-block table, table-cell, . . . , none

I Basic property in case of XML visualisationI Rare exeplicit use for HTML (browsers know default values for

HTML elements)

Boxes and positionsI Blocks nested according to nesting of elements in documentI Blocks layout handled by CSSI Custom positioning possibleI margin, padding — external and internal marginsI border-style, border-color, border-width —

border propertiesI position (static | relative | absolute | fixed) —

positioning policyI left, right, top, bottom — position coordinatesI width, height, min-width, max-height, . . . — size

Boxes, margins, borders

cite: W3C, CSS Level 2 Recommendation

Margins and borders — example

person {display: block;margin: 10px auto 10px 30px;padding: 0.75em 1em;width: 200px;border-style: solid;border-width: 2px;border-color: #002288;background-color: #FFFFFF;

}

Text and font propertiesI color, background-color, background-image —

color and background,I font-family — name or generic family of fontI font-size

I font-style, font-weightI text-decoration

I text-align

Fonts and colors example

company {display: block;background-color: #EEFFFF;color: rgb(0, 0, 33%);font-family: ’Bookman’, ’Times New Roman’, serif;font-size: 14pt;

}

company > name {font-size: 1.5em;font-family: ’Verdana’, ’Arial’, sans-serif;font-weight: bold;text-align: center;

}

department > name {font-size: 1.3em;font-family: ’Verdana’, ’Arial’, sans-serif;font-weight: bold;font-style: italic;

}

Generated contentI Ability to show text not occurring in document text contentI Access to attribute valuesI Automatic numbering

Example

person:before {content: attr(position);

}

phone[type=’office’]:before {content: ’tel. ’;

}

phone[type=’mobile’]:before {content: ’kom. ’;

}

CSS capabilities and advantagesI Great visual formatting capabilities

I especially for single elementsI Elements distinguished basing on

I nameI placement within document treeI existence and value of attributes

I SupportI internet browsersI authoring tools

I Easy to write simple stylesheets :)

CSS lacks and drawbacksI Only visualisation

I no conversion to other formatsI Some visual formatting issues

I e.g. confusing block size computing (moreover, incorrectlyperformed in the most popular Web browser)

I Not possible (CSS Level 2):I repeating the same content several timesI distinguish elements basing on their contentsI complex logical conditionsI data processing (e.g. summing numeric values)I access to many documents at once

I Some things require more work than they should, e.g.:I to show attribute valuesI to change elements order

Presentation by transformation

I In order to present a document, we can transform it into a format,that we know how to present.

I Examples of “presentable” XML formats:I XHTMLI XSL Formatting Objects

Extensible Stylesheet Language (XSL)I First generation of recommendations (1999 and 2001):

I XSL (general framework, XSL Formatting Objects language)I XSLT (transformation language)I XPath (expression language, in particular paths addressing

document fragments)I XSL stylesheet — transformation from XML to XSL-FO

I usually for a class of documents (XML application)I in practice, transformation to other formats, often (X)HTML

XSL Idea

cite: W3C, XSL 1.0

XSLT — statusI Created within XSLI Applications beyond XML visualisationI Version 1.0:

I October 1999, connected with XPath 1.0I good support in tools and libraries

I Version 2.0:I January 2007, connected with XPath 2.0 and XQuery 1.0,I new featuresI less software support

XSLT — supportI XSLT 2.0 processors:

I SaxonI Java and .NET libraries, command-line applicationsI free (Open Source) basic versionI commercial schema aware version

I XML Spy (commercial windows application)I XSLT 1.0 processors:

I internet browsersI Xalan (Java and C++ libraries)I xsltproc, part of libxml (C, basically for Linux)I XML extensions of database enginesI . . .

I Authoring toolsI raw text editors and programmer environments (e.g. Eclipse)I specialised tools — rather paid (e.g. XML Spy, oXygen).

XSLT — sheet example

1/2

<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="html" encoding="utf-8" />

<xsl:template match="/"><html><head><title>Staff list</title>

</head><body><h1>Staff list</h1><ul><xsl:apply-templates

select="//person"/></ul>

</body></html>

</xsl:template>...

XSLT — sheet example

2/2

...<xsl:template match="person"><li><xsl:value-of select="name"/><xsl:value-of select="surname"/>(<xsl:value-of select="phone[type=’mobile’]"/>)

</li></xsl:template>

</xsl:stylesheet>

XSLT — stylesheet structureI Stylesheet (arkusz) consists of templates.I Template (szablon) specifies how to transform a source node

into result tree fragmentI Inside templates:

I text and elements not from XSLT namespace → copied to resultI XSLT instructions → affects processingI XPath in instructions → access to source document, arithmetic,

conditions testing, . . .

I XSLT can be considered a programming language specialised forXML documents transformation.

XSLT — operation overviewI Transformation on tree levelI Template for document node (root) started first

I template exists even if we had not written it

I apply-templates within a template — another templatescalled for other nodes, usually for children

I Templates matched according to node kind and name, locationwithin document tree, etc.

I Additional features: conditional processing, copying values andnodes from source, generating new nodes, grouping, sorting, . . .

XPath in XSLTI XPath expressions used for:

I accessing nodes and values from source documentI computing valuesI checking logical conditions

I XPath constructions:I paths (navigating through document tree)I arithmetic and logical operatorsI functions for numbers. strings, etc.I more in version 2.0

I XSLT 1.0 uses XPath 1.0.I XSLT 2.0 uses XPath 2.0.

XPath in XSLT stylesheet — example

...<xsl:template match="person"><li><xsl:value-of select="name"/><xsl:value-of select="./surname"/>(<xsl:value-of select="phone[type=’mobile’]"/>)

</li></xsl:template>

</xsl:stylesheet>

XSLT — transformation resultI XSL Formatting Objects:

I in line with XSL ideaI usable e.g. for printout

I HTML and XHTML:I most popularI usable for Web publication and on-screen view

I Arbitrary XML:I translating to another (or new) formatI picking up or processing data (alternative to XQuery)I XSLT as result of XSLT

I Plain textI CSV and other text data formatsI scripts or configuration filesI plain representation of text documents

Transformations vs styles

cite: Szymon Zioło, XML i nowoczesne technologie zarzadzania trescia

XSL Formatting ObjectsI XML application designed for visual presentationI Focused on printed media

I page templates (“masters”)I automatic pagination

I Normally, XSL-FO documents are not written by hand butgenerated via XSLT.

XSL-FO document structure

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

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

Transformation to XSL-FO (1/2)<?xml version="1.0" encoding="utf-8"?><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" encoding="utf-8"/>

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

<fo:layout-master-set><fo:simple-page-master master-name="A4" ...>...</fo:simple-page-master></fo:layout-master-set>

<fo:page-sequence master-reference="A4"><fo:flow flow-name="xsl-region-body"><xsl:apply-templates /></fo:flow>

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

Transformation to XSL-FO (2/2)

<xsl:template match="person"><fo:blockborder-width="1.5pt"border-style="solid"border-color="#664400"background-color="#FFFFEE">...<fo:block><xsl:apply-templates select="phone"/>

</fo:block></fo:block>

</xsl:template>

<xsl:template match="phone"><fo:block><xsl:choose><xsl:when test="@type=’mobile’">kom. </xsl:when><xsl:otherwise>tel. </xsl:otherwise></xsl:choose><xsl:apply-templates />

</fo:block></xsl:template>

Example visualisation

Ksi#gowo##

Dawid Paszkiewicztel. +48223213203kom. +48501502503paszkiewicz@superfirma.pll

Monika Dom#a#owicztel. +48223213200kom. +48501502513mdom@superfirma.pll

page-master — page templateI Single page layoutI A document may be split in many such pages.

Example

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

Content of pagespage-sequence results in a number of pages

flow content split into pages

static-content content repeated on all pages

flow-name page region reference

Stylesheet fragment

<fo:page-sequence master-reference="A4"><fo:static-content flow-name="xsl-region-before">Company <xsl:value-of select="name" /> staff

</fo:static-content>

<fo:flow flow-name="xsl-region-body"><xsl:apply-templates />

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

XSL-FO tree elements

Block levelI block

I list-block,list-item,list-item-label

I table, table-row,table-cell, . . .

Inline level

I inline,character

I

external-graphics

Special features

I basic-link,bookmark

I footnote

I flow

I . . .

Style of visual elementsI CSS roots of visual formatting modelI Attributes for style properties:

I margin, padding, border-style . . .I background-color, background-image . . .I font-family, font-weight, font-style, font-size

. . .I text-align, text-align-last, text-indent,start-indent, end-indent, wrap-option,break-before . . .

Lists — example

<fo:list-block><fo:list-item><fo:list-item-label><fo:block>First name: </fo:block>

</fo:list-item-label><fo:list-item-body><fo:block margin-left="15em">Dawid</fo:block>

</fo:list-item-body></fo:list-item><fo:list-item><fo:list-item-label><fo:block>Surname: </fo:block>

</fo:list-item-label><fo:list-item-body><fo:block margin-left="15em">Paszkiewicz</fo:block>

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

</fo:list-block>

Example visualisation — lists

Ksi#gowo##

* Stanowisko: starszy referentImi#: DawidNazwisko: Paszkiewicztel.: +48223213203kom.: +48501502503Email: paszkiewicz@superfirma.pll

* Stanowisko: kierownikImi#: MonikaNazwisko: Dom#a#owicztel.: +48223213200kom.: +48501502513Email: mdom@superfirma.pll

Tables — example

<fo:table border="solid 2pt black"><fo:table-header><fo:table-row><fo:table-cell><fo:block font-weight="bold">Surname

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

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

</fo:table-row></fo:table-header><fo:table-body><fo:table-row><fo:table-cell><fo:block>Paszkiewicz</fo:block></fo:table-cell><fo:table-cell><fo:block>Dawid</fo:block></fo:table-cell>...</fo:table-row>

...

Example visualisation — table

XSL-FO — supportI Commercial software:

I Antenna House XSL FormatterI RenderXI EcrionI Lunasil LTD XincI . . .

I Open software:I Apache FOPI xmlroff

XSL-FO — critique

Main XSL-FO advantages

I “in line” with XSLI easy and direct way to obtain printout (e.g. PDF) from XML dataI general advantages of stylesheets over “hard-coded” formatting

Main XSL-FO disadvantages

I too complex for simple needsI too limited for advanced needs

I lack of pagination feedback, cannot say “if these two elementsoccur on the same page. . . ”

I hard to format particular elements in a very special way (thus thisis a general drawback of using stylesheets)