|
6. Making nice XHTML layout
One little stage is still left, and that
is formatting the XML files so that they make nice XHTML files that we can render
in a browser. We will generate an HTML document per album that shows the bigger
image and a track listing, and have a small scrollable DIV-frame with all of the
thumbnails as an overview of the album database.
Code listing 6.1: makeFinalXHtml.xsl makes final XHTML file |
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xsl:version="1.0">
<xsl:template match="xmlLibrary">
<html>
<head>
<title>Xml Library - Exported from iTunes</title>
<meta name="GENERATOR" content="CCTunes"/>
<meta name="DESCRIPTION" content="Music Library published with CCTunes. Find out all about CCTunes at
http://www.coin-c.com/CCTunes/"/>
<link rel="stylesheet" href="default.css"/>
</head>
<body bgcolor="#000000"
style="background-color: rgb(0, 0, 0); color: rgb(153, 153, 153);">
<xsl:variable name="librarywidth" select="count(AlbumItem) * 64"/>
<table style="width: 100%; height: 100%; text-align: left; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="height: 100px; vertical-align: top;" class="albumTitle"><br/>
CCTunes Exported Library.
</td>
<td style="width: 360px; height: 100px;">
<div style="position: relative; left: 0px; width: 355px; top: 0px; height: 90px; overflow: auto; background-color: rgb(0, 0, 0);">
<div style="position: relative; top: 0px; left: 0px; height: 60px; width: {$librarywidth}px;">
<xsl:for-each select="AlbumItem">
<xsl:sort select="Artist"/>
<xsl:sort select="Album"/>
<xsl:variable name="albumname" select="Album"/>
<xsl:variable name="artistname" select="Artist"/>
<xsl:variable name="albumid" select="AlbumID"/>
<xsl:if test="$artistname!='' and $albumname!=''">
<xsl:text disable-output-escaping="yes"><a href="</xsl:text>
<xsl:value-of select="$albumid"/>
<xsl:text disable-output-escaping="yes">.html" target="inlineframe">
<IMG WIDTH="60" HEIGHT="60" border="0"
SRC="</xsl:text>
<xsl:value-of select="AlbumID"/>
<xsl:text disable-output-escaping="yes">-low.png"</xsl:text>
<xsl:text>ALT="</xsl:text>
<xsl:value-of select="$artistname"/><xsl:text> -- </xsl:text><xsl:value-of select="$albumname"/>
<xsl:text disable-output-escaping="yes">" TITLE="</xsl:text>
<xsl:value-of select="$artistname"/><xsl:text> -- </xsl:text><xsl:value-of select="$albumname"/>
<xsl:text disable-output-escaping="yes">"/></xsl:text>
<xsl:text disable-output-escaping="yes"></a></xsl:text>
</xsl:if>
</xsl:for-each>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2"> <iframe height="100%" width="100%"
scrolling="auto" src="" frameborder="1"
name="inlineframe"></iframe> <br/>
</td>
</tr>
<tr>
<td align="right" height="15" colspan="2" class="cctunesLink">
Published Using
<a class="cctunesLink" href="http://www.coin-c.com/CCTunes/">CCTunes</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
|
|
