Although it is easy to view the XML file in the browser, nowadays users expect to see documents nicely formatted. Your raw XML data can be formatted with the Extensible Stylesheet (XSL) to meet users' expectations. Because the XML document does not contain any formatting instructions, you should prepare a stylesheet that can be applied to your document to make it visually more appealing to the user. You are not limited to one stylesheet. By creating more than one stylesheet, you can present the same XML document to various users formatted differently. The XSL document is just another XML document that contains HTML formatting instructions as to how to format the elements in your XML document.
In the following exercise, you will learn how to create a stylesheet for the Courses.xml file that we created earlier in this chapter. When you have completed this exercise, you will have an XSL stylesheet that transforms an XML document into HTML. Like any XML document, the XSL stylesheet can be created using a text editor such as Notepad.
The following exercise demonstrates how to create an XSL stylesheet to render XML documents into HTML.
1. Open Notepad and type the following line: <?xml version="1.0"?>
Because the XLS document is just another XML application, it must contain the XML declaration, which states that this is an XML document and specifies the version number of the latest XML specification. Note that the declaration line must be entered in lowercase.
2. Type the following declaration line:
This line of the XSL code specifies the namespace used by the stylesheet.
3. Now enter HTML tags to change the browser's title bar: <HEAD>
<TITLE>VBA Course Schedule</TITLE> </HEAD>
This will cause the text "VBA Course Schedule" to appear in your browser's title bar when you open the formatted XML document.
4. Let's make the browser background more colorful: <BODY bgcolor="yellow">
5. It's a good idea to place the same title in the browser's title bar on the web page. Let's make it stand out, centered on the page:
<STRONG>VBA Course Schedule</STRONG><P/>
The <P/> tag will put a blank line between the page title and the table that you will write next.
6. Start writing out the table that you want to display. The table will obviously need headings, so we will begin with the following code:
<TABLE border="1" cellPadding="4" cellSpacing="2"> <TR>
<TH>Course Id</TH> <TH>Course Title</TH> <TH>Start Date</TH> <TH>No of Sessions</TH>
This HTML code segment will place a table on the web page when it's finished. Notice there is no closing </TABLE> tag, as we are not yet finished.
7. Now the tricky part begins, as we will need to refer to the XSL namespace to use one of its formatting commands: for-each. Write the following instruction:
The above line tells the XML processor to apply the same formatting to every <Course> element within the <Courses> element. Having said this, we will proceed to write out the remaining part of our table and place the actual data in it.
8. Type the following lines of code to complete the table: <TR>
<TD><xsl:value-of select="@ID"/></TD> <TD><xsl:value-of select="Title"/></TD> <TD><xsl:value-of select="Startdate"/></TD> <TD><xsl:value-of select="Sessions"/></TD>
The above code segment uses the HTML <TD> tag to place the actual data in a table row for each element, as specified in the <xsl:for-each select="Courses/Course"> statement (see step 7). The formatting element <xsl:value-of> returns the actual value of the specified element. The select attribute uses the XML Path Language (XPath) expression to locate the child elements to be processed. The tag <xsl:value-of select="Title"/> tells the XSL processor to find the Title element (here, "Title" is the XPath expression) and replace it with its value. If an expression refers to an attribute rather than an element, you need to prefix the attribute name with the @ character in order to read its value, as in the following:
The tag <xsl:value-of> returns the content of the specified tag. It gets replaced with the actual data when the document is presented in the browser. After reading all the data elements, you must not forget about the ending tag to close the loop:
and the ending tag to close the table:
Was this article helpful?