(Note: for each example you will need to use your browser's back button to return to this page.)
The aim of this section is to show how the same XML document can be displayed in different ways. Firstly, though, an original document is required. Original document shows the document on which I based my XML file.
The information shown in the original table could be structured in many ways. One way is to take each individual item in the table and add to this the decade, dates and area (empire, church, britain). This is the structure used by the XML file in the examples here. This is shown in Example 1. However, with hindsight, it might have been better to have structured the document differently. A different structure would take each row of the table at a time (decade-by-decade). An example of this structure is shown in Example 2. Still another view would take each column at a time (area-by-area). The conclusion must be that careful thought is needed for structuring XML documents, particularly for repetitive data - as is the case here. A good parallel would be with the planning required before setting up a database.
All of the examples shown are well-formed. That is, they conform to the 'syntax' of XML. None of the examples have a DTD attached to check their validity. This was felt to be unnecessary for the small examples here. However, Example 1 shows that the XML is both well-formed and valid with this DTD included.
The main problem of using CSS directly with XML is that the document is displayed in the same order that it is written in the XML document. For instance, there are no options for sorting or for changing where the book information appears. The data also cannot be placed in a table. The result achieved in Example 3 looks like a table, but this illusion is achieved by the individual parts of each ITEM being displayed inline and with relative positioning. The CSS for exmaple 3 is shown here in Example 3a.
Another problem with CSS rendering of XML is that extra information cannot be added without changing the XML document. For example it is not possible to add 'headers' to the data in the table.
In order to use XSL each tag in the XSL file begins with <XSL:
Strictly speaking this is not necessary, but the visual aid is useful for showing that this is XSL and not a scripting language. The XSL file is shown here in Example 4a. I tried to produce the same 4 column table as shown in the original document. However, this proved rather difficult and I reached the conclusion that either scripting should be used or the XML structure should be changed. The result in Example 4 shows a simple table (this time it is a table) with each ITEM in a row.
The CSS information is stored inline for these examples, although it would be possible to have this as a separate document referenced through the XSL. The XSL doesn't actually display the XML, rather it 'transforms' it into HTML (which can be displayed in a browser). In fact, XSL is more correctly termed XSLT at present (XML Style Language Transformation) since the standard does not yet include presentation information - although it is in the working draft as a desirable feature (W3C Working draft). XSL's most desirable capability though is that of transformations. It is possible to transform one XML form to another. This would be useful if getting information from a database which needs to be given to another user in a different format. (XSLT is already a recommendation.) An example of this is shown on Microsoft's site - Translating Between Schemas. The transformation in Example 4a takes place by using HTML tags and the line: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
The line <xsl:apply-templates select="chronology/events"/>
does the work of inserting the information from the XML file dynamically. ITEM is selected with the <xsl: apply-templates select="item"> statement, which in turn calls for the individual parts of ITEM, and places them in cells within a table. View the XSL file here in Example 4a.
Example 4 also shows the ability of the display of XML to be manipulated with scripting. A sort function is declared and defined within the STYLE tag of the HTML. This reads and applies XSL's order-by feature using a key that is input as an argument. In order to use this sort function the user must click on the relevant link to display the table sorted by decade, area, description, start date or end date. This functionality would not be possible with HTML.
VML (Vector Markup Language) allows graphics to be drawn on a screen dynamically in the same way that data is displayed dynamically in Example 4. Not only can shapes be generated, but their size, shape-style, etc can be affected by what is read from the XML file. In this first example the start and end dates are used to produce a time line. The length of each line (horizontally) corresponds to the end date with the uneven line endings showing how the dates overlap.
Two more functions are included for this time line. The lines will change colour as the mouse moves over them. Unfortunately, the colour does not change back again. Also it would be more useful to display relevant information when the user clicks or double-clicks, but this would require scripting.
The second function is that of 'title'. This displays some text about each line in a 'tool tip' style if the mouse is held there for a moment. In this case the information gives the name, the type description and the dates. It should be noted that this is the first time the type description has been displayed. Description is an attribute of tag TYPE and required the referencing style "type/@descr" to obtain the result.
It would have been good to have included text on each line. However, this again would require scripting. Extra space between each line was added using the HTML tag <br>. The excess space at the start of the time line could not be reduced without some sort of scripting or direct VML manipulation, to reduce the size of the numbers being input.
This example uses a different shape to display the information in the XML file. Rounded rectangles are used with text boxes displaying most of the information. The type description is again obtained through a 'tool tip' and the boxes change colour when the mouse passes over. The size of the box corresponds to the end date.