Displaying your XML Files with CSS and XLST<br />It is possible to use CSS to format an XML document. (Not the preferred o...
Below is an example of how to use a CSS style sheet to format an XML document:<br />Take a look at this XML file: The CD c...
Below is a fraction of the XML file. The second line links the XML file to the CSS file:<br /><?xml version="1.0" encoding...
Exercise 1: Create a well form xml document for the following Teachers List<br />Exercise 2<br />Create and link a CSS fil...
But Formatting XML with CSS is not the most common method of controlling XML presentation.<br />
It is recommend to use XSLT instead.  So WHY?<br />Because With XSLT you can transform an XML document into HTML- What adv...
Displaying XML with XSLT<br />XSLT is the recommended style sheet language of XML.<br />XSLT (eXtensibleStylesheet Languag...
What is XSLT?<br />XSLT stands for XSL Transformations<br />XSLT transforms an XML document into another XML document whos...
XSLT = XSL Transformations<br />XSLT is the most important part of XSL.<br />XSLT is used to transform an XML document int...
XSLT Uses XPath<br />In the transformation process, XSLT uses XPath to define parts of the source document that should mat...
XPath<br />XPath is a syntax for defining parts of an XML document<br />XPath uses path expressions to navigate in XML doc...
XPath is a W3C recommendation	Browser support	?<br />
XSLT - Transformation<br />
Correct Style Sheet Declaration<br />The root element that declares the document to be an XSL style sheet is <xsl:styleshe...
Starting with a Raw XML Document<br />We may want to transform the following XML document ("cdcatalog.xml") into XHTML: Vi...
Linking the xls document to the xml document<br />the XSL style sheet is linked to your XML document by adding the line be...
Exercise 3: Create a similar xls style sheet for the XML document that you created in exercise 1<br />
Upcoming SlideShare
Loading in …5
×

Week 11 displaying your xml files with css and xlst

2,779 views
2,491 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,779
On SlideShare
0
From Embeds
0
Number of Embeds
426
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week 11 displaying your xml files with css and xlst

  1. 1. Displaying your XML Files with CSS and XLST<br />It is possible to use CSS to format an XML document. (Not the preferred option but very simple and very possible)<br />This presentation is based on content from w3schools.com<br />
  2. 2. Below is an example of how to use a CSS style sheet to format an XML document:<br />Take a look at this XML file: The CD catalog<br />Then look at this style sheet: The CSS file<br />Finally, view: The CD catalog formatted with the CSS file<br />
  3. 3. Below is a fraction of the XML file. The second line links the XML file to the CSS file:<br /><?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><br />
  4. 4. Exercise 1: Create a well form xml document for the following Teachers List<br />Exercise 2<br />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;<br />(use hex values for all colours)<br />
  5. 5. But Formatting XML with CSS is not the most common method of controlling XML presentation.<br />
  6. 6. It is recommend to use XSLT instead. So WHY?<br />Because With XSLT you can transform an XML document into HTML- What advantages does “html” formatting/presentation have an over straight CSS formatting <br />
  7. 7. Displaying XML with XSLT<br />XSLT is the recommended style sheet language of XML.<br />XSLT (eXtensibleStylesheet Language Transformations) is far more sophisticated than CSS.<br />XSLT can be used to transform XML into HTML, before it is displayed by a browser:<br />Click here to see it Display XML with XSLT<br />
  8. 8. What is XSLT?<br />XSLT stands for XSL Transformations<br />XSLT transforms an XML document into another XML document whose appearance can look like HTML<br />XSLT uses XPath to navigate in XML documents<br />XSLT is a W3C Recommendation<br />
  9. 9. XSLT = XSL Transformations<br />XSLT is the most important part of XSL.<br />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.<br />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.<br />A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree<br />
  10. 10. XSLT Uses XPath<br />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.<br />
  11. 11. XPath<br />XPath is a syntax for defining parts of an XML document<br />XPath uses path expressions to navigate in XML documents<br />XPath contains a library of standard functions<br />XPath is a major element in XSLT<br />
  12. 12. XPath is a W3C recommendation Browser support ?<br />
  13. 13. XSLT - Transformation<br />
  14. 14. Correct Style Sheet Declaration<br />The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.<br />Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!<br />The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:<br /><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> or:<br /><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.<br />
  15. 15. Starting with a Raw XML Document<br />We may want to transform the following XML document ("cdcatalog.xml") into XHTML: View here an example of an transformed an XML document<br /><?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> <br />
  16. 16.
  17. 17. Linking the xls document to the xml document<br />the XSL style sheet is linked to your XML document by adding the line below<br /><?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><br />
  18. 18. Exercise 3: Create a similar xls style sheet for the XML document that you created in exercise 1<br />

×