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 an example of how to use a CSS style sheet to format an XML document:

• Take a look at this XML file: The CD catalog

• Then look at this style sheet: The CSS file• Finally, view:

The CD catalog formatted with the CSS file

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