9.3. Using Other XUL Tags for Templates

Almost any XUL element that can be used as a container can use a template to define its inner content. Example 9-9 shows a <box> used as the start for a XUL template. Templates like this can create content that doesn't look as tabular or ordered.

Example 9-9. Template implemented in a box with buttons as content

  <box datasources="10-4.rdf" ref="urn:root"         containment="http://xfly.mozdev.org/
       fly-rdf#list">
    <template>
      <rule>
        <conditions>
          <content uri="?uri"/>
          <triple subject="?uri"
                   predicate="http://xfly.mozdev.org/fly-rdf#list"     
                     object="?list"/>
          <member container="?list" child="?listitem"/>
          <triple subject="?listitem"
                   predicate="http://xfly.mozdev.org/fly-rdf#label"      
                     object="?label"/>
        </conditions>
        <bindings>
          <binding subject="?listitem"
                    predicate="http://xfly.mozdev.org/fly-rdf#color"   
                      object="?color"/>
          <binding subject="?listitem"
                    predicate="fly-location#location"      
                      object="?location"/>
        </bindings>
        <action>
            <vbox uri="?listitem">
              <button label="?label"/>
              <button label="?location"/>
              <button label="?color"/>
              <splitter/>
            </vbox>
        </action>
      </rule>
    </template>
  </box>

The content generated in Example 9-9 includes three <button>s and a <splitter> inside a vertical <box>. The template building process is repeated for every object in the RDF graph, and some buttons are left blank. The result is a window full of buttons for each piece of data, which may get you started making heads-up displays or panel-like applications for templates, such as flight simulators.

Once you understand the basics of templates, it is fun to see what kind of XUL you can generate from it, such as games that need to render content on the fly, spreadsheets, database front ends, or other data-driven application user interfaces.