Incrementing and logic in XSL

I’ve been learning XSL for the design of the learning guide I mentioned in my last post. I just had a bit of a win with incrementing in the XSL! I searched the net far and wide and didn’t find anything that suited what I wanted in terms of incrementing, most things didn’t even work anyway.

The XML I’m transforming describes the content in terms of “sections”. The XSL transforms those sections into a jquery tabbed interface. So basically, I need the title attributes of the tab links, to match the id attributes of the div containers. I also need these to be unique for the jquery tabs to work. Thus, I wanted to increment the values.

Here’s a sample of the XML, just a simple example – an item is a module in the learning guide, it contains various information, part of which includes the actual ‘content’ for that module:

<itemContent>
  <section title="Start">
	<sectionContent>first section of this module</sectionContent>
  </section>
  <section title="Middle one">
	<sectionContent>content for middle section</sectionContent>
  </section>	
  <section title="Finish">
	<sectionContent>content for third section here</sectionContent>
  </section>	
</itemContent>

Then, the XSL that transforms and increments. I had it all around the wrong way initially, I was trying to use variables and addition, loops etc, to do my incrementing.. but really, all I had to do was identify the node position and use that as a parameter in my for-each loop!

<div id="tabs">
	<xsl:for-each select="itemContent/section">
		<xsl:param name="i"><xsl:number value="position()" /></xsl:param>
		<a href="#" title="Section_{$i}"><xsl:value-of select="@title" /></a>
	</xsl:for-each>
	<div class="clear"></div>
</div>

<xsl:for-each select="itemContent/section">
	<xsl:param name="i"><xsl:number value="position()" /></xsl:param>
	<div id="Section_{$i}" class="hiddencontent">
		<h3><xsl:value-of select="@title" /></h3>
		<xsl:copy-of select="sectionContent" />
	</div>
</xsl:for-each>

It works a charm and it renders like this in the browser:

Note the incrementing and matching title/id attributes..

Media-rich Learning Guide

We had this little problem last year – we really wanted SOMETHING to do an online study/learning guide with.. well not just ’something’, we wanted it to be media rich in that it is not just visually appealing but allowed all sorts of GUI features (like popups, tabs etc) so that it could have more media-rich content.

The reason at the time was because the course we were working on had SO many resources, from all over the place, and we thought it might be a good thing to bring everything together, in to context.  (and to make it look nice).

I started thinking of ideas for a GUI and realised one of my favourite interfaces would have to be iTunes!  The interface is called cover flow and it’s visually delicious to say the least.

This is the iTunes coverflow GUI, nice hey?

As it turned out, after some searching the net for Flash resources, I found this awesome Open Source Initiative Flash-based cover flow project.  The beauty of it, like the beauty of iTunes, is it basically gets all its data from an XML file.  So that got me thinking.

What if the learning guide was entirely in XML?  Well, why not.  You could request a course code in your web browser, a php page could parse your request to Flash, which then loads the XML learning guide menu in coverflow, and voila, ajax the content in to the page with each click in the flash cover-flow!

I modified the Flash-based coverflow to suite our purpose.  I made the initial course trial static, in that the content was being loaded from html files, and the course-specific XML only contained details on the course topics and titles etc.  Now however I’m working on the full deal, the entire learning guide in XML.  It’s all coming together rather nicely.

We've nick-named it the HLG (hypertextual learning guide). You select your study module from the coverflow menu, and all the content loads below via ajax. The content sits in the course XML, and the XSL handles the rendering of all the variations in that content. This example has some readings, but there could also be videos, podcasts, all sorts of stuff.

Learning XSL has been a highlight of the last week, I’m still quite a noob at it, but so far I’ve done some awesome things – I can handle all sorts of variations in the XML (which means variations in content) and render it on the page nicely – videos come up with a video icon and use the jQuery prettyBox plugin, documents come up with a document icon, abstracts have the abstract viewable via a jQuery clueTip plugin.. its all coming together.

I have some more work to do with the XML/XSL, but I think it will all go well. At the end of it, I'll basically have a single php file, that takes course code requests.. the page will talk to a library of standard resources like the images in the cover-flow menu, the background images, css, and javascripts. It'll then talk to the requested XML (via a php transform and XSL file) to get all the details and content.

Phase 3 will be doing an administration interface, to manage the XML.. ohh fun.