How can I add the JavaScript code into the Plug-in tool?

[mathswww]

I need to invoke the javascript code to obtain the subtree.
Refer to the code from https://developer.mozilla.org/en-US/...e_View_Details,
I do the following steps:
1) I build a new file named "imagestree.js"

var treeView = {
 
  childData : {
    Solids: ["Silver", "Gold", "Lead"],
    Liquids: ["Mercury"],
    Gases: ["Helium", "Nitrogen"],
    Images: ["ami-0000","ami-0002"],
    Name: ["SCIEx"],
    Gold: ["zhong","guo"]
  },
 
  visibleData : [
    ["Solids", true, false],
    ["Liquids", true, false],
    ["Gases", true, false],
    ["Images", true, false],
    ["Name", true, false],
    ["Gold", true, false],
  ],
 
  treeBox: null,
  selection: null,
 
  get rowCount()                     { return this.visibleData.length; },
  setTree: function(treeBox)         { this.treeBox = treeBox; },
  getCellText: function(idx, column) { return this.visibleData[idx][0]; },
  isContainer: function(idx)         { return this.visibleData[idx][1]; },
  isContainerOpen: function(idx)     { return this.visibleData[idx][2]; },
  isContainerEmpty: function(idx)    { return false; },
  isSeparator: function(idx)         { return false; },
  isSorted: function()               { return false; },
  isEditable: function(idx, column)  { return false; },
 
  getParentIndex: function(idx) {
    if (this.isContainer(idx)) return -1;
    for (var t = idx - 1; t >= 0 ; t--) {
      if (this.isContainer(t)) return t;
    }
  },
  getLevel: function(idx) {
    if (this.isContainer(idx)) return 0;
    return 1;
  },
  hasNextSibling: function(idx, after) {
    var thisLevel = this.getLevel(idx);
    for (var t = after + 1; t < this.visibleData.length; t++) {
      var nextLevel = this.getLevel(t);
      if (nextLevel == thisLevel) return true;
      if (nextLevel < thisLevel) break;
    }
    return false;
  },
  toggleOpenState: function(idx) {
    var item = this.visibleData[idx];
    if (!item[1]) return;
 
    if (item[2]) {
      item[2] = false;
 
      var thisLevel = this.getLevel(idx);
      var deletecount = 0;
      for (var t = idx + 1; t < this.visibleData.length; t++) {
        if (this.getLevel(t) > thisLevel) deletecount++;
        else break;
      }
      if (deletecount) {
        this.visibleData.splice(idx + 1, deletecount);
        this.treeBox.rowCountChanged(idx + 1, -deletecount);
      }
    }
    else {
      item[2] = true;
 
      var label = this.visibleData[idx][0];
      var toinsert = this.childData[label];
      for (var i = 0; i < toinsert.length; i++) {
        this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]);
      }
      this.treeBox.rowCountChanged(idx + 1, toinsert.length);
    }
    this.treeBox.invalidateRow(idx);
  },
  getImageSrc: function(idx, column) {},
  getProgressMode : function(idx,column) {},
  getCellValue: function(idx, column) {},
  cycleHeader: function(col, elem) {},
  selectionChanged: function() {},
  cycleCell: function(idx, column) {},
  performAction: function(action) {},
  performActionOnCell: function(action, index, column) {},
  getRowProperties: function(idx, prop) {},
  getCellProperties: function(idx, column, prop) {},
  getColumnProperties: function(column, element, prop) {},
};
 
function tree() {
  document.getElementById("elementList").view = treeView;
}

2) Then I want to invoke the function "tree()" in the "image.xul" file, where should I put the code?

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="imagestree.js" />
  <tabpanel id="images_tab" flex="1">
    <vbox flex="1">
      <hbox flex="2">
       <groupbox flex="3" orient="vertical">
          <caption label="schemes;" />
           <tree id="elementList" flex="1">
        <treecols>
          <treecol id="element" label="Element" primary="true" flex="1"/>
        </treecols>
        <treechildren/>
    </tree>
        </groupbox>

3) For example, I add the code with the "onfocus" event:

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onfocus="tree()">

However, it can not works.

So how can I handle this problem?

[gits]

i didn't go through all the code - but to get a first working view of your example i suggest to use the following xul-file:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE window []>
<?xml-stylesheet href="chrome://global/skin/" style="text/css"?>
 
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="tree();">
    <script type="application/x-javascript" src="imagestree.js" />
 
    <groupbox flex="3" orient="vertical">
        <caption label="schemes;" />
        <tree id="elementList" flex="1">
            <treecols>
                <treecol id="element" label="Element" primary="true" flex="1"/>
            </treecols>
            <treechildren/>
        </tree>
    </groupbox>
</window>
 

now - is that what you want to achieve? and if not please explain in more detail what the problem is.

PS: in your trieview implementation it might be necessary to request enhanced privileges:

function tree() {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    document.getElementById("elementList").view = treeView;
}
 

[mathswww]

Thanks for your reply, still I have two problems:
1) Since I use a "main.xul" file to add this "image.xul" as an overlay, it seems hard for me to invoke the function in the "image.xul" file.
2) I want to know how can I implement a nesting tree,
while the example is only for two levels. If I want to
implment a tree with tree levels, how can I define the
childData in the "image.js" file.

[gits]

1. the overlay is included during parsetime and the code in the overlay is ready to use in your 'main.xul's onload-event - so just call the code in that onload-event

2. a multilevel tree looks like this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE window []>
<?xml-stylesheet href="chrome://global/skin/" style="text/css"?>
 
<window id="sixt" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="">
 
<tree flex="1">
    <treecols>
        <treecol label="col 1" flex="1" primary="true"/>
        <treecol label="col 2" flex="2"/>
    </treecols>
    <treechildren>
        <treeitem container="true">
            <treerow>
                <treecell label="foo" />
                <treecell label="bar" />
            </treerow>
            <treechildren>
                <treeitem container="true">
                    <treerow>
                        <treecell label="foo1" />
                        <treecell label="bar1" />
                    </treerow>
                    <treechildren>
                        <treeitem>
                            <treerow>
                                <treecell label="foo3" />
                                <treecell label="bar3" />
                            </treerow>
                        </treeitem>
                    </treechildren>
                </treeitem>
                <treeitem>
                    <treerow>
                        <treecell label="foo2" />
                        <treecell label="bar2" />
                    </treerow>
                </treeitem>
            </treechildren>
        </treeitem>
    </treechildren>
</tree>
 
</window>
 

have a look here: http://www.xul.fr/tutorial/tree.html for more information.

now there are different possibilities to implement that either in a custom treeView or in a object/method that simply creates the shown node-structure based on the given data structure. normally you would create someting like (corresponding to the above example):

function MyTree() {
}
 
MyTree.prototype.create = function(data, container) {
    // implement tree-creation logic here
}
 
// id of a XUL-container where the tree should be
// inserted
var cntId = 'myTreeContainer';
 
var data = [{
    id1: 'foo', 
    id2: 'bar', 
    children: [{
        id1: 'foo1', 
        id2: 'bar1', 
        children: [{
            id1: 'foo3', 
            id2: 'bar3', 
        }]
    }]
},{
    id1: 'foo2', 
    id2: 'bar2', 
}];
 
var myTree = new MyTree;
myTree.create(data, cntId);
 

[mathswww]

Thanks for your reply, I have one more question for the first example. Since I want to dynamically change the "childData" and "visibleData", I write two functions in the class of treeView:

var treeView = {
...
   childData : null,
   visibleData : null,
   setchildData: function(childData)  {this.childData=childData;},
  setvisibleData: function(visibleData) {this.visibleData=visibleData;},
...
}
 

And then I use the two functions to set the values.
However, the tree structure is invisible.
So what is the problem?

[mathswww]

Thanks for your reply, I have one more question for the first example. Since I want to dynamically change the "childData" and "visibleData", I write two functions in the class of treeView:

var treeView = {
...
   childData : null,
   visibleData : null,
   setchildData: function(childData)  {this.childData=childData;},
  setvisibleData: function(visibleData) {this.visibleData=visibleData;},
...
}
 

And then I use the two functions to set the values.
However, the tree structure is invisible.
So what is the problem?

[gits]

in your treeView implement a refresh-method like this:

myRefresh: function() {
    this.treeBox.rowCountChanged(0, this.visibleData.length);
}

and the update-data method could look like this:

function setData() {
  treeView.setchildData({
    Solids: ["Silver", "Gold", "Lead"],
    Liquids: ["Mercury"],
    Gases: ["Helium", "Nitrogen"],
    Images: ["ami-0000","ami-0002"],
    Name: ["SCIEx"],
    Gold: ["zhong","guo"]
  });
 
  treeView.setvisibleData([
    ["Solids", true, false],
    ["Liquids", true, false],
    ["Gases", true, false],
    ["Images", true, false],
    ["Name", true, false],
    ["Gold", true, false],
  ]);  
 
  treeView.myRefresh();
}