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

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

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:

NameTypeDescription
box.foregroundintbox foreground color
box.backgroundintbox background color
box.borderintbox border width
title.foregroundinttitle foreground color
title.backgroundinttitle background color
title.foreground.mouseoverinttitle foreground color on mouse-over
title.background.mouseoverinttitle background color on mouse-over
title.font.familyStringtitle font family
title.font.sizeinttitle font size
title.font.styleStringtitle font style
item.foregroundintitem foreground color
item.backgroundintitem background color
item.foreground.mouseoverintitem foreground color on mouse-over
item.background.mouseoverintitem background color on mouse-over
item.font.familyStringitem font family
item.font.sizeintitem font size
item.font.styleStringitem font style

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

<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://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:

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.

http://www.internet.com

Produced by Michael Claßen
All Rights Reserved. Legal Notices.

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