Convert XML data to HTML

XML data can be converted to HTML using a simple XSL stylesheet. As the XML specification evolves, it seems necessary to meet everyone's needs in a new release; Suppose you have an XML data that represents a page's content and now you want to convert its content to a layout. Here is the XML you 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.

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.aaa.com/aaa>
<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, several namespaces are set, including the XSL namespace that defines all the XSL transformation tags. Allows us to create the MSXML namespace for user functions that can be used in style sheets. 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, a TD is created for each folder specified in the XML. The xsl:element tag is used because it allows you to add custom attributes or perform a function to set a property for the COLSPAN property in another TD element.

After you have created the required TD for each folder, start creating a TR for each folder. Add only one TD to this TR, but 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.

In order to get COLSPAN, pass in the current context (here by the "." specified) and the name of the computed node. In the function, 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, you embed another table, which 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.

Once the generic layout is complete, you 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.