XBL:Dynamic Use Cases

From MozillaWiki
Jump to: navigation, search

By MDC:User:Benjamin Smedberg

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>