XUL

XUL Repeater

Russ — Wed, 04 May 2005 16:24:00 GMT

I had talked about this repeater control a while back but then got distracted onto other things.
Go Here to see the Repeater Source
It probably can easily be ported to work with just javascript and HTML but I havnt had the time or need to do so yet. Who knows maybe soon. UPDATE: Fixed Link

The XBL Template / Repeater control

Russ — Sun, 10 Apr 2005 17:04:00 GMT

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

XUL Templates Or Javascript Templates

Russ — Wed, 06 Apr 2005 19:41:00 GMT

I've been really frustrated with the XUL template system for a while and have thought about writing a javascript object to handle templating through direct interface with the DOM. Today I read XUL Templates are a Waste of Time. While Im not completely sure I agree with everything Jeremy Bowers says, reading his rant convinced me it was time to try out writing my own javascript template system. I broke with standards in this endeavor because one of my biggest complaints about the current template system is the time I spend translating to and from XML-RDF. I appreciate what RDF is trying to do in a lot of cases and I think that, overall RDF is a great idea. I hate xml-rdf though. This is especially true when I need to translate flat SQL selects into RDF just so I can display them in a flat list again. Toward this end I decided to use the simplest data structure to represent the data for my template system.


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

This data table gets turned into a data source (this entails creating an object the has columnNames and rows). Then I just call a function passing in a template ( '<menuitem label="{name}" value="{id}" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" />'), a data source and a control that I want to add the template nodes to. This is currently just a prrof of concept that I threw together to figure out the feasibility of this project. As a side note, for HTML template generation you can just user element.innerHTML += element.template.format(obj). Also, if the format is throwing you, it accepts an object(hashtable) and replaces keys inside of the '{', '}' with the value from the object passed in.

The places I see for improvement are:

Not needing to specify the URI. I dont know if I can get around this one.
I need to figure out a way to nest templates. Currently I haven't even thought about it yet.
It would be nice to be able to specify a url to pull the data source from and have that data source refresh dynamically


1	var JsTemplater = new (function(){
2
3	this.DataSource = function ( dataTable ){
4	this.columnHeaders = dataTable[0];
5	dataTable.remove(0);
6	this.rows = dataTable;
7	};
8
9	this.DataSource.__doc__ = 'Constructor for a Template Datasource';
10
11	this.attachTemplateToNode = function( template, datasource, element ){
12	template = new String(template); //So I can use the format function
13	element.template = template;
14	element.datasource = datasource;
15	element.bind = function(){
16	for( var row=0 ; row < element.datasource.rows.length ; row++ ){
17	var obj = new Object();
18	for( var col=0 ; col < element.datasource.columnHeaders.length ;col++){
19	obj[element.datasource.columnHeaders[col]] = element.datasource.rows[row][col];
20	//this builds an object for every row whose keys are the column names and whose values are the... values
21	}
22	var str = element.template.format(obj);
23	var parser = new DOMParser();
24	var resultDoc = parser.parseFromString(str, 'application/xml');
25	if (resultDoc.documentElement.tagName == "parsererror")
26	throw 'there was an error parsing the following template\n\n'+template;
27	// hey cool ... templates with error reporting
28	element.appendChild(resultDoc.documentElement);
29	};
30	};
31	};
32	})();

More Dynamic XUL Template Stuff

Russ — Tue, 08 Feb 2005 16:08:00 GMT

This page on Mozilla.org has the info I needed when I was previously using templates and explains (doesnt justify) the datasources attribute problems I ran up against.

The way we have been working with XUL data lists has mostly been through the Tree widgets. This site seems to have a pretty good overview of xul templates (with source (thanks planet XUL for being the most useful useless site on the net)), and they suggest using the listbox for most common chores instead of the full tree control.

Dynamic XUL Template Datasources.

Russ — Mon, 17 Jan 2005 16:35:00 GMT

To take advantage of XUL templates you want something like:

<vbox id="boxPlanAttributeValues" datasources="SomeURL" ref="SomeURIforTheData ">
      <template>
          <hbox uri="rdf:*" attributevalueid="rdf:SomeUril#Id">  
                <label value="rdf:SomeUril#Attribute" />
                <label value="rdf:SomeUril#Value" />
                <hbox align="right" flex="1">
                    <button maxwidth="30px" label="X" oncommand="" />
                </hbox>
          </hbox>
      </template>
 </vbox>

To make this dynamic, (for example change a where clause so that it is bound differently):we should only need to remove the data source and ref from the above xml and use this bit of javascript:

this.boxPlanAttributeValues.setAttribute("ref", "SomeURIforTheData " );
this.boxPlanAttributeValues.setAttribute("datasources", SomeURL );
this.boxPlanAttributeValues.builder.refresh();

The problem I was having was that this.boxPlanAttributeValues.builder is null. The solution, after banging my head against the wall for hours, was to make sure that the xul tag still has [ datasources="" ref="" ] in it.

This is the problem with software... it all sucks.