Convert XML data to HTML

You can use a simple XSL style sheet to convert XML data into HTML. With the continuous evolution of XML specifications, it seems necessary to meet the needs of everyone in the new version. Suppose there is an XML data that represents the content of a page, now I want to convert the content to layout. The XML to be converted is as follows:
<? 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 indicates a group of folders, files, and fields. Each folder contains files, and each file contains the fields used for input data. Each folder in the folder group is represented as a TR element and a TD element in the first row of a TABLE. Each file in the file group represents a TR element and a TD element in the first row of a TABLE element nested in the TR element of the folder. Each domain in the domain group is represented as an INPUT in the relevant file.

The following is the XSL used for this conversion:

<? 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 namespaces that define all xsl conversion tags. This allows us to create the msxml namespace for user functions that can be used in the style sheet. Use it to get all the child elements to get a COLSPAN attribute set marked by TD. The fn namespace used to join a group of user-defined functions. This namespace is created by msxml: script element.

Then, we create an external TABLE and the first TR. In TR, create a TD for each folder specified in XML. The xsl: element tag is used because it allows you to add custom attributes or execute a function to set an attribute for the COLSPAN attribute in another TD element.

After creating the required TD for each folder, create TR for each folder. Add only one TD to this TR, but set its COLSPAN attribute to equal to the number of folder tags in the folder group and add one. The other one is used to fill spaces in a fixed layout TABLE.

To get COLSPAN, enter the name of the current context (specified by "." Here) and computing node. In the function, obtain the number of nodes specified in the current context, paraentNode, and XPath query. Then, the function returns this quantity and adds it to fill in the TD.

With this TD, another TABLE is embedded in the TABLE, which contains every file in the file group. From this point on, the process is the same as External TABLE conversion. The last step is to add fields in each file.

Once the general layout is complete, you can add the user interface function, such as hiding other folders and file lines until the user clicks the relevant tab. This function can be implemented by writing scripts that support this function, adding an onclick xsl: attribute element to the folder and file TD element, set its value to the name of the script function.

Finally, after the general functions are completed, you can add the class xsl: attributes and add the relevant classNames in the STYLE or CSS to get the desired appearance.

This example creates a foundation for the File-Folder-Field view used in the Web data solution deployment. Visit MSDN to find more information about Microsoft's XML specifications.