XML + XSD + XSLT in HTML

CSS is Style Sheet for HTML
HTML uses predefined tags, and the meaning of each tag is well understood.
The <table> tag in HTML defines a table – and a browser knows how to display it.
Adding styles to HTML elements are simple.
Telling a browser to display an element in a special font or color, is easy with CSS.

XSL is Style Sheet for XML
On the other other hand,
XML does not use predefined tags (we can use any tag-names we like), and therefore the meaning of each tag is not well understood.
A <table> tag could mean an HTML table, a piece of furniture, or something else – and a browser does not know how to display it.

XSL describes how the XML document should be displayed!

You will need:
A good XML editor (even a notepad can do). I used XML Copy Editor 1.2.0.2
A browser. (I used Mozilla Fire Fox 3.0.8).

Create c:\country.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<?xml-stylesheet type=”text/xsl” href=”country.xsl”?>
<country xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”country.xsd”>

<countryName>Australia</countryName>
<capital>Canberra</capital>
<nationalLanguage>English</nationalLanguage>
<population>21000000</population>
<currency>Australian Dollar</currency>
<nationalIdentities>
<nationalAnthem>Advance Australia Fair</nationalAnthem>
<nationalDay>Australia Day (26 January)</nationalDay>
<nationalColour>Green and Gold</nationalColour>
<nationalGemstone>Opal</nationalGemstone>
<nationalFlower>Wattle (Acacia pycnantha)</nationalFlower>
</nationalIdentities>
<publicHolidays>
<newYearDay>1 January</newYearDay>
<australiaDay>26 January</australiaDay>
<anzacDay>25 April</anzacDay>
<christmasDay>25 December</christmasDay>
<boxingDay>26 December</boxingDay>
<laborDay>Variable Date</laborDay>
<easter>Variable Date</easter>
<queenBirthDay>21 April (Variable Date)</queenBirthDay>
</publicHolidays>
<states>
<stateName>NSW – New South Wales</stateName>
<stateName>VIC – Victoria</stateName>
<stateName>QLD – Queensland</stateName>
<stateName>SA – South Australia</stateName>
<stateName>WA – Western Australia</stateName>
<stateName>TAS – Tasmania</stateName>
</states>
<territories>
<territoryName>ACT – Australian Capital Territory</territoryName>
<territoryName>NT – Northern Territory</territoryName>
</territories>
</country>

Create c:\country.xsd
<?xml version=”1.0″ encoding=”UTF-8″?>
<xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema”>

<xs:element name=”country”>
<xs:complexType>
<xs:sequence>
<xs:element name=”countryName” type=”xs:string”/>
<xs:element name=”capital” type=”xs:string”/>
<xs:element name=”nationalLanguage” type=”xs:string”/>
<xs:element name=”population” type=”xs:double”/>
<xs:element name=”currency” type=”xs:string”/>
<xs:element name=”nationalIdentities”>
<xs:complexType>
<xs:sequence>
<xs:element name=”nationalAnthem” type=”xs:string”/>
<xs:element name=”nationalDay” type=”xs:string”/>
<xs:element name=”nationalColour” type=”xs:string”/>
<xs:element name=”nationalGemstone” type=”xs:string”/>
<xs:element name=”nationalFlower” type=”xs:string”/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name=”publicHolidays”>
<xs:complexType>
<xs:sequence>
<xs:element name=”newYearDay” maxOccurs=”1″ type=”xs:string”/>
<xs:element name=”australiaDay” maxOccurs=”1″ type=”xs:string”/>
<xs:element name=”anzacDay” maxOccurs=”1″ type=”xs:string”/>
<xs:element name=”christmasDay” maxOccurs=”1″ type=”xs:string”/>
<xs:element name=”boxingDay” maxOccurs=”1″ type=”xs:string”/>
<xs:element name=”laborDay” maxOccurs=”1″ type=”xs:string”/>
<xs:element name=”easter” maxOccurs=”1″ type=”xs:string”/>
<xs:element name=”queenBirthDay” maxOccurs=”1″ type=”xs:string”/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name=”states”>
<xs:complexType>
<xs:sequence>
<xs:element name=”stateName” type=”xs:string” minOccurs=”1″ maxOccurs=”unbounded”/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name=”territories”>
<xs:complexType>
<xs:sequence>
<xs:element name=”territoryName” maxOccurs=”unbounded”/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>

</xs:schema>

Create c:\country.xsl
<?xml version=”1.0″ encoding=”UTF-8″?>
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” version=”1.0″>
<xsl:template match=”/”>
<html>
<body>
<xsl:for-each select=”country”>
<xsl:value-of select=”countryName”/><br/>
<xsl:value-of select=”capital”/><br/>
<xsl:value-of select=”nationalLanguage”/><br/>
<xsl:value-of select=”population”/><br/>
<xsl:value-of select=”currency”/><br/>
<xsl:for-each select=”nationalIdentities”>
<xsl:value-of select=”nationalAnthem”/><br/>
<xsl:value-of select=”nationalDay”/><br/>
<xsl:value-of select=”nationalColour”/><br/>
<xsl:value-of select=”nationalGemstone”/><br/>
<xsl:value-of select=”nationalFlower”/><br/>
</xsl:for-each>
<xsl:for-each select=”publicHolidays”>
<xsl:value-of select=”newYearDay”/><br/>
<xsl:value-of select=”australiaDay”/><br/>
<xsl:value-of select=”anzacDay”/><br/>
<xsl:value-of select=”christmasDay”/><br/>
<xsl:value-of select=”boxingDay”/><br/>
<xsl:value-of select=”laborDay”/><br/>
<xsl:value-of select=”easter”/><br/>
<xsl:value-of select=”queenBirthDay”/><br/>
</xsl:for-each>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Execute the program
Just open the country.xml in your browser.

Moreover
Above is a very simple output.
You can further beautify your output by modifying your country.xsl
Just create another c:\beautifiedcountry.xsl
And replace the name from “country.xsl” to “beautifiedcountry.xsl” in your country.xml
And open the XML to see the difference.

Copy this c:\beautifiedcountry.xsl
<?xml version=”1.0″ encoding=”UTF-8″?>
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” version=”1.0″>
<xsl:template match=”/”>
<html>
<body>
<table border=”2″ bgcolor=”lightgray”>
<tr><u><b>GENERAL INFORMATION</b></u></tr>
<tr>
<xsl:for-each select=”country”>
<tr>
<table border=”1″ bgcolor=”lightblue”>
<tr><td>Country Name</td><td><xsl:value-of select=”countryName”/></td></tr>
<tr><td>Capital</td><td><xsl:value-of select=”capital”/></td></tr>
<tr><td>National Language</td><td><xsl:value-of select=”nationalLanguage”/></td></tr>
<tr><td>Population</td><td><xsl:value-of select=”population”/></td></tr>
<tr><td>Currency</td><td><xsl:value-of select=”currency”/></td></tr>
</table>
</tr>
<tr><br></br></tr>
<tr><u><b>NATIONAL IDENTITIES</b></u></tr>
<tr>
<xsl:for-each select=”nationalIdentities”>
<table border=”1″ bgcolor=”lightyellow”>
<tr>
<td>National Anthem</td><td><xsl:value-of select=”nationalAnthem”/></td>
</tr>
<tr>
<td>National Day</td><td><xsl:value-of select=”nationalDay”/></td>
</tr>
<tr>
<td>National Colour</td><td><xsl:value-of select=”nationalColour”/></td>
</tr>
<tr>
<td>National Gem Stone</td><td><xsl:value-of select=”nationalGemstone”/></td>
</tr>
<tr>
<td>National Flower</td><td><xsl:value-of select=”nationalFlower”/></td>
</tr>
</table>
</xsl:for-each>
</tr>
<tr><br></br></tr>
<tr><u><b>PUBLIC HOLIDAYS</b></u></tr>
<tr>
<xsl:for-each select=”publicHolidays”>
<table border=”1″ bgcolor=”LightGreen”>
<tr>
<td>New Year’s Day</td><td><xsl:value-of select=”newYearDay”/></td>
</tr>
<tr>
<td>Australia Day</td><td><xsl:value-of select=”australiaDay”/></td>
</tr>
<tr>
<td>ANZAC Day</td><td><xsl:value-of select=”anzacDay”/></td>
</tr>
<tr>
<td>Christmas Day</td><td><xsl:value-of select=”christmasDay”/></td>
</tr>
<tr>
<td>Boxing Day</td><td><xsl:value-of select=”boxingDay”/></td>
</tr>
<tr>
<td>Labor Day</td><td><xsl:value-of select=”laborDay”/></td>
</tr>
<tr>
<td>Easter</td><td><xsl:value-of select=”easter”/></td>
</tr>
<tr>
<td>Queen’s Birthday</td><td><xsl:value-of select=”queenBirthDay”/></td>
</tr>
</table>
</xsl:for-each>
</tr>
</xsl:for-each>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Recommended Reference:
http://www.w3schools.com/xsl/xsl_languages.asp

Share this:

Like this: