| home / experts / xml / column16 |
|
|
|
Continuing from where we left off with the last column, we turn to two major aspects of XSL style sheets:
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="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.
| ||||||||||||||||||||
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
