Using XSLT to convert XML data into HTML

xml| Data | conversion

XML data can be converted to HTML using a simple XSL stylesheet. With the evolution of the XML specification, it seems to be necessary to meet everyone's needs in the new version; Unfortunately, making simple transformations has always plagued the specification.

Suppose I have an XML data that represents the content of a page, and now I want to convert its contents to a layout. Here is the XML I want to convert:

<?xml version= ' 1.0 '?>
<?xml-stylesheet type= "text/xsl" href= "article.xsl"?>
<xml>
<folders>
<folder>
<text>folder 1</text>
<files>
<file>
<text>file 1</text>
<fields>
<field>
<data>
<type>string</type>
<length>50</length>
<value>some data</value>
</data>
</field>
</fields>
</file>
</files>
</folder>
</folders>
</xml>

This content represents a set of folders, files, and domains. Each folder contains files, and each file contains the fields used to enter data. Each folder in a folder group will appear as a TR element and a TD element in the first row of a TABLE. Each file in a filegroup is represented as a TR element and a TD element in the first row of a TABLE element nested within the folder TR element. Each domain in a domain group is represented as an INPUT in the associated file.

To implement this idea, we need to walk through the XML and build a table from the XSL.

The following are the XSL for this transformation:

<?xml version= "1.0"?>
<xsl:stylesheet
Xmlns:xsl= "http://www.w3.org/1999/XSL/Transform" version= "1.0"
Xmlns:msxsl= "Urn:schemas-microsoft-com:xslt"
xmlns:fn= "http://www.mycompany.com/mynamespace" >
<xsl:output method= "html"/>

<msxsl:script language= "JScript" implements-prefix= "FN" >
function Getelementcount (nodelist, what) {
var rtrn = 0;
RTRN = Nodelist[0].parentnode.selectnodes (what). Length;
Return (RTRN + 1); 1 is added for filler TD
}
</msxsl:script>

<xsl:template match= "/" >

<table cellspacing= "0" cellpadding= "0"
Width= "100%" border= "0" id= "tblroot" name= "Tblroot"
Style= "table-layout:fixed;" >
<TR>
<xsl:for-each select= "Xml/folders/folder" >
<xsl:element name= "TD" >
<xsl:attribute name= "Style" >width:55px</xsl:attribute>
<xsl:value-of select= "Text"/>
</xsl:element>
</xsl:for-each>
<TD> </TD>
</TR>

<xsl:for-each select= "Xml/folders/folder" >
<TR>
<xsl:element name= "TD" >
<xsl:attribute name= "colspan" >
<xsl:value-of select= "Fn:getelementcount (., ' folder ')"/>
</xsl:attribute>

<table cellspacing= "0" cellpadding= "0"
Width= "100%" border= "0" style= "table-layout:fixed;" >
<TR>
<xsl:for-each select= "Files/file" >
<xsl:element name= "TD" >
<xsl:attribute name= "Style" >width:55px;</xsl:attribute>
<xsl:value-of select= "Text"/>
</xsl:element>
</xsl:for-each>
<TD> </TD>
</TR>

<xsl:for-each select= "Files/file" >
<TR>
<xsl:element name= "TD" >
<xsl:attribute name= "colspan" >
<xsl:value-of select= "Fn:getelementcount (., ' file ')"/>
</xsl:attribute>

<xsl:for-each select= "Fields/field" >
<xsl:element name= "INPUT" >
<xsl:attribute name= "Type" >text</xsl:attribute>
<xsl:attribute name= "MaxLength" >
<xsl:value-of select= "Data/length"/>
</xsl:attribute>
<xsl:attribute name= "Value" >
<xsl:value-of select= "Data/value"/>
</xsl:attribute>
</xsl:element><BR/>
</xsl:for-each>

</xsl:element>
</TR>
</xsl:for-each>
</TABLE>
</xsl:element>
</TR>
</xsl:for-each>
</TABLE>

</xsl:template>
</xsl:stylesheet>
In the stylesheet tag, we set up several namespaces, including the XSL namespaces that define all the XSL transformation tags. Allows us to create the MSXML namespace for user functions that can be used in style sheets. I use it to get all the child elements in order to get a COLSPAN attribute set of TD tags. The FN namespace that is used to join a set of user-defined functions created by the msxml:script element.

Then we create the outer TABLE and the first TR. In TR, I create a TD for each folder specified in the XML. I used the xsl:element tag because it allows me to add custom attributes or perform a function to set a property for the COLSPAN property in another TD element.

After creating the required TD for each folder, I started to create a TR for each folder. I only add a TD to this TR, but I set its COLSPAN property to equal the number of folder tags in the folder group plus one. One of the extra is used to fill a space in a TABLE with a fixed layout style.

To get COLSPAN, I passed in the current context (here by "." specified) and the name of the node that I want to compute. In my function, I get the current context, Paraentnode, and the number of nodes specified in the XPath query. The function then returns this number plus one to fill the TD.

With this TD, I embed another table in it that contains each file in the filegroup. From this point on, the process is transformed from the external TABLE. The final step is to add the fields in each file. This time I didn't create the embedded TABLE, just add the fields to the current TD.

Once I complete the generic layout, I can start adding user interface features, such as hiding other folders and file lines until the user clicks on the relevant tab. This feature can be implemented by writing a script that supports this functionality, adding an onclick xsl:attribute element to the folder and file TD elements, and then setting its value to the name of the script function.

Finally, after the universal functionality is complete, you can add Class Xsl:attributes and add related classnames to the STYLE or CSS to get the look you want.

This example creates a foundation for the File-folder-field view that is used in deploying a WEB data solution. Visit MSDN to find more information about Microsoft's XML specifications.