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:

85fa80ee361e700c2be4d997bc9733c9 
31fe81e98afd17e4b9a8a28bedee1cf1 
b2a0af5a8fd26276da50279a1c63a57a 
254d0476a3bbaede07403c5f35da3e25 
59ef88518edd60e9f6a2c9f2c966ac0c 
28f128881ce1cdc57a572953e91f7d0fFolder1273e21371c5d5e701d3c98517a0bfa41 
c6a235960c38d509b87ca752283a5cb2 
28897b20adb25fbae118a3f80f538dec 
28f128881ce1cdc57a572953e91f7d0fFile1273e21371c5d5e701d3c98517a0bfa41 
5d31de15119673d8345a6e7e4e3539c8 
d737d0a06790df603d79bb2c76c86712 
1d029f6197b5a3eb8a3fdf0a088ddf55 
7674b22ef33c73b930516fd6bc30b7a3string47da3aec5fea7de36e415e6398f16561 
d82af2074b26fcfe177e947839b5d381500a47fdba4028b9e1b40fb76257dcf69f 
8487820b627113dd990f63dd2ef215f3somedata4b175f9a50d57c75316becd702e959dc 
07b4fdd0136efc154b4b9d48cfcbbb9d 
6d2ce49320ba9a8e638019ef6c9bc2ef 
7e3a30f0b0961b04563491c9888611a7 
a83812d91bc3e67c6d4248fcc5008811 
917d3984ce33e8bdef33749ba625760b 
506346dddbef7ce31b7ff0aa13ddacdf 
c1a7601f3a9fa679b3cd6fdf4f6dbe8d 
21118965b89073f60271ef4a3b5d3c58

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!