Using XML and XSLT to Personalize a Web Site Part 4: Dynamic Style Sheets and User Customized Layout
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Changes to the Style Sheet
In Part 3, we included the interface elements as part of the main template and then included the content with a single call to xsl:apply-templates. This call selected the root element, content, and from there all of the content flowed into place. Now, however, we're taking more control over the process. Changes are shown in bold:
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
<head>
<title>Primary Outpost</title>
<style type="text/css">
* { font-family: arial, helvetica, "sans serif" }
td { font-family: arial, helvetica, "sans serif"; font-size: 8pt }
.blurb { border: 1px solid green;
font-size: 8pt;
width: 90%;
padding: 10px; }
.blurbcell { text-align: center;
padding: 10px; }
a { text-decoration: none;
color: green; }
.headline { width: 100%;
text-align: center }
.navlinks { background-color: #EEEEEE }
.gossipcell { font-size: 10pt; }
.admincell { text-align: center;
font-size: 8pt; }
.bottomrow { border-top: 2px solid black;
margin-top: 50px }
.rightcell { border-left: 1px solid black;
padding-left: 10px;
vertical-align: top }
</style>
</head>
<body style="text-align:center">
<a href="main.asp"><img src="/images/logo.gif" border="0" alt="Primary Outpost Logo"
height="67" width="496" /></a>
<table>
<tr><td colspan="2" class="blurbcell">
<div class="blurb">
Welcome to Primary Outpost, your one-stop shop for all
the latest in science fiction and fantasy news. Don't forget
to check out <a href="#">Save Our Shows</a>, in the news
section. Your voice counts!
</div>
</td></tr>
<tr><td width="21%" class="navlinks" valign="top">
<p>
...
<a href="register.asp" title="jump on board">
<img src="/images/register.gif" border="0" align="middle" alt="Register" height="39" width="39" />
Register</a>
</p>
</td><td class="gossipcell">
<p style="text-align:right; text-size:8pt"><a href="javascript:var newwin=window.open('/prefs.html',
'NewWin','toolbar=no,status=no,scrollbars=yes,resizable=yes,
width=525,height=450')">Change Layout</a></p>
<xsl:apply-templates select="content" />
</td></tr>
<tr><td colspan="2" class="admincell">
<div class="admin">
Copyright 1999, 2000, 2001, Nicholas Chase -- Need help? Contact the
<a href="mailto:webmaster@nicholaschase.com">webmaster</a>
</div>
</td></tr>
</table>
</body>
</html>
</xsl:template>
...
<xsl:template match="resource">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="@location" /></xsl:attribute>
<xsl:value-of select="." />
</xsl:element>
</xsl:template>
<xsl:param name="weathercity">Tampa, FL</xsl:param>
<xsl:template match="weather">
<h4>Local Weather:</h4>
<xsl:apply-templates select="location[@city=$weathercity]"/>
<br /><b>Other Locations:</b><br />
<xsl:apply-templates select="location[@city!=$weathercity]"/>
</xsl:template>
<xsl:template match="location">
Weather for <b><xsl:value-of select="@city"/></b>:
<i><xsl:value-of select="temperature"/><sup>o</sup> F,
<xsl:value-of select="clouds"/></i>
<br />
</xsl:template>
<xsl:template match="schedules">
<h4>Tonight's Viewing</h4>
<xsl:apply-templates select="show" />
</xsl:template>
<xsl:template match="show">
<b><xsl:value-of select="tvshow"/></b>:
<i><xsl:value-of select="tvtitle"/></i><br />
<xsl:value-of select="tvtime"/>, <xsl:value-of select="tvnetwork"/>
<br />
</xsl:template>
</xsl:stylesheet>
Now, if we were to run this style sheet exactly as it is, all of the pieces would appear on the page in the same order in which they appear in content.xml, as shown in Figure 2.
){kind=link}
Figure 2 Without a controlling template, the content is added to the page in the order in which it appears.
In order to control the layout of this material, we could add an additional template, such as the following:
<xsl:template match="content"> <table> <tr class="toprow"> <td class="leftcell"><xsl:apply-templates select="weather"/></td> <td class="rightcell"><xsl:apply-templates select="schedules"/></td> </tr> <tr> <td colspan="2"><hr /></td> </tr> <tr> <td colspan="2"><xsl:apply-templates select="gossip"/></td> </tr> </table> </xsl:template>
The structure of this template determines the layout of the content on the page. For example, the listing above displays an HTML table with the weather and schedule in the top row, and the news in the second row. By creating this template dynamically, we can give the user control over the layout of the page.