XSLT - Transformation

Converting XML to HTML using XSLT Transform. XML with XSLT you can do so many things. for example applying rich style sheet and represent XML document into alternative form.

Converting XML to HTML using XSLT Transform

XSLT stands for Extensible Style Language Transformation. XSLT is powerful API for applying style to a XML documents.

XML with XSLT you can applying formatting and transformation. Formatting is like CSS for applying styles. And transformation mean XSLT give you control to transform XML to another form.

Original XML document is not changed. But base on original document create new document.

Converting XML to HTML using XSL Transform

We define the web page structure tag that use for write XML document. Create a file called page.xml to entering following code.

<?xml version="1.0"?>
<PAGE>
  <HEADING>page heading</HEADING>
  <ARTICLE>
    <TITLE>article title</TITLE>
    <DESCRIPTION>article description</DESCRIPTION>
  </ARTICLE>
  <ASIDE>
    <TITLE>side widget bar</TITLE>
    <ITEM>sidebar item</ITEM>
  </ASIDE>
  <FOOTER>page footer</FOOTER>
</PAGE>

XSLT Transform

Lets start to write XSLT transform that will convert XML document and render to a HTML.

Define document type is XML along with document encoding:

<?xml version="1.0" encoding="ISO-8859-1"?>

Specifies the XSL Style Sheet and define the output method in <xsl:output> tag. Default output method XML otherwise explicitly specify either TEXT or HTML.

Optionally you can also specifies the indent attribute to produce indented spaced XML output.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  ...
  <xsl:output method="html" indent="yes"/>
  ...
</xsl:stylesheet>

you can define number of templates contains using <xsl:template> tag. Every <xsl:template> tag contains match attributes.

<xsl:apply-templates> process the children of the current node. In our case root element is current node.

Adding a root element that follow the following instruction,

<xsl:template match="/">
    <html><body>
      <xsl:apply-templates/>
    </body></html>
  </xsl:template>

HTML tag also process with <xsl:apply-templates/> tag. <xsl:apply-templates/> surrounding to a specified HTML tag. you can also assign style attributes to apply inline CSS.

Process the child element

Now adding a child <HEADING> tag you have to add new template. In match attribute you have to write full XPATH from the root element or simple write tag name.

But one thing clear if tag name use several time in your XML document and you want to apply style specific tag you have to write the full XPATH other wise you can use only tag name to XML find itself.

<xsl:template match="/PAGE/HEADING">
    <h1 align="center"> <xsl:apply-templates/> </h1>
</xsl:template>

Example Code:

page.xml

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="page.xsl"?>
<PAGE>
  <HEADING>page heading</HEADING>
  <ARTICLE>
    <TITLE>article title</TITLE>
    <DESCRIPTION>article description</DESCRIPTION>
  </ARTICLE>
  <ASIDE>
    <TITLE>side widget bar</TITLE>
    <ITEM>sidebar item</ITEM>
  </ASIDE>
  <FOOTER>page footer</FOOTER>
</PAGE>

page.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html"/> 
 
  <xsl:template match="/">
    <html><body>
       <xsl:apply-templates/>
    </body></html>
  </xsl:template>

  <xsl:template match="/PAGE/HEADING">
    <h1 align="center"> <xsl:apply-templates/> </h1>
  </xsl:template>

  <xsl:template match="/PAGE/ARTICLE">
    <div style="float:left;width:70%;"><xsl:apply-templates/> </div>
  </xsl:template>

  <xsl:template match="/PAGE/ARTICLE/TITLE">
    <h3> <xsl:apply-templates/> </h3>
  </xsl:template>

  <xsl:template match="/PAGE/ARTICLE/DESCRIPTION">
    <p> <xsl:apply-templates/> </p>
  </xsl:template>

  <xsl:template match="/PAGE/ASIDE/TITLE">
    <div style="float:left;width:30%;"><h3> <xsl:apply-templates/> </h3></div>
  </xsl:template>

  <xsl:template match="ITEM">
    <p> <xsl:apply-templates/> </p>
  </xsl:template>

  <xsl:template match="/PAGE/FOOTER">
    <div style="clear:both;"></div>
    <h1 align="center"> <xsl:apply-templates/> </h1>
  </xsl:template>

</xsl:stylesheet>

Run it... »

Make C# Program for Converting XML to HTML using XSL Transform

Now create C# console application. using keyword to import the XML library

using System;
using System.Xml;
using System.Xml.Xsl; 
namespace XSLTransform{
    class myclass{
        static void Main(string[] args){
            XslTransform myXslTransform; 
            myXslTransform = new XslTransform();
            myXslTransform.Load("page.xsl"); 
            myXslTransform.Transform("page.xml"); 
        }
    }
}

Result should be like,

<html>
<body>
  <h1 align="center">page heading</h1>
  <div style="float:left;width:70%;">
    <h3>article title</h3>
    <p>article description</p>
  </div>

  <div style="float:left;width:30%;">
    <h3>side widget bar</h3>
      <p>sidebar item</p>
  </div>

  <div style="clear:both;"></div>
  <h1 align="center">page footer</h1>
</body>
</html>