XML saves the UI

Build automated UIs with XML and XSLT

By Tony Sintes, JavaWorld.com, 03/16/01

I am developing an application where the UI must be done through a Web browser. The pages are in XML format, and I would like to create a graphical interface based on XML information.

For example, with the tags:

<ARTICLE>
   <TEXT>
        This is a test text and means nothing.
   <\TEXT>
   <IDEASGROUP>
       <IDEA> idea1 <\IDEA>
       <IDEA> idea2 <\IDEA>
       <IDEA> idea3 <\IDEA>
  <\IDEASGROUP>
<\ARTICLE>

I would like the user to see an interface like this:

This is a test text and means nothing.
  Ideas in article

Where Ideas in article is mouse-sensitive, and clicking on it with the mouse makes a menu to appear with idea1, idea2, and idea3 as items.

Can you help?

A while back in "Server-side XML-to-HTML translation" I touched on XML to HTML conversion using XSL.

In your case, I think a more practical example will help.

Take a look at the Open Source Development Network. You'll notice that the homepage contains boxes with headlines from Freshmeat, Linux.com, and NewsForge. Did you ever wonder how sites like this include headlines?

Well, Freshmeat, Linux.com, and NewsForge all publish their headlines in rss format. rss conforms to this XML DTD.

Suppose you want to run a process that downloads each rss feed and converts it to HTML for inclusion on a Webpage. You probably wouldn't want to do this every time someone accesses your pages. Instead, you would probably do it only once per hour and cache the result. However, I'll show you one way of doing the conversion.

Consider the following stylesheet:

<?xml version="1.0"?>
<xsl:stylesheet  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="rss">
    <table border="1">
    <xsl:apply-templates/>
    </table>
</xsl:template>
<xsl:template match="rss/channel">
<tr>
    <td>
        <a>
            <xsl:attribute name="href">
                    <xsl:value-of select="link"/>
                </xsl:attribute>
                <b>
                    <xsl:value-of select="title"/>
                </b>
            </a>
    </td>
</tr>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="rss/channel/link">
</xsl:template>
<xsl:template match="rss/channel/title">
</xsl:template>
<xsl:template match="rss/channel/description">
</xsl:template>
<xsl:template match="rss/channel/language">
</xsl:template>
<xsl:template match="rss/channel/copyright">
</xsl:template>
<xsl:template match="rss/channel/managingEditor">
</xsl:template>
<xsl:template match="rss/channel/webMaster">
</xsl:template>
<xsl:template match="rss/channel/image">
</xsl:template>
<xsl:template match="rss/channel/item">
<tr>
        <td>
            <a>
                <xsl:attribute name="href">
                    <xsl:value-of select="link"/>
                </xsl:attribute>
                <b>
                    <xsl:value-of select="title"/>
                </b>
            </a>
        </td>
        <td>
            <xsl:value-of select="description"/>
        </td>
</tr>
</xsl:template>
</xsl:stylesheet>

The above stylesheet takes each story and places it in a two-column table. You'll also notice that it uses the story title to link back to the page containing the story. In your case, you want to be a bit fancier about your output. Instead of transforming to a simple href you would probably want to write out some client-side JavaScript to build the menu. So your users will need to have a browser that supports JavaScript (and they'll need to have it enabled). I won't pretend to know JavaScript. If you need to learn JavaScript or would like a refresher check out: