SlideShare a Scribd company logo
1 of 18
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 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 (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

More Related Content

More from hapy

Week1 xml
Week1 xmlWeek1 xml
Week1 xmlhapy
 
What is a service level agreement week7
What is a service level agreement week7What is a service level agreement week7
What is a service level agreement week7hapy
 
Week 4 market segmentation
Week 4 market segmentationWeek 4 market segmentation
Week 4 market segmentationhapy
 
Business requirements documents
Business requirements documentsBusiness requirements documents
Business requirements documentshapy
 
2 understanding client support needs
2 understanding client support needs2 understanding client support needs
2 understanding client support needshapy
 
3 proposing client support solutions
3 proposing client support solutions3 proposing client support solutions
3 proposing client support solutionshapy
 
What is wordpress week 1
What is wordpress week 1What is wordpress week 1
What is wordpress week 1hapy
 
1 understanding your clients
1 understanding your clients1 understanding your clients
1 understanding your clientshapy
 
Information Architecture Intro
Information Architecture IntroInformation Architecture Intro
Information Architecture Introhapy
 
Assessment Validation IT Conference 08
Assessment Validation IT Conference 08Assessment Validation IT Conference 08
Assessment Validation IT Conference 08hapy
 
Wikispaces Help
Wikispaces HelpWikispaces Help
Wikispaces Helphapy
 
Week12 Obtain Client Sign Off On Technical Documentation
Week12 Obtain Client Sign Off On Technical DocumentationWeek12 Obtain Client Sign Off On Technical Documentation
Week12 Obtain Client Sign Off On Technical Documentationhapy
 
Week11 Determine Technical Requirements
Week11 Determine Technical RequirementsWeek11 Determine Technical Requirements
Week11 Determine Technical Requirementshapy
 
Week8 Topic1 Translate Business Needs Into Technical Requirements
Week8 Topic1 Translate Business Needs Into Technical RequirementsWeek8 Topic1 Translate Business Needs Into Technical Requirements
Week8 Topic1 Translate Business Needs Into Technical Requirementshapy
 
Week7 Submit Analysis And Gain Agreement
Week7 Submit Analysis And Gain AgreementWeek7 Submit Analysis And Gain Agreement
Week7 Submit Analysis And Gain Agreementhapy
 
Web 2 Tools
Web 2 ToolsWeb 2 Tools
Web 2 Toolshapy
 
Week5 Ensure Analysis Is Accurate And Complete
Week5 Ensure Analysis Is Accurate And CompleteWeek5 Ensure Analysis Is Accurate And Complete
Week5 Ensure Analysis Is Accurate And Completehapy
 
Week4 Ensure Analysis Is Accurate And Complete
Week4 Ensure Analysis Is Accurate And CompleteWeek4 Ensure Analysis Is Accurate And Complete
Week4 Ensure Analysis Is Accurate And Completehapy
 
JAD Workshops
JAD WorkshopsJAD Workshops
JAD Workshopshapy
 

More from hapy (19)

Week1 xml
Week1 xmlWeek1 xml
Week1 xml
 
What is a service level agreement week7
What is a service level agreement week7What is a service level agreement week7
What is a service level agreement week7
 
Week 4 market segmentation
Week 4 market segmentationWeek 4 market segmentation
Week 4 market segmentation
 
Business requirements documents
Business requirements documentsBusiness requirements documents
Business requirements documents
 
2 understanding client support needs
2 understanding client support needs2 understanding client support needs
2 understanding client support needs
 
3 proposing client support solutions
3 proposing client support solutions3 proposing client support solutions
3 proposing client support solutions
 
What is wordpress week 1
What is wordpress week 1What is wordpress week 1
What is wordpress week 1
 
1 understanding your clients
1 understanding your clients1 understanding your clients
1 understanding your clients
 
Information Architecture Intro
Information Architecture IntroInformation Architecture Intro
Information Architecture Intro
 
Assessment Validation IT Conference 08
Assessment Validation IT Conference 08Assessment Validation IT Conference 08
Assessment Validation IT Conference 08
 
Wikispaces Help
Wikispaces HelpWikispaces Help
Wikispaces Help
 
Week12 Obtain Client Sign Off On Technical Documentation
Week12 Obtain Client Sign Off On Technical DocumentationWeek12 Obtain Client Sign Off On Technical Documentation
Week12 Obtain Client Sign Off On Technical Documentation
 
Week11 Determine Technical Requirements
Week11 Determine Technical RequirementsWeek11 Determine Technical Requirements
Week11 Determine Technical Requirements
 
Week8 Topic1 Translate Business Needs Into Technical Requirements
Week8 Topic1 Translate Business Needs Into Technical RequirementsWeek8 Topic1 Translate Business Needs Into Technical Requirements
Week8 Topic1 Translate Business Needs Into Technical Requirements
 
Week7 Submit Analysis And Gain Agreement
Week7 Submit Analysis And Gain AgreementWeek7 Submit Analysis And Gain Agreement
Week7 Submit Analysis And Gain Agreement
 
Web 2 Tools
Web 2 ToolsWeb 2 Tools
Web 2 Tools
 
Week5 Ensure Analysis Is Accurate And Complete
Week5 Ensure Analysis Is Accurate And CompleteWeek5 Ensure Analysis Is Accurate And Complete
Week5 Ensure Analysis Is Accurate And Complete
 
Week4 Ensure Analysis Is Accurate And Complete
Week4 Ensure Analysis Is Accurate And CompleteWeek4 Ensure Analysis Is Accurate And Complete
Week4 Ensure Analysis Is Accurate And Complete
 
JAD Workshops
JAD WorkshopsJAD Workshops
JAD Workshops
 

Week 11 displaying your xml files with css and xlst

  • 1. 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
  • 2. 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
  • 3. 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>
  • 4. 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)
  • 5. But Formatting XML with CSS is not the most common method of controlling XML presentation.
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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.
  • 11. 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
  • 12. XPath is a W3C recommendation Browser support ?
  • 14. 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.
  • 15. 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>
  • 16.
  • 17. 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>
  • 18. Exercise 3: Create a similar xls style sheet for the XML document that you created in exercise 1