Week 11 displaying your xml files with css and xlst
Upcoming SlideShare
Loading in...5

Week 11 displaying your xml files with css and xlst






Total Views
Views on SlideShare
Embed Views



3 Embeds 417

http://www.urshula.com 414
http://webcache.googleusercontent.com 2
https://twitter.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Week 11 displaying your xml files with css and xlst Week 11 displaying your xml files with css and xlst Presentation Transcript

  • 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>
    View slide
  • Exercise 1: Create a well form xml document for the following Teachers List
    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)
    View slide
  • 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 (eXtensibleStylesheet 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