Russell Tyndall's Tech Blog

The Shizzle Fa Rizzle at Acceleration.net

Home Contact Syndicate this Site (RSS 2.0) Syndicate this Site (Atom) Login
  80 Posts :: 6 Stories :: 69 Comments :: 19 Trackbacks

News

Listed on BlogShares

Archives

Post Categories

Image Galleries

Favorite Web Locations

Tech Tool Links


Sunday, April 10, 2005 #

So I finally found a palatable solution to the Templates Problem I talked about earlier. The technique I used was to create a XBL control called 'repeater'. Ryan had some issues with the word template as I was using it so we switched over to repeater to be less ambiguous. The goal of this is not to provide a general control system (which XBL and XBLinJS try to do), but only to provide the functionality to easily repeat nodes inside of a valid tag. The best example I can give for this is for binding a dropdownlist / select box / menupopup, where I just need to repeat the <menuitem /> over a flat set of data.

var testTable = [['id', 'name'],
[ 1, 'Programmers' ],
[ 2, 'WebAdmin' ],
[ 3, 'Broadband']];

<hbox>
<repeater>
<label value="{name}" />
</repeater>
</hbox>

What the 'repeater' control does is remove the repeater node from its parent storing a reference to this 'template' on that control (so we have what was there but none of it is rendered). Then it loops through the data set adding all of the nodes that were inside of the repeater tags, with their values filled in. So what gets rendered to the page would be this:

<hbox>
<label value="Programmers" />
<label value="WebAdmin" />
<label value="Broadband" />
</hbox>

The really nice part about this system is that by inserting a repeater node inside of the template, with the outer template filling in the datasource attribute for the inner repeater as it goes, allows you to chain these repeaters to make hierarchical data repeaters. After I finish polishing everything and test it once more, I am going to port this to use <div repeater="true" > [enter repeated data here]</div> so that I can achieve the same repeater functionality in standard HTML.

Overall this has been my best experience with XBL, most notable because it required only one function block and one line of xbl content binding ( the <children /> node). It did however force me to copy code in and out of the xbl document to a standard JS doc to get parse errors to show up (Mozilla was just silently failing when their was a parse error in the XBL Javascript).

Ryan will probably give us a little preview of his js control scheme based of his interpretations of XBLinJS. What it seems we've got almost worked out is a simple way to repeat nodes and a simple way to create complex, repeatable, XUL/HTML controls. Most of this work was inspired by excessive frustration (mostly caused by nonexistant error handling) at the way mozilla handles these two things and by reading Jeremy Bowers site which convinced us to do what we already wanted to do.


UPDATE:
Go Here to see the Repeater Source
Usage Example
posted @ 5:04 PM