Since video of my actual presentation to the Denver HTML5 Meetup on October 22, 2012 won't be posted for a few more months, I quickly recorded the 10-minute YouTube below.
Below are the slides.
XML/XSL/HTML5 for reports instead of PDF
The official w3.org documentation on embedding XSL in XML actually dates from circa 2000. Firefox still allows it. Here is the overall structure of the .XML file:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="#stylesheet"?>
<!DOCTYPE doc [
<!ATTLIST xsl:stylesheet
id ID #REQUIRED>
]>
<doc>
<!--Start XSL-->
<xsl:stylesheet id="stylesheet"
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:template match="xsl:stylesheet" />
<xsl:template match="/doc">
<html>
<head>
<style type="text/css">
<!-- Your CSS goes here -->
</style>
<script type="text/javascript">
<!-- Your Javascript goes here -->
</script>
</head>
<body>
<table>
<thead>
<!-- Whatever is in here will get printed at the top of every page -->
</thead>
<tbody>
<!-- Main HTML, including "canvas" tags etc. -->
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<!--Start XML-->
<seriesdata>
<datapoint x="2.1" y="3.0" />
<datapoint x="2.9" y="5.2" />
</seriesdata>
</doc>
Below is the bit of magic to draw up the XML data into Javascript memory space. Assuming there is a Javascript constructor called ChartSeries that takes four parameters )name, array of x values, array of y values, color), the code below uses XSL to shove the x values inline in a comma-separated manner into the Javascript.
var mychartseries = new ChartSeries("Channel 1",[0
<xsl:for-each select="seriesdata/datapoint">
<xsl:value-of select="concat(',',@x)"/>
</xsl:for-each>
],[0
<xsl:for-each select="seriesdata/datapoint">
<xsl:value-of select="concat(',',@y)"/>
</xsl:for-each>
], "Yellow");
No comments:
Post a Comment