Sunday, April 13, 2008

XUL Tree: a javascript widget

Here is a piece of code I wrote to be able to assemble XUL Tree from a given javascript object.

/*****************************************************
EXAMPLE OF CONFIG OBJECT
/*****************************************************
var oConfig = {
id: "mytree",
className: "classname"
treecols: [{
label: "Column 1",
primary: true,
id: "col1"
},{
label: "Column 2",
id: "col2",
}
]
}
/*****************************************************
EXAMPLE OF DATA OBJECT
/*****************************************************
var oData = {
open: true,
cols: [
{ label: 'node1' },
{ label: 'node2' }
],
nodes: [
{
cols: [
{ label: 'node3' },
{ label: 'node4' }
],
nodes: []
},{
cols: [
{ label: 'node5' },
{ label: 'node6' }
],
nodes: []
}
]
};
/*****************************************************/
function tree(sContainer, oConfig, oData) {
this.container = document.getElementById(sContainer);
this.data = oData;
this.config = oConfig;
// create tree
this.tree = document.createElement('tree');
this.tree.setAttribute('flex','1');
// create treecols
this.treecols = document.createElement('treecols');
this.cols = [];
var nOrdinal = 1;
for(var i in this.config.cols) {
var oCol = document.createElement('treecol');
oCol.setAttribute('label',this.config.cols[i].label);
oCol.setAttribute('primary',this.config.cols[i].primary);
oCol.setAttribute('id',this.config.cols[i].id);
oCol.setAttribute('ordinal',nOrdinal++);
oCol.setAttribute('flex','1');
this.cols.push(oCol);
var oSplitter = document.createElement('splitter');
oSplitter.setAttribute('ordinal',nOrdinal++);
this.treecols.appendChild(oCol);
if(i < this.config.cols.length - 1) {
this.treecols.appendChild(oSplitter);
}
}
this.tree.appendChild(this.treecols);
this.container.appendChild(this.tree);

this.root = document.createElement('treechildren');
this.createNode(this.root, this.data);
this.tree.appendChild(this.root);
}
/*****************************************************/
tree.prototype.createNode = function(oParent, oNodeData) {
var oTreeItem = document.createElement('treeitem');
if(oNodeData.open) {
oTreeItem.setAttribute('open',oNodeData.open);
}
var oTreeRow = document.createElement('treerow');
for(var i=0; i<oNodeData.cols.length; i++) {
var oTreeCell = document.createElement('treecell');
oTreeCell.setAttribute('label',oNodeData.cols[i].label);
oTreeRow.appendChild(oTreeCell);
}
oTreeItem.appendChild(oTreeRow);
if(oNodeData.nodes) {
oTreeItem.setAttribute('container','true');
var oTreeChildren = document.createElement('treechildren');
for(var i=0; i<oNodeData.nodes.length; i++) {
this.createNode(oTreeChildren,oNodeData.nodes[i]);
}
oTreeItem.appendChild(oTreeChildren);
}
oParent.appendChild(oTreeItem);
}
/*****************************************************

0 comments:

 
SQLITE | CROSSBROWSER CSS | MAC HOWTO | WEB WITHOUT ADS | DOT PHP | DOT JS | FIREFOX DEVELOPMENT