XML creation: Part 5

• December 29, 2007
• James Skemp
• tutorials / guides

In this guide, I'll be creating an XML file to store the Playstation games I own, and ultimately make the XML file 'pretty' for Web browsers. I've done this in the past, with my vehicle gas XML document.

Last time ...

Up until now we've decided what we want to store, and how we want to store it, in an XML file.

Then, in part three, we actually added some of the data we want to store.

In part four, we made the XML file valid by associating a DTD.

Overview

As with the DTD, there are two things we need to do to make our XML file display differently, using CSS.

First, we'll need to make a quick modification to the XML file, followed by actually creating the CSS document.

I'll be assuming that you know CSS, so I won't be going into it too much. As they always recommend when it comes to these things, feel free to play around with the code on your own.

The XML addition

To begin, we'll need to add a single line to the XML document itself.

Immediately after the second line, which begins with <!DOCTYPE , add the following line, correcting the URL as necessary.

<?xml-stylesheet type="text/css" href="http://strivinglife.com/files/xml_creation/part5.css"?>

If you're familar with HTML, this is nothing new to you. Basically we just need to tell the parser, whether it be browser or something else, what styles should be used for this document.

The CSS document

Let's begin by creating an empty CSS file at the location previously specified.

If we do so and load up our XML file, we'll see that the text runs together. Unfortunately, this isn't going to work.

Since I'm assuming you're familar with CSS, I can say that you may be aware that browsers automatically add certain styles to elements in HTML files. For instance, the head element does not display, which includes the title element.

You can give certain elements, like paragraphs - p - certain styles, by doing something like the following.

p {
   margin:10px 0;
}

For our new CSS file, instead of using 'p', we'll be using the names of our own elements.

So, to get these on separate lines, we could start with something simple like the following.

game {
  display:block;
}

Now each of our individual games is on its own line.

We can add a number of other styles to make the document a little more accessible.

games, game, purchase, sell, own, notes {
 display:block;
}
games {
 border:1px dashed #999;
 margin:.25em;
 padding:1em;
}
game {
 margin:1em 0;
}
title {
 font-size:120%;
 font-weight:bold;
}
purchase, sell, own, notes {
 margin-left:1em;
}
notes {
 font-style:italic;
}

title:after {
 content:" -";
}
price:before {
 content:"for $";
}
purchase date:before {
 content:"Bought ";
}
purchase place:before {
 content:"at ";
}
sell date:before {
 content:"Sold ";
}
own:before {
 content:"Still own? ";
}
notes:before {
 content:"Notes: ";
}

This gives us a little cleaner output/display, which we can view in our browser.

However, because we're using some advanced CSS features, not all browsers will display this the same (try Firefox 2 for the before/after functionality).

In fact, this is one of the major problems with relying on CSS-only. Since we really want to display more text than what is contained within the XML document, as well as conditional logic, CSS can't provide all we need.

For instance, I can't hide the sell data if there is no data, nor only display the notes if there is notes. I also can't change the sorting order from how it currently is, which is based solely on how they're entered into the document, to something sorting based on, for instance, the title. For these features, we'd have to look at a server- or client-side language that could handle this.

Next time ...

Next time we'll look at using XSLT (that's Extensible Stylesheet Language Transformation) to display our data, which will allow us to do a bit more with how, and what, we're displaying.

• xml