Using XSLT to transform XML into HTML

It is getting to be more and more common for web services to product XML data as opposed to serving up fully fledged HTML. Client side applications are then responsible to take the XML data they requested and rewrap it into whatever formatting they want. XSLT is a sort of style sheet for taking a segment of XML data and converting it to another format. It is similar to CSS in several ways, but much more complex (and therefore much more powerful – and sometimes more annoying).

When I first bumped into XSLT I was immediately interested in its capacity to allow someone to enhance and simplify HTML. In much the same way that HTML got more readable when web developers started using CSS, it can be simplified even further by using XSLT. For instance, many CSS based design patterns require the creation of multiple unnecessary DIVs in order to generate a flexible button background. It is not uncommon to see the following instead of the old school way of flexible buttons via tables and corner images.

Click me!

Then, the CSS for the button class has background images assigned based on descendant DIVs and you create a button without including a bunch of images in the HTML. This is an improvement over traditional HTML/table buttons, but it has its drawbacks. Consider the fact that, in order for this button to be rendered correctly, you would need to remember to put exactly 6 child DIVs in your HTML.

If your designer wanted to spruce things up a bit, and add an extra image for a cool corner enhancer thing, you’d have to go find all the DIVs where class=”button” and then wrap the inner text in a SPAN or some equally mundane chore. Wouldn’t it be easier to define a new element altogether that just works (let’s call it COOL-BUTTON), and any changes to the way the cool button needs to be rendered in “real” html would just take care of themselves? What you need is a button “template” that gets applied to all your web pages when you use a COOL-BUTTON tag.

The COOL-BUTTON could be used like this:

Click me!

And somewhere you would have a template file somewhere that says:

 means
(contents here)

That is more or less what XSLT was made to do. Now, that I have talked it up, let me say that XML Style Sheets are not an oasis for web developers. They are actually kind of ugly, but powerful enough that it is worth knowing what they are and what they do so you can choose to use them when the time is right.

I decided to invent my own outline XML language that allows me to put together a simple outline, and then write an XSL file to convert the outline XML into viewable HTML using ordered lists. The outline I built looks like this.




  • First Heading
  • sub heading
  • point 1
  • point 2
  • another sub heading
  • point 1
  • point 2
  • sub heading
  • First Example
  • Second Example
  • Third Example
  • Second Heading
  • more
  • even more
  • Third Heading
  • Remember, this is XML not XHTML, so things might look a bit different. The first line is a DTD (document type declaration). Just saying “this is XML.” The second line says “format this XML using the outline.xsl style sheet” (outline.xsl is listed below).

    The outline xml I have defined here uses tags to wrap the whole page similar to the way tags wrap an entire html document. Inside the outline, you either have items (<li> elements) or sub sections (<sub> elements). Sub sections contain more items and subsections. You (the xml author) don’t have to worry about what kind of number system to use at each level of the outline, that is provided for you by the eXtensible style sheet. Nor do you have to worry about whether or not your designer uses tables or lists to accomplish displaying the elements (or something different altogether).

    In order for a browser to display this outline, it has to be converted to valid html. This is done by the browser – assuming it can find the style sheet. Here is the stylesheet I wrote to handle this:

    
    
    
    
    
    
    
    
    
    
    
    
  • The first thing you will probably notice is that this is not at all like CSS. This stylesheet language is valid XML. Personally, I think this is really gross. XML is a wonderful document markup language, and a beautiful language for defining hierarchical data. It is downright ugly for program control and looping, but someone thought XML would be a good language to write style sheets in, and here we are.

    The first two lines define the document type (basic DTD type stuff). The third line declares what sort of format our output is intended to be interpreted as (You have to say “this is HTML” or the browser can assume it isn’t). The “indent = yes” is a convenient way to tell the output stream to enforce proper indentation of sub elements — pretty cool.

    Lines 5 to 23 define one xsl:template element. The “match=’/’ “attribute says that the root node of the document (in this case ) should be reformatted to look like an html page with a few styles for our ordered lists. Line 19 tells it to take the stuff inside the root node (the body of the xml document) and apply templates to it, and insert it here.

    Lines 25 to 27 define another xsl:template element saying all first level li elements should be wrapped in H1 tags.

    Lines 29 to 33 say that any sub (no matter what level it is at) should just wrap things in an ordered list element.

    Lines 35 to 46 say that li elements that go deeper into the tree should be wrapped in smaller and smaller headers.

    You can view the results here
    Now, view the source for the resulting page. Notice it isn’t the HTML, it is the outline XML. Which means that the way I made it work isn’t even visible to the end user (unless they can read XSL files).

    So, what is this doing in a blog about databases? I’m glad you asked. Some people believe that XML is the database language of the future. For instance, the QuickBooks SDK passes data back and forth via XML. You could take a customer element directly from a QB request and use XSLT to make it viewable in a browser in whatever HTML format you want it to have. If nothing else, XSLT is an interesting language.

    XSLT could ultimately be used by someone to make a unified user interface markup language. You could define a markup language very similar to HTML that is more geared toward user interface programming rather that document formatting. Then, user interface designers would use the new language to design user interfaces, which could then be made viewable in a browser via one XSL style sheet, and viewable in an application framework designed to build forms based on the XML layout. It really is an interesting language, it opens the doors to all kinds of possibilities.

    Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

    Comments

    No comments yet.

    Leave a comment

    (required)

    (required)