James Skemp's StrivingLife

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.

In part five we started making the XML document pretty, in modern browsers, by using CSS. In part six we were able to mimic this look using an XSLT file instead.

Overview

However, while we've been able to mimic the CSS output, what we really want to do is make it better.

To do this we'll want to hide elements that are empty, such as when a game hasn't been sold, as well as change the sort order from according to how they're entered in the XML file, to one based upon game title.

Using XSLT to sort the content

Adding a new sort order is super easy. All we need to do is add an xsl:sort immediately after our xsl:for-each.

So, find the following line.

<xsl:for-each select="game">

Now add this line immediately after it.

<xsl:sort select="title" data-type="text" />

If we wanted to add another sort, we could simply add another line, like the above, after this addition. Pretty simple, huh?

Using XSLT to hide empty elements

Now that we're sorting, we'll attempt to hide any elements which are empty, which in this case means the sell data, and the notes.

First, we'll use conditional logic to hide the sell data, depending upon whether own is equal to no or yes.

<xsl:if test="own = 'no'">
   <div style="margin-left:1em;">
      Sold <xsl:value-of select="sell/date" />
      for $<xsl:value-of select="sell/price" />
   </div>
</xsl:if>

As you can see, we've added two new lines. On the first line we've added an if statement. If the value of own is 'no', we'll display the sell data. Otherwise, we won't.

For notes, we can do something similar.

<xsl:if test="notes != ''">
   <div style="font-style:italic;margin-left:1em;">
      Notes: <xsl:value-of select="notes" />
   </div>
</xsl:if> 

Here we're checking to see if notes is empty, and if it is not, we're displaying the notes.

Where we're at now

Now we've got an XML document, with XSLT, that displays more like we'd expect.

Next time ...

Even though I was going to go over it here, I decided to hold off adding additional games until the next part. In that part I'll be adding some additional games, from the Playstation 2, and changing the display so that we can easily separate them out.

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.

Finally, in part five we started making the XML document pretty, in modern browsers, by using CSS.

Overview

Now that we've used CSS to stylize our XML document, and discovered some of the limitations of doing so, we'll use XSLT (Extensible Stylesheet Language Transformation) to modify the display.

As with the DTD and CSS creations, we'll need to make a modification to the XML document, as well as create the XSLT itself. 

The XML change

To begin, we'll need to remove the line we added last time, that points to the CSS file, and replace it with one that points to the XSLT file.

<?xml-stylesheet type="text/xsl" href="http://strivinglife.com/files/xml_creation/part6.xslt"?>

Obviously, update the location accordingly.

The XSLT

Let's begin by creating an empty file at the above location.

If we do so and load up our XML file, we'll see that this time there is an error when we try to display the file. This is because the XSLT must contain at minimum three lines.

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
</xsl:stylesheet>

If you try viewing the XML file now you'll be presented with the XML contents, one piece of text immediately after another. This is similar to what we saw before, when we used an empty CSS file.

This doesn't help us too much, so we'll try to tweak this a bit.

In order to do so, we'll add the following between the second and third lines of the above.

<xsl:template match="/">
   <xsl:value-of select="/games/game/title" />
   <xsl:value-of select="/games/game/system/console" />
   <xsl:value-of select="/games/game/system/version" />
   <xsl:value-of select="/games/game/purchase/date" />
   <xsl:value-of select="/games/game/purchase/price" />
   <xsl:value-of select="/games/game/purchase/place" />
   <xsl:value-of select="/games/game/sell/date" />
   <xsl:value-of select="/games/game/sell/price" />
   <xsl:value-of select="/games/game/own" />
   <xsl:value-of select="/games/game/notes" />
</xsl:template>

If you view the XML file now, you'll see the information for the first game, MotorStorm. This somewhat helps, but not completely.

What we really need to do is loop through each game. Of course, there is a way to do this.

<xsl:template match="games">
   <xsl:for-each select="game">
      <xsl:value-of select="title" />
      <xsl:value-of select="system/console" />
      <xsl:value-of select="system/version" />
      <xsl:value-of select="purchase/date" />
      <xsl:value-of select="purchase/price" />
      <xsl:value-of select="purchase/place" />
      <xsl:value-of select="sell/date" />
      <xsl:value-of select="sell/price" />
      <xsl:value-of select="own" />
      <xsl:value-of select="notes" />
   </xsl:for-each>
</xsl:template>

Updating and running with this, we see that we're now seeing what we got when we ran it with just the first two, and the last, lines.

Using the previous examples as a guide, we can get an idea of what we're doing.

First, we're using xsl:template match="games" to jump to the 'games' element. Next, for-each 'game' element, we're displaying the value of the elements listed.

However, once again we're without proper spacing.

First, we'll use divs and spans around the elements that we'll want to style.

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
 <xsl:template match="games">
  <div>
  <xsl:for-each select="game">
   <div>
    <span><xsl:value-of select="title" /></span>
    <xsl:value-of select="system/console" />
    <xsl:value-of select="system/version" />
    <div>
     <xsl:value-of select="purchase/date" />
     <xsl:value-of select="purchase/price" />
     <xsl:value-of select="purchase/place" />
    </div>
    <div>
     <xsl:value-of select="sell/date" />
     <xsl:value-of select="sell/price" />
    </div>
    <div>
     <xsl:value-of select="own" />
    </div>
    <div>
     <xsl:value-of select="notes" />
    </div>
   </div>
  </xsl:for-each>
  </div>
 </xsl:template>
</xsl:stylesheet> 

Refreshing our XML file, we see that some elements are beginning to become styled. We can complete the look by adding in the actual style information.

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
 <xsl:template match="games">
  <div style="border:1px dashed #999;margin:.25em;padding:1em;">
  <xsl:for-each select="game">
   <div style="margin:1em 0;">
    <span style="font-size:120%;font-weight:bold;"><xsl:value-of select="title" /></span>
    &#160;<xsl:value-of select="system/console" />
    &#160;<xsl:value-of select="system/version" />
    <div style="margin-left:1em;">
     <xsl:value-of select="purchase/date" />
     &#160;<xsl:value-of select="purchase/price" />
     &#160;<xsl:value-of select="purchase/place" />
    </div>
    <div style="margin-left:1em;">
     <xsl:value-of select="sell/date" />
     &#160;<xsl:value-of select="sell/price" />
    </div>
    <div style="margin-left:1em;">
     <xsl:value-of select="own" />
    </div>
    <div style="font-style:italic;margin-left:1em;">
     <xsl:value-of select="notes" />
    </div>
   </div>
  </xsl:for-each>
  </div>
 </xsl:template>
</xsl:stylesheet> 

Finally, we'll add in the text that we were adding in with before/after in the CSS file.

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
 <xsl:template match="games">
  <html>
  <head>
  </head>
  <body>
  <div style="border:1px dashed #999;margin:.25em;padding:1em;">
  <xsl:for-each select="game">
   <div style="margin:1em 0;">
    <span style="font-size:120%;font-weight:bold;"><xsl:value-of select="title" /></span>
    - <xsl:value-of select="system/console" />
    &#160;<xsl:value-of select="system/version" />
    <div style="margin-left:1em;">
     Bought <xsl:value-of select="purchase/date" />
     for $<xsl:value-of select="purchase/price" />
     at <xsl:value-of select="purchase/place" />
    </div>
    <div style="margin-left:1em;">
     Sold <xsl:value-of select="sell/date" />
     for $<xsl:value-of select="sell/price" />
    </div>
    <div style="margin-left:1em;">
     Still own? <xsl:value-of select="own" />
    </div>
    <div style="font-style:italic;margin-left:1em;">
     Notes: <xsl:value-of select="notes" />
    </div>
   </div>
  </xsl:for-each>
  </div>
  </body>
  </html>
 </xsl:template>
</xsl:stylesheet>

At this point the XML file displays very similar in IE 7 as it does in Firefox, as well as how it displays in Firefox with CSS (with the exception of some slight padding, which we could nonetheless remove if needed).

If you'd like, you can view the XSLT document using your browser, since it is also an XML file.

Where we're at

At this point we're at a very good place. We've used XSLT to transform the display of our XML document so that it appears pleasing to the eye, in your standard, modern, browser. While a little more bulky than just using CSS alone, we can add important textual elements to the display, that would be difficult to do using simply CSS.  

What we're still missing

However, we're still missing some very important things; we need to be able to hide elements, like the sell information if the game hasn't been sold, as well as a proper sorting order.

In part 7 we'll go ahead and look at a new XSLT function that will allow us to sort the order of the displayed elements. I'll also add in some Playstation 2 games, so we can look at a more advanced display.

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.