DotNetNuke uses different kind of token based templates engines, for example it allows designers to create skins with plain html skins. Administrators and localization maintainer are able to create and update dynamic texts inside system messages. Token support is also included several inside modules, e.g. Text/Html or Newsletters.
Token based templates are not limited to flat set of fields; some modules are using them also to render collections of items.
Lorraine
showed some ways to pimp up the Announcement module. The Announcement module allows the definition of templates for header, item and footer.
I am going to reuse her example: Consider this table as an extract of the data used inside Lorraine’s blog:
Example data
|
ItemId
|
Title
|
Description
|
URL
|
|
1
|
Puppy Kinda
|
For pubs between 8 weeks and 6 months of age
|
http://www.server.com/pubbyKinda
|
|
2
|
Primary Paws
|
For Puppy Kinda graduates and young dogs from 4 months age
|
http://www.server.com/PrimaryPaws
|
|
3
|
Master Paws
|
An agility based program for dogs over one year old.
|
http://www.server.com/MasterPaws
|
Announcement offers tokens that map directly to its raw data: [ITEMID], [TITLE], [DESRCIPTION], [URL]. In addition it introduces some tokens calculated out of the raw data that offers further functionality like [EDIT] and [READMORE]. The [EDIT] token renders an edit pencil with a link to edit the current announcement item, [READMORE] displays a complete Read more… Link using the URL value.
Example set of templates
This compact example requires only a basic template setup.
| Header Template |
<table>
|
This is returned one time at the beginning |
| Item Template |
<tr>
<td>
<b>[TITLE] </b> -
[DESCRIPTION] &nsbp;
<i><a href="[URL]">Read more</a></i>
</td>
</tr>
|
The module repeats the Item tempate for all announcement items and replaces the [tokens] with the corresponding values.
Usually the pattern <a href="[URL]">Read more</a> will be replaced with the [READMORE] token.
|
| Footer Template |
</table>
|
finally the table gets closed |
XML and XSL-Transformations
I propose that everyone who is able to author token templates is also able to write his own basic XSL stylesheets. I am using the same data as before, I am only converting it to XML. XSL stylesheets have the same purpose as token templates: to transform data into a given layout. I will show the XSL needed to get the same result as before. Let us assume the Announcement module would offer also a plain XML view of its data. The table above would likely look like this:
<Module>
<Announcement>
<ItemId>1</ItemId>
<Title>Puppy Kinda</Title>
<Description>For pubs between 8 weeks and 6 months of age</Description>
<URL>http://www.server.com/pubbyKinda</URL>
</Announcement>
<Announcement>
<ItemId>2</ItemId>
<Title>Primary Paws</Title>
<Description>For Puppy Kinda graduates and young dogs from 4 months age</Description>
<URL>http://www.server.com/PrimaryPaws</URL>
</Announcement>
<Announcement>
<ItemId>3</ItemId>
<Title>Master Paws</Title>
<Description>An agility based program for dogs over one year old.</Description>
<URL>http://www.server.com/MasterPaws</URL>
</Announcement>
</Module>
This XML consists out of one single root element (Module) with has further elements inside. Each row here is represented by an element "Announcement". Each "Announcement" element contains the column cells as its elements.
Now here is the XSL Stylesheet that generated the same output:
| |
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
Each XSL Stylesheet starts with that declaration |
| |
<xsl:output method="xml" indent="yes" omit-xml-declaration ="yes"/>
|
followed by an output directive. I chose "xml" as method to get an XHtml compliant result. |
| |
<xsl:template match="Module">
|
Template that matches the root element |
| Header Template |
<table>
|
|
| |
<xsl:for-each select ="Announcement">
|
The loop: Iteration over all Announcements |
| Item Template |
<tr>
<td>
<b><xsl:value-of select ="Title"/> </b> -
<xsl:value-of select ="Description"/> 
<i><a href="{URL}">Read more..</a></i>
</td>
</tr>
|
The content of a cell element is either written as <xsl:value-of select="token"/>
or it is adressed as {token} if the value should be used inside a HTML attribute.
|
| |
</xsl:for-each>
|
End of loop |
| Footer Template |
</table>
|
|
| |
</xsl:template>
|
End of template |
| |
</xsl:stylesheet>
|
End of stylesheet |
Conclusion
I hope I was able to show that templates and XSL stylesheets are quite similiar, at least at this basic level. Writing a custom XSL stylesheet for example for an RSS feed isn't that much different.