Displaying your XML Files with CSS and XLST It is possible to use CSS to format an XML document. (Not the preferred option but very simple and very possible) This presentation is based on content from w3schools.com
Below is a fraction of the XML file. The second line links the XML file to the CSS file: • <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="cd_catalog.css"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> . . </CATALOG>
Exercise 1: Create a well form xml document for the following Teachers List First Name Last Name Day PhNo Bruce Wil iams Friday 55555 Phil Ohlson Wednesday 22222 Ursh Beere Thursday 33333 • Exercise 2 • Create and link a CSS file which makes First Name green text, font size large; Last Name Grey text, font size large; Day and PhNo font size medium and red text; • (use hex values for all colours)
But Formatting XML with CSS is not the most common method of controlling XML presentation.
It is recommend to use XSLT instead. So WHY? • Because With XSLT you can transform an XML document into HTML- What advantages does “html” formatting/presentation have an over straight CSS formatting
Displaying XML with XSLT • XSLT is the recommended style sheet language of XML. • XSLT (eXtensible Stylesheet Language Transformations) is far more sophisticated than CSS. • XSLT can be used to transform XML into HTML, before it is displayed by a browser: • Click here to see it Display XML with XSLT
What is XSLT? • XSLT stands for XSL Transformations • XSLT transforms an XML document into another XML document whose appearance can look like HTML • XSLT uses XPath to navigate in XML documents • XSLT is a W3C Recommendation
XSLT = XSL Transformations • XSLT is the most important part of XSL. • XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element. • With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more. • A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result- tree
XSLT Uses XPath • In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.
XPath • XPath is a syntax for defining parts of an XML document • XPath uses path expressions to navigate in XML documents • XPath contains a library of standard functions • XPath is a major element in XSLT
XPath is a W3C recommendation Browser support ?
XSLT - Transformation
Correct Style Sheet Declaration • The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>. • Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used! • The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is: • <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> or: • <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at the top of the document.
Starting with a Raw XML Document • We may want to transform the following XML document ("cdcatalog.xml") into XHTML: View here an example of an transformed an XML document • <?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> . . </catalog>
Linking the xls document to the xml document • the XSL style sheet is linked to your XML document by adding the line below • <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> . . </catalog>
Exercise 3: Create a similar xls style sheet for the XML document that you created in exercise 1