Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Trees in Tabs?

39 views
Skip to first unread message

reverendlinux

unread,
Sep 11, 2011, 12:34:45 PM9/11/11
to
In pre-planning a XUL utility (for personal use), I hit on the idea of
having multiple tabs with trees in that are populated by Javascript.
Before I start my coding, I'd like to know is this possible? If so,
is there anything special beyond building it like

<tab>
<tree>
...stuff in tree...
</tree>
</tab>

Any real gotcha's to look out for?

Thanks in advance...

Neil

unread,
Sep 11, 2011, 7:08:04 PM9/11/11
to
Should be fine. KaiRo's Data Manager works like this for instance.

--
Warning: May contain traces of nuts.

reverendlinux

unread,
Sep 11, 2011, 7:48:22 PM9/11/11
to
Thanks, Neil. I'll give the code a look.

Igor Tandetnik

unread,
Sep 12, 2011, 11:05:25 AM9/12/11
to
On 9/11/2011 12:34 PM, reverendlinux wrote:
> In pre-planning a XUL utility (for personal use), I hit on the idea of
> having multiple tabs with trees in that are populated by Javascript.
> Before I start my coding, I'd like to know is this possible? If so,
> is there anything special beyond building it like
>
> <tab>
> <tree>
> ...stuff in tree...
> </tree>
> </tab>

You probably want your tree in a <tabpanel>, not a <tab>. <tab>
represents the little tag at the top that you click to switch tabs.
--
Igor Tandetnik

reverendlinux

unread,
Sep 12, 2011, 12:45:33 PM9/12/11
to
Thanks, Igor!

I've now gotten the rough draft of my tabs/trees laid out. As I
approached writing the Javascript for populating the tree, I was
wondering if there were any nuances that others may know of. Just to
make the chore a bit easier.

reverendlinux

unread,
Oct 23, 2011, 9:09:08 PM10/23/11
to
On Sep 12, 10:45 am, reverendlinux <reverendli...@googlemail.com>
wrote:
I'm revisiting this one because I've come to a complete road block
when trying to populate trees within tabs

I have series of tabs that each have a tree in them. The data I want
to put in each of the tabs is contained within an array. When I try
to populate the trees with the data from the arrays, nothing is
displayed. I get no errors in -jsconcole (no surprise there) or when
using try { ... } catch (e).

Here is the basic code that I am using to populate the tree. The
array is called filtered and contains my data in tab seperated value
format. tabName is a variable containing the id of the tab that I am
trying to populate.

... code to populate the array filtered and the variable tabName
executes ...

var treeView = {
rowCount : filtered.length,
getCellText : function(row,column) {
if (filtered[row]) {
var line = filtered[row].split("\t");
switch (column.id) {
case "title":
return line[0];
case "issue":
return line[1];
case "date":
return line[2];
default :
return false;
} // end switch
} // end if filtered
},
setTree: function(treebox){ this.treebox = treebox; },
isContainer: function(row){ return false; },
isSeparator: function(row){ return false; },
isSorted: function(){ return false; },
getLevel: function(row){ return 0; },
getImageSrc: function(row,col){ return null; },
getRowProperties: function(row,props){},
getCellProperties: function(row,col,props){},
getColumnProperties: function(colid,col,props){}
};

document.getElementById(tabName).view = treeView;

So my question is, am I missing something in this code that is causing
the data to not be displayed?

alta88[nntp]

unread,
Oct 23, 2011, 10:45:18 PM10/23/11
to

the <tree> is what you set the view to, not the <tab>..

reverendlinux

unread,
Oct 24, 2011, 10:55:24 PM10/24/11
to
On Oct 23, 8:45 pm, "alta88[nntp]" <alt...@gmail.com> wrote:
> the <tree> is what you set the view to, not the <tab>..

Corrected my mistake. Thanks for pointing that out. Still, I am not
seeing any of my data appear in the tree.

reverendlinux

unread,
Oct 29, 2011, 3:24:05 PM10/29/11
to
On Oct 24, 8:55 pm, reverendlinux <reverendli...@googlemail.com>
wrote:

In case anyone would like to contribute some ideas as to why my data
is not being displayed within trees contained in tabs, here is the
full code of the three associated files I'm having the trouble with.
Any help is greatly appreciated as this has got me completely stopped
in writing my app.

**************
1 - mags.txt - A text file containing tab-separated values. This is
an example of the files contents:
**************
Automobile Vol 1 Issue 3 June 1986
Beekeeper Weekly 1057 April 1999
Choppers NN December 1978



************************
2 - populate-listing.js - The Javascript file that reads mags.txt,
formats the data and is supposed to insert it into the proper tree in
listing.xul. IE - All magazines starting with A go into the A tab
(aList tree), etc.
************************
function doPopulate() {
// Path to data file
var magFile = /home/paul/Documents/mags.txt;

//Read Data File//
var file = Components.classes["@mozilla.org/file/local;
1"].createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( magFile );

var istream = Components.classes["@mozilla.org/network/file-input-
stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
istream.init(file, 0x01, 0444, 0);
istream.QueryInterface(Components.interfaces.nsILineInputStream);

var mag = {}, mags = [], hasmore;
do {
hasmore = istream.readLine(mag);
mags.push(mag.value);
} while(hasmore);

istream.close();

var filtered = [];
var charCodeRange = {
start: 65,
end: 90
}

// Get all all titles starting with A, then B, etc
for (var cc = charCodeRange.start; cc <= charCodeRange.end; cc++) {
for (var z=0;z<mags.length;z++) {
entry = mags[z].split("\t");

if (entry[1].charAt(0) === String.fromCharCode(cc) ||
entry[1].charAt(0) === String.fromCharCode(cc).toLowerCase()) {
filtered.push(filtered[z]);
}
}

// Set target tree name (ie - aList, bList, etc)
var alphaList = String.fromCharCode(cc).toLowerCase()+"List";
populateTree(filtered,alphaList);

// Add to allList tree (last tab)
alphaList = "allList";
populateTree(filtered,alphaList);
}
} // end function

function populateTree(filtered,alphaList) {
//Write Data in listing.xul
document.getElementById(alphaList).view = treeView;

} // end function




**************
3 - listing.xul - The XUL window into which my data is supposed to be
displayed.
**************
<?xml version="1.0"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE window>

<window
id="list"
name="list"
title="Magazine Listing"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload='doPopulate();'>

<script type="application/x-javascript" src="./scripts/populate-
listing.js" />

<tabbox id="MagTabs" flex="1" style="font-size: 10px;">
<tabs>
<tab id="a" label="A" flex="1" />
<tab id="b" label="B" flex="1" />
<tab id="c" label="C" flex="1" />
<tab id="d" label="D" flex="1" />
<tab id="e" label="E" flex="1" />
<tab id="f" label="F" flex="1" />
<tab id="g" label="G" flex="1" />
<tab id="h" label="H" flex="1" />
<tab id="i" label="I" flex="1" />
<tab id="j" label="J" flex="1" />
<tab id="k" label="K" flex="1" />
<tab id="l" label="L" flex="1" />
<tab id="m" label="M" flex="1" />
<tab id="n" label="N" flex="1" />
<tab id="o" label="O" flex="1" />
<tab id="p" label="P" flex="1" />
<tab id="q" label="Q" flex="1" />
<tab id="r" label="R" flex="1" />
<tab id="s" label="S" flex="1" />
<tab id="t" label="T" flex="1" />
<tab id="u" label="U" flex="1" />
<tab id="v" label="V" flex="1" />
<tab id="w" label="W" flex="1" />
<tab id="x" label="X" flex="1" />
<tab id="y" label="Y" flex="1" />
<tab id="z" label="Z" flex="1" />
<tab id="all" label="All" flex="1" />
</tabs>
<tabpanels>
<tabpanel>
<tree
editable="false"
ref=""
id="aList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="bList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="cList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="dList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="eList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="fList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="gList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="hList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="iList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="jList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="kList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="lList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="mList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="nList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="oList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="pList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="qList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="rList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="sList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="tList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="uList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="vList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="wList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="xList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="yList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
<tabpanel>
<tree
editable="false"
ref=""
id="zList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>

<tabpanel>
<tree
editable="false"
ref=""
id="allList"
enableColumnDrag="true"
hidecolumnpicker="true"
seltype="multiple"
flex="1"
style="font-size: 8pt;">

<treecols style="font-size: 9pt;">
<treecol id="title" label="Title" flex="1" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="issue" label="Issue" flex="2" persist="width
ordinal hidden" />
<splitter class="tree-splitter" />
<treecol id="date" label="Date" persist="width ordinal hidden" /
>
</treecols>

<treechildren id="child">

</treechildren>
</tree>
</tabpanel>
</tabpanels>
</tabbox>

</window>

Lukas_Skywalker

unread,
Oct 31, 2011, 1:10:32 PM10/31/11
to
I had a different approach. For an example, look here: http://musicdc.svn.sourceforge.net/viewvc/musicdc/trunk/chrome/content/main.js?revision=565&view=markup#l923

In line 923, i get a reference to the _treechildren_ element of the tree. This is important, use treechildren.
I'm creating treeitem, treerow and treecell elements on the next lines and append them in reverse order to each other. This works for me.

reverendlinux

unread,
Nov 1, 2011, 9:51:51 PM11/1/11
to
On Oct 31, 11:10 am, Lukas_Skywalker <jungleki...@gmail.com> wrote:
> I had a different approach. For an example, look here:http://musicdc.svn.sourceforge.net/viewvc/musicdc/trunk/chrome/conten...
>
> In line 923, i get a reference to the _treechildren_ element of the tree. This is important, use treechildren.
> I'm creating treeitem, treerow and treecell elements on the next lines and append them in reverse order to each other. This works for me.

Lukas,

Thanks for the suggestion. I took a look at your code (nice), but I'm
afraid I have already tried the approach you suggested. In an earlier
version of my app I used something very similar but without tabs.
However, when I tested the code on large amounts of data I noticed a
huge performance drop. That is why I am using the method I am now and
it is the method I wish to remain using.

However, as a test I rewrote that section of my code to use your
method. Although it processed the data properly, nothing was
displayed.

So either way, I am back to stumped...

alta88[nntp]

unread,
Nov 2, 2011, 12:54:55 AM11/2/11
to
take a look at TotalMessage (for Tb), at customizeToolbar.xul and
customizeToolbarOverlay.js. it adds an xul tab to the customize dialog,
with a tree using a view.

or it could be something like you don't have a primary attribute on any
column.

http://totalmessage.mozdev.org/


reverendlinux

unread,
Nov 2, 2011, 7:59:07 PM11/2/11
to
Thanks for the reply.

For the primary attribute, the way I understand it is that it is used
for nested trees. I'm using a standard column/row type tree so the
primary attribute would not have any effect. But I did add it in
and...no change.

As for the TotalMessage plugin, that's going to take me some time to
work through. I'm not a guru on Javascript so a large part of that
code is a bit on the complex side for my knowledge level. I'm going
to try to dissect it and see what may correspond to what I am doing
(and whether I can make any sense of it). However, any tutoring would
be appreciated.

Again, thanks for taking the time to reply.

alta88[nntp]

unread,
Nov 3, 2011, 1:02:19 AM11/3/11
to
you're correct re primary attribute.

well, it is indeed complex. but you only need to look at the code at
the bottom where the nsITreeView implementation starts, the onLoad(),
and how the xul overlay is structured.

the getCellText returns data from visibleArray for collapsed rows,
that's it basically, the rest isn't material to your implementation.

you should probably just start with one tree in one tab, rather than
going for multiple tabs, until it works. and add some logging so you
know what tree id is having a view set, if getCellText is getting called
etc.

reverendlinux

unread,
Dec 12, 2011, 10:34:09 PM12/12/11
to
It's been a few weeks, but I had time this past weekend to revisit
this issue. And I must swallow my pride and say it's got me beat.
Using the code from totalmessage as a base, I worked long and hard
trying to get just one tab working and failed miserably. As before, I
get no errors in the -jsconcole and using try/catch doesn't return any
errors. The tree in the tab just never appears. So this one is going
on the shelf for the forseeable future. Thanks to all that gave input
into this. If I ever get it working, I'll post the working code here.

Cheers!
0 new messages