1. Getting started with XSL
--- XML style sheet
HTML pages use pre-determined tags, which means that all tags have clear meanings, such as <p> starting with another line <h1> being the title font. All browsers know how to parse and display HTML pages.
However, XML does not have a fixed identity, and we can create the identity we need, so the browser cannot automatically parse them, for example, <table> can be understood as a table or a table. Due to the scalability of XML, we do not have a standard way to display XML documents.
In order to control the display of XML documents, it is necessary to establish a mechanism, and CSS is one of them. However, XSL (eXtensible Stylesheet Language) is the preferred style language for displaying XML documents, and it is more suitable for XML than CSS.
--- Not just a style sheet
XSL consists of two parts:
First, convert XML documents; second, format XML documents.
If you don't understand this, think about it this way: XSL is a language that can convert XML into HTML, a language that can filter and select XML data, and a language that can format XML data. (For example, use red to display negative numbers.)
--- What can it do?
XSL can be used to define how XML documents are displayed, and XML documents can be converted into HTML files that can be recognized by the browser. Usually, XSL implements this transformation by "translating" each XML element into an HTML element.
XSL can add new elements to the output file or move elements. XSL can also rearrange or index data, which can detect and determine which elements are displayed and how many are displayed.
Display in IE5
Note: IE5.0 is not fully compatible with the latest XSL standards released by W3C organizations. Because IE5.0 was released before the finalization of the XSL standard. Microsoft has promised a correction in IE5.5. Two.XSL conversion
1. Convert XML to HTML
How does XSL convert XML documents into HTML files? Let's look at an example, and the following is a part of the XML document: <?xml version="1.0" encoding="ISO8859-1" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
... Then we convert the XML data into HTML file as a template for the following XSL file: <?xml version=''1.0''?>
<xsl:stylesheet xmlns:xsl="http:///TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
In the above code, the function of the xsl:for-each element is to locate which elements in the XML document need to be displayed in the following template. The select attribute is used to define the element name in the source file. This syntax for specifying attributes is also called XML
Pattern, similar to the representation of a file subdirectory. The xsl:value-of element is used to insert the content template of child elements in the current level.
Because the XSL stylesheet itself is also an XML document, the beginning of the XSL file starts with an XML declaration. The xsl:stylesheet element is used to declare this as a stylesheet file. <xsl:template
The match="/"> statement indicates that the source document of the XML is in the current directory.
If you add an XSL stylesheet to an XML document, look at line 2 of the code below, and your browser can accurately convert the XML document to an HTML file. <?xml version="1.0" encoding="ISO8859-1" ?>
<?xml-stylesheet type="text/xsl" href="cd_catalog.xsl"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD> 3. XSL--Implementation on the Client
Solution
In the above chapter we have explained how XSL converts XML into HTML files. The method is to add an XSL stylesheet information to the head of the XML document and then let the browser perform the conversion process.
This method does a good job in most cases, but it won't be displayed correctly in browsers that don't support XML.
A better and more comprehensive solution is to use Javascript to implement XML to HTML conversion. However, using JavaScript must be supported by the following functions:
a. Allow Javascript to replace the browser for detailed detection;
b. Use different style sheets according to different needs and different browsers.
This is completely feasible for XSL. One of the goals of designing XSL is to allow one format to be converted into another, support different browsers, and support different user needs. The important task of future browsers is to perform XSL conversion work on the client side.
2. A specific example
Here is some code for an example of an XML document (cd_catalog.xml) mentioned above:
<?xml version="1.0" encoding="ISO8859-1" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
.
.
.
Here is the complete XSL file (cd_catalog.xsl): <?xml version=''1.0''?>
<xsl:stylesheet xmlns:xsl="http:///TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Note that the XML file has not been added to the XSL style sheet yet and has not been converted into an HTML file.
Here is the HTML code to implement the final conversion using JavaScript: <html>
<body>
<script language="javascript">
// Load XML
var xml = new ActiveXObject("")
= false
("cd_catalog.xml")
// Load the XSL
var xsl = new ActiveXObject("")
= false
("cd_catalog.xsl")
// Transform
((xsl))
</script>
</body>
</html>
Javascript is used in the above code. If you don't know how to write JavaScript, you'd better learn it specifically.
The first piece of code creates an object parsed by Microsoft Parser (XMLDOM) and reads the XML document into memory; the second piece of code creates another object and imports the XSL document; the last line of code converts the XML document into an XSL document and outputs the result to the HTML file.