scriptable progress bar: mixing XHTML,SVG,XSLT,CSS and JavaScript
this is a step by step guide on how to extend xhtml with elements in your own namespace , render
your elements with SVG, style the output with CSS and make the whole thing scriptable.
so lets create a programmable progressbar. in the end it should look something like:
1) make up a name for the new element . lets call it <progressBar/>.
2) come up with a namespace for our new element. a namespace needs a unique identifier, i will use an URI at this domain ( "http://www.treebuilder.de/namespace" ).
3) make up a prefix. because i call this an extension, i think "ex" for extension is a good prefix.
4) create a first testcase.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ex="http://www.treebuilder.de/namespace">
<head>
<title>extending xhtml testcase 1</title>
</head>
<body>
<ex:progressBar/>
</body>
the complete document looks like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ex="http://www.treebuilder.de/namespace">
<head>
<title>extending xhtml testcase 1</title>
</head>
<body>
<ex:progressBar/>
</body>
</html>
5) create an identity transformation in xslt:
in the root element we declare the namespaces used, the default namespace (xmlns="...") is html,
we declare prefixes for svg, html and the extension namespace from the testcase.
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:ex="http://example.com/namespace">
this template matches the document.
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>
this template matches all elements, they just get copied, and the stylesheet will be aplied to all subnodes ( node() ), including all attributes (@*)
<xsl:template match="*">
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
<xsl:template match="@*">
<xsl:copy/>
</xsl:template>
<xsl:template match="processing-instruction()">
<xsl:copy-of select="."/>
</xsl:template>
6) add a processing instruction to our testcase:
<?xml-stylesheet href="extension.xsl" type="text/xsl"?>
<?xml-stylesheet href="extension.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ex="http://www.treebuilder.de/namespace">
<head>
<title>extending xhtml testcase 1</title>
</head>
<body>
<ex:progressBar/>
</body>
</html>
7) add a template for our progressbar to the xsl file
<xsl:template match="ex:progressBar">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="40">
<rect x="0" y="0" width="200" height="40"/>
</svg>
</xsl:template>
8) extending the progressBar element with attributes.
just add "width" and "height" attributes to our element, so we can use these values in our template.
<ex:progressBar width="200" height="40"/>
9) using these parameters in the template
<xsl:template match="ex:progressBar">
<svg xmlns="http://www.w3.org/2000/svg" width="{@width}" height="{@height}">
<rect x="0" y="0" width="{@width}" height="{@height}"/>
</svg>
</xsl:template>
10) add another rect to the template, this second rect should have a margin of 10. its filled red temporarly so we can see it.
<rect x="10" y="10" width="{@width - 20}" height="{@height - 20}" fill="red"/>
11) add a third rect, and some color, so it matches the image from the beginning of this post.
<xsl:template match="ex:progressBar">
<svg xmlns="http://www.w3.org/2000/svg" width="{@width}" height="{@height}">
<rect x="0" y="0" width="{@width}" height="{@height}" fill="grey" rx="10" ry="10"/>
<rect x="10" y="10" width="{@width - 20}" height="{@height - 20}" fill="black"/>
<rect x="10" y="10" width="{@width div 2}" height="{@height - 20}" fill="blue"/>
</svg>
</xsl:template>
12) to make this scriptable, i choosed the following way:
- add a name attribute to the progressBar definition
- register an object with the same name at window level
- generate an id for the "shadow content" and add a reference to it to the object
the whole thing looks like this:
<xsl:template match="ex:progressBar">
<xsl:variable name="id" select="generate-id()"/>
<svg id="{$id}" xmlns="http://www.w3.org/2000/svg" width="{@width}" height="{@height}">
<rect x="0" y="0" width="{@width}" height="{@height}" fill="grey" rx="10" ry="10"/>
<rect x="10" y="10" width="{@width - 20}" height="{@height - 20}" fill="black"/>
<rect x="10" y="10" width="{@width div 2}" height="{@height - 20}" fill="blue"/>
<script>
<xsl:value-of select="@name"/>= function (){}
<xsl:value-of select="@name"/>.svg=document.getElementById("<xsl:value-of select="$id"/>")
<xsl:value-of select="@name"/>.setValue= function (x){
<xsl:value-of select="@name"/>.svg.getElementsByTagNameNS("http://www.w3.org/2000/svg","rect").item(2).setAttributeNS(null,"width",x)
<xsl:value-of select="@name"/>.value=x
}
<xsl:value-of select="@name"/>.value=<xsl:value-of select="@width div 2"/>
</script>
</svg>
</xsl:template>
<ex:progressBar name="pb1" width="200" height="40"/>
the stylesheet used for the example above
and here is what it looks like, if you add some more SVG magic:
the stylesheet used for the example above
thats it for now, i will describe how to style the above progressbar with CSS in the next article.
|
