Transforming RSS into HTML and WAP II (1/2) - exploring XML

Transforming RSS into HTML and WAP II

Continuing from where we left off with the last column, we turn to two major aspects of XSL style sheets:

Parameterization of the formatting process
Creation of different output formats from the same input source

Parameterization

The XSL specification of the World Wide Web Committee (W3C) allows for easy addition of runtime parameters to the formatting process:

"A top-level xsl:param element declares a parameter to the stylesheet; XSLT does not define the mechanism by which parameters are passed to the stylesheet."

Different implementations have different ways of specifying stylesheet parameters. The IBM alphaworks XSL processor LotusXSL has a start script with a special param command line parameter to pass them in. A programmatic way also exists using the method ApplyXSL.setStylesheetParams(XSLProcessor) directly from Java.

Let's modify last column's XSL style sheet for rendering RSS into plain HTML so that it recognizes the same parameters as my RSSViewerApplet:

Name	Type	Description
box.foreground	int	box foreground color
box.background	int	box background color
box.border	int	box border width
title.foreground	int	title foreground color
title.background	int	title background color
title.foreground.mouseover	int	title foreground color on mouse-over
title.background.mouseover	int	title background color on mouse-over
title.font.family	String	title font family
title.font.size	int	title font size
title.font.style	String	title font style
item.foreground	int	item foreground color
item.background	int	item background color
item.foreground.mouseover	int	item foreground color on mouse-over
item.background.mouseover	int	item background color on mouse-over
item.font.family	String	item font family
item.font.size	int	item font size
item.font.style	String	item font style

First we need to add xsl:param parameters for the variables above:

<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="https://www.w3.org/XSL/Transform/1.0">
  <xsl:output method="html"/>
  <xsl:param name="box.foreground">black</xsl:param> 
  <xsl:param name="box.background">white</xsl:param> 
  <xsl:param name="box.border">3</xsl:param> 
  <xsl:param name="title.foreground">black</xsl:param> 
  <xsl:param name="title.background">white</xsl:param> 
  <xsl:param name="title.foreground.mouseover">white</xsl:param> 
  <xsl:param name="title.background.mouseover">black</xsl:param> 
  <xsl:param name="title.font.family">Helvetica, Arial, sansserif</xsl:param> 
  <xsl:param name="title.font.size">12</xsl:param> 
  <xsl:param name="title.font.style">bold</xsl:param> 
  <xsl:param name="item.foreground">black</xsl:param> 
  <xsl:param name="item.background">white</xsl:param> 
  <xsl:param name="item.foreground.mouseover">white</xsl:param> 
  <xsl:param name="item.background.mouseover">black</xsl:param> 
  <xsl:param name="item.font.family">Times, serif</xsl:param> 
  <xsl:param name="item.font.size">10</xsl:param> 
  <xsl:param name="item.font.style">italic</xsl:param>

The parameter name can be any literal. I borrowed the dotted notation in this case from the conventions for Java properties. The default value for the parameter is specified as a text element within the param tags.

Then we define an inline CSS stylesheet in order to attach the formatting information of the XSL parameters to the right HTML elements. We could also have chosen to add the formatting directly to the elements, but separating style from content is a good idea even in generated data:

  <xsl:template match="/">
    <HTML><HEAD><STYLE TYPE="text/css">
	.box { color: <xsl:value-of select="$box.foreground"/>;
	       background-color: <xsl:value-of select="$box.background"/>;
	}
	A.title:link { color: <xsl:value-of select="$title.foreground"/>;
	       background-color: <xsl:value-of select="$title.background"/>;
		   font-family: <xsl:value-of select="$title.font.family"/>;
		   font-size: <xsl:value-of select="$title.font.size"/>;
		   font-weight: <xsl:value-of select="$title.font.style"/>;
	}
	A.item:link { color: <xsl:value-of select="$item.foreground"/>;
	       background-color: <xsl:value-of select="$item.background"/>;
		   font-family: <xsl:value-of select="$item.font.family"/>;
		   font-size: <xsl:value-of select="$item.font.size"/>;
		   font-weight: <xsl:value-of select="$item.font.style"/>;
	}
	A.title:hover { color: <xsl:value-of select="$title.foreground.mouseover"/>;
	}
	A.item:hover { color: <xsl:value-of select="$item.foreground.mouseover"/>;
	}
	</STYLE></HEAD><BODY><TABLE CLASS="box">
      <xsl:attribute name="BORDER">
        <xsl:value-of select="$box.border"/>
      </xsl:attribute>
      <xsl:apply-templates/>
    </TABLE></BODY></HTML>
  </xsl:template>

The xsl:value-of directive extracts the value of the selected XSL stylesheet parameter and inserts it into the generated output. The referenced parameter must be prefixed by a dollar sign.

  <xsl:template match="channel">
    <TR><TH><A CLASS="title">
      <xsl:attribute name="HREF">
        <xsl:value-of select="link"/>
      </xsl:attribute>
      <xsl:value-of select="title"/>
      </A></TH></TR>
      <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="item">
    <TR><TD><A CLASS="item">
      <xsl:attribute name="HREF">
        <xsl:value-of select="link"/>
      </xsl:attribute>
      <xsl:value-of select="title"/>
      </A></TD></TR>
      <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="text()"/>
</xsl:stylesheet>

The rest of the stylesheet remains largely unchanged, only some class attributes were added in the right places to reference the corresponding style information in the CSS inline style. This way we have elegantly added similar customization features to the server-side RSS display tool as exists in the RSSViewerApplet.

Here are some examples with different parameters:

Default color scheme
Pretty in Pink (by popular demand ;-)

And finally the XSL stylesheet for converting RSS into HTML for your own experiments and adaptations. After collecting some feedback I intend to add it to my collection of tools.

Next we adapt the original style sheet for WML output.

URL: https://www.webreference.com/xml/column16/index.html
Created: Aug 01, 2000
Revised: Aug 01, 2000

Transforming RSS into HTML and WAP II (1/2) - exploring XML

Transforming RSS into HTML and WAP II

Parameterization

Find a programming school near you