XBL:Dynamic Use Cases
Many XBL bindings have a simple content template that does not need to change over time and is the same for all bound elements; the binding may add a button or other UI to the bound element's presentation. However, there is another class of XBL binding which need to provide a presentation which is customized for each bound element through scripting. The following provides an example of such a binding and the XBL features it requires.
The binding takes an XML data structure and converts that structure into a chart presented using SVG. An typical dataset might look thus:
<?xbl href="/2dchart.xml" ?>
<html xmlns="xhtml">
<body>
<h1>Quarterly revenue for example.com</h1>
<chart xmlns="http://bindings.org/2dchart">
<axis label="Revenue" />
<group label="2005">
<data label="Q1" value="20" />
<data label="Q2" value="500" />
<data label="Q3" value="50000" />
<data label="Q4" value="180000" />
</group>
<group label="2006">
<data label="Q1" value="260000" />
</group>
</chart>
</body>
</html>
The desired presentation is an SVG image of a simple 2D bar chart. The binding allows the user to dynamically select other presentations, such as a line graph, or to switch the axes.
<xbl xmlns="xbl" xmlns:chart="http://bindings.org/2dchart">
<binding id="2dchart" element="chart:2dchart">
<!-- The base shadow template only provides the root SVG element.
Children of the 2dchart do not have insertion points -->
<template>
<svg xmlns="svg" id="2dchartsvg" />
<button xmlns="xul" label="*" title="Change Chart Settings" />
</template>
<implementation>
return {
xblBindingAttached : function() {
var mysvg = this.shadowTree.getElementById("2dchartsvg");
var mybound = this.boundElement;
// Scripting here here to read the chart data and add data to the SVG
}
}
</implementation>
<handlers>
<handler event="DOMSubtreeModified">
// rebuild the SVG presentation
</handler>
</handlers>
</binding>
</xbl>
