Fundamentals of Web-Centric Development Presentation 11: XML technologies part 2: XSL, XSLT, XSL-FO,...

Fundamentals of Web-Centric Development

Presentation 11:

XML technologies part 2: XSL, XSLT,

XSL-FO, XPath & XML Programming

Ingeniørhøjskolen i ÅrhusSlide 2

Outline

• XML recap• Formatting – CSS or XSL?• XPath• XSL/XSLT• XSL-FO• XML Programming


XML markup recap

• XML based on SGML (subset of)• Like SGML for structure not layout (as HTML)• XML targets the Internet – but is also being used

for application exchange formats (Open Office, XMI) – CSVs

• XML is an W3C Recommendation– http://www.w3.org/TR/REC-xml

• XML Namespaces for multiply namespaces• DTD’s or XML Schemas for structure


Local definitions vs public in XML Schema

• Instead of using the ”type” system• Use local definitions

• Another public variant is using ”ref”

How may this be done using the ”type” approach instead?


Formatting XSL & CSS

• XML is only content – no formatting

• Possible to transform the data to XHTML (or other) using JavaScript og server-side

• The W3C ideal is using CSS or XSL – eXtensible Style Sheets

• CSS is most common today– but XSL has more features


XSL vs CSS• W3C made both XSL and CSS:

– The Extensible StyleSheet Language– XML based language for the formatting of document– … which by some is regarded as more advantageous

compared with the more cryptic CSS– XSL consists of XSL-FO (Formatting Objects), the XSL

Transformations language (XSLT) and XPath for defining and accessing part of the XML document

– Exactly the same job may however be solved by using server-side programming

– … but of course XSLT may be used client-side to relief the server (it can also be applied server-side)


XSL vs CSS II – Why both?

• Why Both (XSL & CSS)?

• Well – of course there are practical reasons– If you have already learned CSS & JSP, it takes some

efforts to master XSL to the same degree – In fact XSL-FO is not fully implemented everywhere– … but what does the W3C have to say?


XSL vs CSS III - differences

CSS XSL

Can be used with HTML?

yes no

Can be used with XML?

yes yes

Transformation language?

no yes

Syntax Proprietary CSS (-) Standard XML (+)


When to use XSL & CSS (IIII)

• Why does W3C recommend two different style languages? Which one should you use? Basically, the rule can be summarized very succinctly: – Use CSS when you can, use XSL when you must.

• http://www.w3.org/Style/CSS-vs-XSL

– You may choose to use CSS alongside XSLT when you are dealing with XHTML

– In fact this is the most common solution today


The 3 Main Technologies of XSL

• XSLT, a language for transforming information

• XSL or XSL-FO, a language for formatting information

• XPath, a language for defining parts of an XML document and accessing them

• Each of these elements could fill an entire class.• You will only need to be acquainted with the overall

functionality of these


XPath

• Flexible notation for navigating around trees• Resembles notation used in Unix filesystems• A basic technology that is widely used

– uniqueness and scope in XML Schema

– pattern matching an selection in XSLT

– relations in XLink and XPointer

– computations on values in XSLT and XQuery

• XPath is not written in XML • XPath is a W3C Standard


Location Paths in XPath• location path evaluates to a sequence of nodes • sequence is sorted in document order • sequence will never contain duplicates

• The location path is a sequence of different steps • A location step consists of

– an axis (a direction of selection– successors, descendants)– a nodetest (identifies a node within the axis)– Some predicates (a statement/expression yielding a boolean)

axis :: nodetest [predicate] child::price[price=9.90] (example)


Evaluating Location Paths

• Location Paths may consist of several steps• A step maps a context node into a sequence • This also maps sequences to sequences

– each node is used as context node – and is replaced with the result of applying the step

• The path then applies each step in turn, using the former step as the sequence to work on

• It may be absolute or relative (/cd/price or cd/price)


Example – finding all C nodes


What are we looking for here?


XPath Axes

• An axis is a sequence of nodes • The axis is evaluated relative to the context

node • XPath supports 12 different axes

– child, attribute, descendant, following, parent, preceding, ancestor, self, following-sibling, descendant-or-self, preceding-sibling, ancestor-or-self

• These all have a direction, either forward, backward or stable (attribute)


XPath Node Tests

• text() - child::text() all text nodes of current node

• comment() - child::comment() • processing-instruction() • node() - child::node() all children of current node

• * - attribute::* all attributes of current node

• More node tests exists


XPath Predicates

• General XPath expressions evaluated with the current node as context

• Result is coerced (translated) into a boolean – a number yields true if it equals the context position– a string yields true if it is not empty– a sequence yields true if it is not empty – Example: child::price[price=9.90] - selects all price

elements that are children of the current node with a price element that equals 9.90

– Example: child::cd[position()<6] Selects the first five cd children of the current node


XPath Abrivated Syntax

• Tedious work entering XPath syntax• Enter: the abrivated syntax

Table from http://www.w3schools.com


XPath Examples


XPath Advanced

• This presentation has only shown the basic elements

• Feel free to explore further– Expressions

• Numerical, Equality, Relational, Boolean, Path, Filter

– Variable References• $test

– Functions• 106 with namespace fn=http://www.w3.org/2004/07/xpath-

functions• Examples: fn:avg((1,2,3,4)), fn:round(23.5)


XSLT

• XSL Transformations• Language for transforming a format neutral XML

document into another XML document – e.g. XHTML or WML for presentation

• May also add new elements or remove elements• XSLT relies heavily on XPath for pattern

matching– Specifying patterns for template rules – Selecting nodes for processing – Computing boolean conditions – Generating text contents for the output document


XSLT Template rules

• An XSLT stylesheet contains template rules • The processor finds the most specific rule for the document

root • It then executes the template body

• Find the template rules that match the contex node • Select the most specific one • Evaluate the body (a sequence constructor)


Applying Templates

• <xsl:apply-templates> element applies a template rule to the current element or to the current element's child nodes


Name, Mode, Priority, Sorting & Grouping

• Templates may have other attributes – name: used to call templates like function – mode: used to restrict the candidate templates – priority: used to determine specificity

• Other features include:– Conditionals (<xsl:if/>, <xsl:choose/>)– Control statemetnts (<xsl:for-each/>)– Grouping (<xsl:for-each-group/>)– Sorting (<xsl:sort/>)– Numbering (<xsl:number/>)– Functions (<xsl:function/>)– Parameters (<xsl:param/>)


XSL/XSLT example• Transforming a XML document using XSLT invovles 2

tree structures– Source tree (original XML document)– Result tree (the transformed document)– AND of course the XSL document! (so totally 3)

• In this example– We take an XML document which could have been generated

from a RDBMS database – We want to transform this XML document into an XHTML

document for browsers– And maybe we COULD transform it into a PDF, and a WML

document (for mobile phones) or whatever we might need in the future

Ingeniørhøjskolen i ÅrhusSlide 27 af 43

XML dokument“Source tree”Games.xml

1 <?xml version = "1.0"?>2 <?xml:stylesheet type = "text/xsl" href = "games.xsl"?>3 4 5 6 7 <sports>8 9 <game id = "783">10 <name>Cricket</name>11 12 <paragraph>13 More popular among commonwealth nations.14 </paragraph>15 </game>16 17 <game id = "239">18 <name>Baseball</name>19 20 <paragraph>21 More popular in America.22 </paragraph>23 </game>24 25 <game id = "418">26 <name>Soccer (Football)</name>27 28 <paragraph>29 Most popular sport in the world.30 </paragraph>31 </game>32 33 </sports>

A processing instruction that references the XSL stylesheet games.xsl..

Wait – isn’t there something wrong here – why do we have XSL embedded in the XML documet?

We will look at this later

Value type specifies that games.xsl is a text/xsl file.

XSL dokumentElements.xsl

1 <?xml version = "1.0"?>2 3 4 5 6 7 <xsl:stylesheet version = "1.0" 8 xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">9 10 <xsl:output method = "html" omit-xml-declaration = "no" 11 doctype-system = 12 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 13 doctype-public = "-//W3C//DTD XHTML 1.0 Strict//EN"/>14 15 <xsl:template match = "/">16 17 <html xmlns="http://www.w3.org/1999/xhtml">18 19 <head>20 <title>Sports</title>21 </head>22 23 <body>24 25 <table border = "1" bgcolor = "cyan">26 27 <thead>28 29 <tr>30 <th>ID</th>31 <th>Sport</th>32 <th>Information</th>33 </tr>34 35 </thead>

The stylesheet start tag—which begins the XSL stylesheet.

Element xsl:output writes an XHTML document type declaration to the result tree.

The match attribute to select the document root of the source document (i.e., game.xml).

Elements.xsl

36 37 38 39 <xsl:for-each select = "sports/game">40 41 <tr>42 <td><xsl:value-of select = "@id"/></td>43 <td><xsl:value-of select = "name"/></td>44 <td><xsl:value-of select = "paragraph"/></td>45 </tr>46 47 </xsl:for-each>48 49 </table>50 51 </body>52 53 </html>54 55 </xsl:template>56 57 </xsl:stylesheet>

Element xsl:for-each iterates through the source XML document and search for game elements.

These three select values are all XPath expressions.

Other types of XPath uses include / for navigating to child nodes, and using * wildcards for selecting unknown elements. Other types of usage includes indexing e.g. [1] and selecting attributes using @

Element value-of retrieves attribute id’s value and place it in a td element in the result tree.


XHTML dokument“result” treeResult of XSLT tranformation


More examples?

• Will only sedate you with boredom and a sad feeling of helplessness

• Please go try it out yourself instead– Plenty of examples at:– http://www.w3schools.com/xsl/default.asp

• Assignment (5 min.):– Try making an XSL document which will print the following bullet

list HTML document• Cricket – Popular among commenwealth nations (ID: 783)• etc

– Consider the problems when using the XML document with several XSL documents. How may it be done?


Not nice with embedded XSL?

• You may use JavaScript to separate gracefully <html><body> <script type="text/javascript"> // Load XML var xml = new ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("cdcatalog.xml") // Load XSL var xsl = new ActiveXObject("Microsoft.XMLDOM") xsl.async = false xsl.load("cdcatalog.xsl") // Transform document.write(xml.transformNode(xsl)) </script></body></html>

• Detect type of browser and load proper XSL doc


… and server-side as well

• You may also use server-side programming for this<%'Load XMLset xml = Server.CreateObject("Microsoft.XMLDOM")xml.async = falsexml.load(Server.MapPath("cdcatalog.xml"))

'Load XSLset xsl = Server.CreateObject("Microsoft.XMLDOM")xsl.async = falsexsl.load(Server.MapPath("cdcatalog.xsl"))

'Transform fileResponse.Write(xml.transformNode(xsl))%>

• … and of course – you dont really need XSL then – as the same job may be done in Java, C#, VB etc


Browser Troubles in Paradise

• “XSLT in Internet Explorer 5 (and 5.5) is NOT compatible with the official W3C XSL Recommendation.”

• “Internet Explorer 6 fully supports the official W3C XSLT Recommendation. “

• “ Netscape 6 isn't fully supporting the official W3C XSLT Recommendation.”

• “ Netscape 7 supports the official W3C XSLT Recommendation.” – http://www.w3schools.com/xsl/xsl_browsers.asp


Cross Browser DOM Handling


XSL-FO

• XSL-FO is a language for formatting XML data • XSL-FO stands for Extensible Stylesheet

Language Formatting Objects • XSL-FO is a W3C Recommendation • XSL-FO is now formally named XSL

• XSL-FO is not used extensively with WWW technologies yet, as CSS and XSLT may be used together. This may change however!

• PDF / Web forms from XSL-FO (Scriptura)


XSL-FO Formatting instructions:• Block Margin, Border, Padding, Background• Block Styling Attributes:

– font-family – font-weight – font-style – font-size – font-variant – text-align – text-align-last – text-indent – start-indent – end-indent – wrap-option (defines word wrap) – break-before (defines page breaks) – break-after (defines page breaks) – reference-orientation (defines text rotation in 90" increments)

• Which in general will handle the same stuff as CSS


Other XSL-FO elements

• Areas, Output, Flow, Pages, List, Tables• All of which we will not cover here!


XSL-FO Example

Below is a XSL-FO document

And the output would be


XML, XML-FO & XSLT ExampleBelow is a XML document

We apply some XSLT including XML-FO

And we get a result


Programmatic XML access?

• Many API’s & framework for XML handling• For Java:

– JDOM: http://www.jdom.org/ – JAXP: http://java.sun.com/xml/jaxp/ – SAX: http://www.saxproject.org/

• C#:– using System.Xml / System.Xml.Xsl; – Build-in support for XML, XSD, XSLT, XPATH, SOAP– XMLSerializer – Object / XML mapping

• http://www.csharphelp.com/archives/archive78.html

– Validating XML document against DTD, XSD, XDR• http://support.microsoft.com/kb/307379


C# System.Xml and System.Xml.Schema

• Validating a Document with DTD in C#


Mapping Tools

• Mapping Tools

• XML to C++/C#/Java

• XML Spy 2007


A JDOM Example: Double Sugar

Access all ingredientsGet the elements whose attribute “name” equals sugarGet the amount attribute and double it!


Other XML Technologies

• XQuery: Query Language of XML

• XLink: XML hyperlinks

• XPointer: named anchors

• All W3C Recommendations• Limited browser support• Study these yourselves

Fundamentals of Web-Centric Development Presentation 11: XML technologies part 2: XSL, XSLT, XSL-FO,...

Documents

Transcript of Fundamentals of Web-Centric Development Presentation 11: XML technologies part 2: XSL, XSLT, XSL-FO,...