Using XML Web Services in Traditional ASP - Formatting the Data Using XSL

(Page 3 of 4 )

There is not much point in using this information in its raw form on your web page; it means nothing to the average person looking at your website. What we need to do is format it in a presentable way. To do that we need to create an XSL (Extensible Style Language) file.

The XSL file will take the data out of the XML we are given by Flickr and format it in HTML to however we want it to look. It does not matter about new data or different data in the XML we are given, the XSL file will dynamically format whatever data we have.

We will create our XSL file in notepad (or your favorite text editor), so create a new blank document and save it as flickr-sets.xsl. Into it put the following: 

<?xml version="1.0" ?>

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

<xsl:output method="html" omit-xml-declaration="yes" indent="yes"/>

<xsl:template match="*">

<xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>

<xsl:for-each select="photoset/photo">

<td align="center" valign="top"><a>

<xsl:attribute name="href">http://flickr.com/photos/beakersoft/<xsl:value-of select="@id" /></xsl:attribute>

<img>

<xsl:attribute name="src">http://farm<xsl:value-of select="@farm"/>.static.flickr.com/<xsl:value-of select="@server"/>/<xsl:value-of select="@id"/>_<xsl:value-of select="@secret"/>_t.jpg</xsl:attribute>

<xsl:attribute name="border">0</xsl:attribute>

<xsl:attribute name="title"><xsl:value-of select="@title" /></xsl:attribute>

</img>

<br/><a>

<xsl:attribute name="href">http://www.flickr.com/photos/beakersoft/<xsl:value-of select="@id" /></xsl:attribute>

<xsl:value-of select="@title" />

</a>

</a></td>

<xsl:if test="position() mod 7 = 0">

<xsl:text disable-output-escaping="yes">&lt;/tr&gt;&lt;tr&gt;</xsl:text></xsl:if>

</xsl:for-each>

</xsl:template> 

The first three lines are just the start of the file, telling anything using it what version of XML/XSL it is. The fourth line tells the calling application what the XSL is going to return, in our case HTML to go back into the browser.

Next we start our template (you can have more than one in your file), and tell it to return to us all results from the XML, by using the match="*" attribute. Next we are going to start looping through our data, using a for-each loop. Using the SELECT attribute, we are navigating to the first photoset/photo node. This is the point we want to start from in the XML file.

In a style sheet, you can put in valid literal HTML tags (if you are outputting HTML). This just outputs straight HTML to the browser and has nothing to do with the data in the XML file. On line eight we are creating a new TD and opening a hyperlink tag into which we will put data from our XML input file.

Now, we want to access something in the XML file, so line 10 starts with a "<xsl:attribute name=href>" tag. The start of this tag is the URL to the root of where your photos are on flickr, in my case it's http://flickr.com/photos/beakersoft/, but yours will be different. After the root URL, we use the <xsl:value-of select="@id" /> section to get the id of the picture.

The important part here is the select="@id" section of the tag. This tells the XSL to get the 'id' tag of the current record from the XML file, and write it out here. This forms the HREF tag of the HTML, so we can now click on a link that will take us to the picture on Flickr.

Next we are going to display the thumbnail picture from Flickr on our page. We start off by writing a normal <img> start tag out. Then we are going to use four fields from the XML file to build the actual source path to the image we are going to display. Start off by opening the scr tag, and hard code in the start of the URL (in this case it's http://farm), then extract the server farm out of the XML file using the  <xsl:value-of select="@farm"/> part. As before when we got the id of the photo to build the link, this is getting the farm information off the current record.

We build the rest of the image source in a similar fashion, by getting the server, id and secret information off the field. Around this we hard code in the rest of the source, including _t.jpg that is going to give us the thumbnail version of the picture Flickr is holding. Before closing the image tag, we make the image have no border by setting its border property to 0, and using the title field from the XML, we set the name tag of the picture. The title field contains the name you gave the picture in Flickr.

After that we can then close the image tag and the HREF tag. We are now going to put the image's name underneath the picture. So we put in an HTML line break, and using the id and title fields of the current record in our XML file we create a link with the name of our picture. We then close the HREF and the table data tag.

Because we only want a certain number of photos showing per table row, we then have a small chunk of logic in the XSL. This is the line containing the  <xsl:if test="position() mod 7 = 0"> line. This is opening up an if block, which checks to see if the current possession in the XML file is divisible by 7. If it is, we close the current table row tag, and open a new one, then write a </xsl:if> tag to close the if statement. This is like the end if in normal programming.

We then close the for/each tag we started at the top of the file (so it will loop to the next record at this point), and then finally close our XSL template tag.

Next: Putting it all Together >>
 

More ASP.NET Articles
More By Luke Niland

Comments On: Using XML Web Services in Traditional ASP

· if server.CreateObject("microsoft.xmlhttp") is used in asp, pages can seem to hang...   >>> Post your comment now!