Detailed introduction to the sample code for converting XML data into HTML

Use a simple XSL stylesheet to convert XML data into HTML. As the XML specification continues to evolve, it seems to be necessary to meet everyone's needs in the new version; suppose you have XML data that represents the content of a page, and now you want to convert its content into a layout. Here is the XML you want to convert:

<?xmlversion=&#39;1.0&#39;?> 
<?xml-stylesheettype="text/xsl"href="article.xsl"?> 
<xml> 
<folders> 
<folder> 
<text>Folder1</text> 
<files> 
<file> 
<text>File1</text> 
<fields> 
<field> 
<data> 
<type>string</type> 
<length>50</length> 
<value>somedata</value> 
</data> 
</field> 
</fields> 
</file> 
</files> 
</folder> 
</folders> 
</xml>

This content represents a set of folders, files and fields. Each folder contains files , and each file contains fields for input data. Each folder in the folder group will be represented by a TR element and a TD element in the first row of a TABLE. Each file in the file group will be represented as a TR element and a TD element on the first line of a TABLE element nested within the folder TR element. Each domain in the domain group will appear as an INPUT in the associated file.
The following is the XSL used for this transformation:

<?xmlversion="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:outputmethod="html"/> 
<msxsl:scriptlanguage="JScript"implements-prefix="fn"> 
functiongetElementCount(nodelist,what){ 
varrtrn=0; 
rtrn=nodelist[0].parentNode.selectNodes(what).length; 
return(rtrn 1);//1isaddedforfillerTD 
} 
</msxsl:script> 
<xsl:templatematch="/"> 
<TABLECELLSPACING="0"CELLPADDING="0" 
WIDTH="100%"BORDER="0"ID="tblRoot"NAME="tblRoot" 
style="table-layout:fixed;"> 
<TR> 
<xsl:for-eachselect="xml/folders/folder"> 
<xsl:elementname="TD"> 
<xsl:attributename="style">width:55px</xsl:attribute> 
<xsl:value-ofselect="text"/> 
</xsl:element> 
</xsl:for-each> 
<TD></TD> 
</TR> 
<xsl:for-eachselect="xml/folders/folder"> 
<TR> 
<xsl:elementname="TD"> 
<xsl:attributename="colspan"> 
<xsl:value-ofselect="fn:getElementCount(.,&#39;folder&#39;)"/> 
</xsl:attribute> 

<TABLECELLSPACING="0"CELLPADDING="0" 
WIDTH="100%"BORDER="0"style="table-layout:fixed;"> 
<TR> 
<xsl:for-eachselect="files/file"> 
<xsl:elementname="TD"> 
<xsl:attributename="style">width:55px;</xsl:attribute> 
<xsl:value-ofselect="text"/> 
</xsl:element> 
</xsl:for-each> 
<TD></TD> 
</TR> 
<xsl:for-eachselect="files/file"> 
<TR> 
<xsl:elementname="TD"> 
<xsl:attributename="colspan"> 
<xsl:value-ofselect="fn:getElementCount(.,&#39;file&#39;)"/> 
</xsl:attribute> 
<xsl:for-eachselect="fields/field"> 
<xsl:elementname="INPUT"> 
<xsl:attributename="type">text</xsl:attribute> 
<xsl:attributename="maxlength"> 
<xsl:value-ofselect="data/length"/> 
</xsl:attribute> 
<xsl:attributename="value"> 
<xsl:value-ofselect="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 definition of all xsl transformation tags xsl namespace. msxml namespace that allows us to create userfunctions that can be used in stylesheets. Use this to get all child elements in order to get a COLSPAN attribute set for a TD tag. The fn namespace 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 the TR, create a TD for each folder specified in the XML. The xsl:element tag is used because it allows adding custom attributes or executing a function to set a property for the COLSPAN attribute in another TD element.
After creating the required TD for each folder, start creating TR for each folder. Add just one TD to this TR, but set its COLSPAN attribute equal to the number of folder tags in the folder group plus one. The extra one is used to fill spaces in a fixed layout TABLE.
To get COLSPAN, pass in the current context (specified here by ".") and the name of the calculated node. In the function, get the current context, paraentNode, and the number of nodes specified in XPath query. The function then returns this amount plus one to fill the TD.
With this TD, embed another TABLE in it, which contains each file in the file group. From this point on, the process is the same as for an external TABLE conversion. The final step is to add the fields in each file.
Once the general layout is complete, you can start adding user interface features, such as hiding other folders and file rows until the user clicks the relevant tab . This functionality can be achieved by writing a script that supports this functionality by 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 common functionality is completed, you can add class xsl:attributes and add related classNames in STYLE or CSS to get the look you want.
This example creates a basis for the File-Folder-Field View used in deploying web data solutions. Visit MSDN to find out more about Microsoft's XML specification.

The above is the detailed content of Detailed introduction to the sample code for converting XML data into HTML. For more information, please follow other related articles on the PHP Chinese website!