Web-page generation using XSL (no server-side scripts)

• Sample data file, template file and the output HTML file ~ 1 Kb
• Download XSL Tool for this approach - 5.4 Kb

Introduction

This article proposes an approach to use XSL for web-page generation. Usually web-page generation is accomplished using server-side scripting languages. However, the approach proposed here is different from the server-side scripting languages. This approach can be compared to code-generation, wherein, the generation happens during the design-time and not every time the webpage is visited.

Background

Generally, people do publish a category of web pages which frequently require similar changes in various parts of the web page. However, every time the content of the web pages changes, or if the publisher decides to change the appearance of the web page, there is considerable amount of work involved. This approach makes the update, very easy with very little work and time.

Approach

Before going further with the approach, let us consider a web-page that we want to generate. Let us generate a web page, publishing a list of books that are available in a library and their details.

As per my earlier discussion, whenever a new book is added to the library or removed; or say when you want to change the appearance of the website (not just colors, for which CSS would do the job), the amount of changes you will have to do, is proportional to the number of the places in the web page, where this change has an impact. For example, consider the library web page which resembles this:

As per the above sample, adding a new book to the library requires at least four changes in the page. What if these changes are required in more books and that too on a big file? What if someone wants the count to be removed or moved? A logical thought would suggest that, most of the information in the four places are either calculated (like the number of books for a given category) or it is replicated in various places (like the author name, book name). The idea that I propose here is to neatly separate the presentation logic and the data, so that any changes to the data or any changes to the presentation do not affect the other, and thereby making it easy for the web developer to manage these pages.

For the above example, the XML data can be as follows:

<library>    
    <categories>
        <category>Technical Books</category>
        <category>Non-Technical Books</category>
    </categories>
    <books>
        <book>
            <name>Programming in C++</name>
            <author>Gerald</author>
            <publication>Prentice-Hall Publications
            </publication>
            <status>Available</status>
            <category>Technical Books</category>
        </book>
        <book>
            <name>XSL in 24 days</name>
            <author>Naveen</author>
            <publication>Prentice-Hall Publications
            </publication>
            <status>Not Available</status>
            <category>Technical Books</category>
        </book>
        <!-- other books' data -->
    </books>
</library>

Consider the sample XSL code, which would roughly generate the same kind of index as in our example:

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

<xsl:output method="text"/>
<xsl:template match="/">
<xsl:text>&lt;h1&gt;Library&lt;/h1&gt;&lt;ul&gt;
</xsl:text>
<!-- selecting all the categories -->
<xsl:for-each select="//categories/category"> 
    <xsl:text>&lt;li&gt;</xsl:text>
    <xsl:value-of select="."/>
    <xsl:text>&lt;/li&gt;</xsl:text>
    <xsl:text>&lt;ul&gt;</xsl:text>
    <!-- selecting all the books for the current category -->
    <xsl:for-each select="//books/book[category=current()]">  
        <xsl:text>&lt;li&gt;</xsl:text>
        <xsl:value-of select="name"/> 
        <xsl:text> by </xsl:text>
        <xsl:value-of select="author"/> 
        <xsl:text>&lt;/li&gt;</xsl:text>
    </xsl:for-each>
    <xsl:text>&lt;/ul&gt;</xsl:text>
</xsl:for-each>
<xsl:text>&lt;/ul&gt;</xsl:text>
</xsl:template>

</xsl:stylesheet>

The output HTML generated with the given data (XML) will be something like:

<h1>Library</h1>
<ul>
    <li>Technical Books</li>
    <ul>
        <li>Programming in C++ by Gerald</li>
        <li>XSL in 24 days by Naveen</li>
    </ul>
    <li>Non-Technical Books</li>
    <ul> <!-- other books -->
    </ul>
</ul>

Note that, all the HTML tags that we require in the output web page, has to be escaped using <tag_name> to avoid confusing the XSL interpreter.

The code and the output are almost of the same size, since the code seems more complex, you should not be surprised about the need for such an approach. This will be helpful when you have more number of books. You should be happy that the same code is going to work, irrespective of the number of books in the library. You can create an index for 100 books within a second.

How to apply XSL? Any tools?

Some of you, who are new to XSL, might have this question in mind, about how to apply the XSL, once the XMLs are ready. I have a list of ways to do this:

1. Use the sample tool (Apply XSL), that I have attached with this article. I wrote this specifically for this purpose. I am using this to update my web page. Currently I am not planning to distribute the source for this tool. So only the binary is attached.
2. There are lots of freeware available, for XSL transformations.
3. You may write code using VC++ on MS XML, to do this.

Apply XSL tool

The snapshot reveals that there is nothing special, I should tell about the usage of this tool. It's only for this!! The tool is built on .NET Framework version 1.1, so you would need this version of .NET to execute this:

Moral of the story

As this is an approach, I don't intend to write an XSL template, that provides an exact resemblance to my first library example. However, I am sure, that this sample code would drive you to extend the template and appreciate the robustness of this approach in generating web pages. The more interactive the work is, the more is the benefit we get out of it.

Practical example

This approach has been implemented in my website and it is really helpful to me to update my website. I can drastically change my web page, in just few clicks. Most of the pages are generated using XSLs. The source for the XSLs used to generate the web pages is available through links in the corresponding pages. Visit here.

Disclaimer

All that is proposed in this approach is definitely possible using server-side scripting. I do not claim that, "it is possible only through this approach". However, this is a cheaper way of doing things, when the pages are not really that dynamic to be generated every time a web page is visited. This approach does not require any extra-ordinary scripting language/database support on the server side.