The aim of this lab is to get you familiar with XML, DTDs, XML Schema, CSS and XSLT.
It will be a big help if you take an hour or two to work through some of the tutorial exercises at: http://www.w3schools.com/css/ and http://www.w3schools.com/xsl/. The CSS tutorial there has a very nice live testing setup, but don't spend all your time there: look at the XSLT tutorial as well. You will probably want to go back to these very valuable resources again and again.
The other preparation you will find very useful is to look at the source code for the examples I spoke about in lectures. You can download it all here as a tarball: catalogue.tar.gz.
You will need a standards-compliant web browser like Firefox or Mozilla to view XML, HTML and CSS. Internet Explorer probably can't do everything you need for this lab.
You will need a text editor for creating and editing XML, CSS, XML Schema and XSLT files. Emacs and Kate are both good, but feel free to use whatever editor you like. Some editors understand a little about XML syntax and can help you with highlighting and matching braces etc.
You will need to use the following command line programs:
for parsing and validating XML files, and
to perform XSLT transformations.
It will help greatly if you read the manual pages for both of those commands before you start working with them.
Write an XML document that stores the following payroll information:
| Name | Job | Department | Salary |
|---|---|---|---|
| John Mason | Programmer | Engineering | $60,000.00 |
| Mary Calwell | Designer | Marketing | $70,000.00 |
| Peter Buckshaw | Designer | Human Resources | $60,000.00 |
| Peter Wheathead | Administrator | Engineering | $45,000.00 |
| Elaine Gardener | Project Coordinator | Marketing | $100,000.00 |
| Bill Armstrong | System Analyst | IT Services | $80,000.00 |
| Mark McGregor | Salesperson | Marketing | $60,000.00 |
| Maria Cortez | Programmer | IT Services | $60,000.00 |
Think about the different possible structures for the XML document. (Hint: One aspect of this is choosing whether a particular piece of data should be an attribute or a child element.) If you really want to get the most you can out of this lab, repeat all the remaining questions with two or more alternative different XML structures for this data.
Use xmllint to check that your XML file is well-formed before you move on to the next question. If your XML file is called payroll.xml, then you can check that it is well-formed as follows:
xmllint --noout payroll.xmlMake two copies of your XML file - one for validating against a DTD and another for validating against a Schema.
Write a DTD for the above document and then use xmllint to validate your document against the DTD. For example, if your XML file is called payroll.xml and your DTD is in payroll.dtd then you can check that the XML file conforms to the DTD by typing:
xmllint --noout --dtdvalid payroll.dtd payroll.xml
Write an XML Schema for the above document and use xmllint to validate your document against the schema. For example, if your XML file is called payroll.xml and your Schema is in payroll.xsd then you can check that the XML file conforms to the Schema by typing:
xmllint --noout --schema payroll.xsd payroll.xml
To get xmllint to validate your XML file against your schema, you need a whole lot of namespace-related attributes attached to the root element in your XML file. For example, if your XML file is payroll.xml and your schema is in payroll.xsd, in your comp3410/lab1 directory, then your root element should look like:
<payroll xmlns="file:///students/u1234567/comp3410/lab1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="file:///students/u1234567/comp3410/lab1 payroll.xsd">
and this has to match up with the following namespace-related attributes on the root element of your schema:
<schema xmlns="http://www.w3.org/2001/XMLSchema" xmlns:payroll="file:///students/u1234567/comp3410/lab1" targetNamespace="file:///students/u1234567/comp3410/lab1" elementFormDefault="qualified">
Then you have to put the prefix payroll: in front of all the element names you're declaring in your schema. (Alternatively, you could put a prefix xsd: in front of all names belonging to the XML Schema language, and omit them in front of your names, and change the two xmlns declarations accordingly...)
Write a CSS file for your XML document, and view it in Firefox with the CSS styling applied. Also experiment with hiding some data by using display: none; in the relevant CSS rule.
Write an XSLT stylesheet to transform the XML document you created in Question 1 into a simple HTML document. Make each person's name a level 2 heading, and format their other information as a bullet point list.
Do the transformation and view the resulting HTML file in a browser. (Use the clean version of your XML file, not the one with all the namespaces you added in order to get it to validate against your XML Schema.)
If your XML file is payroll.xml and your XSLT stylesheet is payroll-to-html.xsl then the command line you need is
xsltproc payroll-to-html.xsl payroll.xml
This will send output to the terminal. Check carefully that all of your transformations are being applied. If you end up with some element content that doesn't have the HTML tags around it that you wanted, then something is going wrong.
When it seems to be working well, redirect the output to an HTML file by using the -o option:
xsltproc -o payroll.html payroll-to-html.xsl payroll.xml
Now view this HTML file in your web browser.
(Hint: If you're really having trouble getting the transformation to work, try parsing your XSLT stylesheet with xmllint to check that it is well-formed. Remember that an XSLT stylesheet must itself be well-formed XML.)
Now modify your XSLT stylesheet to sort the data by name, and then view the resulting HTML in a browser. Do the same again, sorting first by department and then by salary. Now modify your stylesheet to produce an HTML table, just like the one on this page that you got the data from.
Write a CSS file to apply styling to the HTML you created with your XSLT transformation. Modify your XSLT stylesheet so that the resulting HTML links to this CSS file, run the transformation again, and view the result in a browser. Now modify the CSS and reload the HTML document in the browser until you're happy with the way it looks.
Now go back to Question 1, change your choice of XML structure for the data, and repeat. Think about what effect changing the XML structure had on how easy or difficult it is to describe the data model with a DTD or XML Schema, and how easy or difficult it is to transform the file with XSLT. Also, what happens to attributes when you try to view the XML file directly in the browser with CSS styling?