1. style sheet of XSL---XML
The HTML webpage uses a pre-defined identifier (TAGS), which means that all the tags have a clear meaning. For example, <p> is a new line However, XML does not have fixed identifiers. We can create the identifiers we need, so browsers cannot Parse them automatically. For example, <Table> can be understood as a table or a table. Due to the scalability of XML, there is no standard way to display XML documents.
To control the display of XML documents, it is necessary to establish a mechanism. CSS is one of them, but XSL (Extensible Stylesheet Language) is the preferred style language for displaying XML documents, it is more suitable for XML than CSS.
2. XSL --- not just a style sheet
XSL consists of two parts:
First, convert the XML document; second, format the XML document.
If you do not understand this, you can think like this: XSL is a language that can convert XML into HTML, a language that can filter and select XML data, a language that can format XML data. (For example, a negative number is displayed in red .)
3. XSL --- what can it do?
XSL can be used to define how XML documents are displayed. XML documents can be converted into HTML files recognized by browsers. Typically, XSL translates every XML element into an HTML element, to achieve this conversion.
XSL can add new elements to the output file, or move the elements. XSL can also rearrange or index data. It can detect and determine which elements are displayed and how much data is displayed.
4. display of XSL in ie5
Note: ie5.0 is not fully compatible with the latest XSL standard released by W3C. Because ie5.0 was released before the XSL standard was finalized. Microsoft has promised to fix it in ie5.5.
Ii. XSL Conversion
1. Convert XML into HTML
How does XSL convert XML files into HTML files? Let's look at an example. below is 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 use the following XSL file as an HTML template to convert XML data to an HTML file:
<? XML version = ''1. 0 ''?>
<XSL: stylesheet xmlns: XSL = "http://www.w3.org/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>
AboveCodeIn, the XSL: For-each element is used to locate which elements in the XML document need to be displayed according to 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 file subdirectories. The XSL: value-of element is used to insert the content template of child elements in the current level.
Because the XSL style sheet itself is also an XML document, the beginning of the XSL file begins with an XML declaration. XSL: the stylesheet element is used to declare that this is a style sheet file. <XSL: Template
Match = "/"> statement indicates that the XML source file is in the current directory.
If you add an XSL style table to an XML document, you can see the following code in line 2. 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>
Iii. XSL-implementation on the client
1. Javascript Solution
In the previous section, we have explained how XSL converts XML into HTML files. The method is to add an XSL style table information to the header of the XML document, and then let the browser execute the conversion process.
This method works well in most cases, but it cannot be correctly displayed in browsers that do not support xml.
A better and more comprehensive solution is to use JavaScript to convert XML to HTML. However, the following functions must be supported when using JavaScript:
A. Allow JavaScript to detect details in place of the browser;
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 conversion of one format to another, supporting different browsers and different user needs. An important task for browsers in the future is to execute the XSL conversion work on the client.
2. A specific instance
The following is part of the code in the above-mentioned XML document (cd_catalog.xml) Example:
<? 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>
.
.
.
The complete XSL file (cd_catalog.xsl) is as follows ):
<? XML version = ''1. 0 ''?>
<XSL: stylesheet xmlns: XSL = "http://www.w3.org/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 and has not been converted into an HTML file.
The following is the HTML code that implements the final conversion using javasript:
<HTML>
<Body>
<Script language = "JavaScript">
// Load XML
VaR xml = new activexobject ("Microsoft. xmldom ")
XML. async = false
XML. Load ("cd_catalog.xml ")
// Load the XSL
VaR XSL = new activexobject ("Microsoft. xmldom ")
XSL. async = false
XSL. Load ("cd_catalog.xsl ")
// Transform
Document. Write (XML. transformnode (XSL ))
</SCRIPT>
</Body>
</Html>
The above Code uses JavaScript. If you do not know how to write JavaScript, you 'd better study it.
The first code creates an object parsed by Microsoft Parser (xmldom) and reads the XML document into the memory. The second 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 an HTML file.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
