WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 XTREE suggestions, Robin Mattern, October 10, 2003
     Re:XTREE suggestions, Erik Arvidsson, October 12, 2003

Subject: XTREE suggestions From: Robin Mattern Date: October 10, 2003

Since you indicated that you are reworking XTREE and XLOADTREE, I thought I might pass on a few suggestions.  But first let me say that, like the prolific ForgetFoo said somewhere in his ramblings, it was visiting your site more than a year ago that made me realize how much you could do with client-side Javascript to create full-featured GUIs.

 1.  Currently you create a sequential Node.ID number for every Tree item.  This ID then gets stored as a cookie to preserve it's open or closed state.
     
     What about allowing the developer to give you the ID if they assumed the responsibility for keeping them unique?  By adding an ID argument to WebFXTreeItem and WebFXLoadTreeItem, you could use it if present.  You might give it some sort of prefix to distinguish it from your generated IDs if for some reason the developer wanted both types of items in their Tree.
    
     This would allow developers to be able to reference their Tree items by numbers that they created (an typically would have stored in a database as a unique index field).  Currently the developer would need to create their own mapping between your generated IDs and those stored on the server.
    
     This would also solve the problem created when a portion of the Tree is dynamically loaded.  Since it would be up to the application to maintain unique IDs for the entire Tree (loaded or not), the cookie IDs would always reference the same item.
    

 2.  If you implement the user-defined ID, then you need to all an ID attribute to the XML <tree> tag.  This would also allow for the use of a Parent attribute. 
    
     The WebFXTreeItem object already has the ability to "create" an item as the Child of an existing Parent.  This is an alternative to the two step process of creating it first and then using the Parent.add method. 
    
     I would like to see a similar capability to specify the Parent ID  in the XML file.  A Tree could then be described as follows:
 
<tree>
   <tree parent="0"  id="1"   text="Loaded Item 1"               action="javascript:alert('Node 1')"  />
   <tree parent="0"  id="2"   text="Loaded Item 2"  />
   <tree parent="2"  id="21"  text="Loaded Item 2.1"             action="javascript:alert('Node 2.1')"  />
   <tree parent="0"  id="3"   text="Loaded Item 3 (google.com)"  action="
http://www.google.com"       target="_new"  />
   <tree parent="21" id="211" text="Load &quot;tree1.xml&quot;"  action="tree1.xml"  src="tree1.xml"  target="My_IFRAME" />
   <tree parent="0"  id="4"   text="Download: wsram.zip"         action="wsram.zip"  />
</tree>

     This would eliminate the somewhat difficult task of creating a recursively generated tree structure.  A simple one dimentional set of rows would be sufficient to define a tree.  This method does make two assumptions: 1)the developer must be able to reference their own unique Node IDs and 2)the developer must be sure that all Parent nodes are listed in the XML file before any of it's Child nodes appear.
    
    
  3. One additional method to find the Parent node given an Parent ID would need to be added to webFXTreeHandler for this work. I wrote one as follows.
     
[ 0] function getElementById(aID) {
[ 1]           aID = this.idPrefix + aID;
[ 2]      for (var id in this.all) {    
[ 3]           if (id = aID) { return this.all[id]; }  }
[ 4]   return  this.all[idPrefix + "T0"]
[ 5] }

     
     This makes use of the { all } collection that you create.  Just out of curiosity, does creating such a collection make a dupicate copy in menory to every Tree node, or do the array elements just point to the initial copy?
    
    
  4. Below are the additions to the  _xmlTreeToJsTree function that I made to allow for the non-recursive method of defining an Tree in an XML file.
     
[ 0] function _xmlTreeToJsTree(oNode) {
[ 1]     // retreive attributes
[ 2]     var text = oNode.getAttribute("text");
[ 3]     var action = oNode.getAttribute("action");
[ 4]     var parent = null;
[ 5]     var icon = oNode.getAttribute("icon");
[ 6]     var openIcon = oNode.getAttribute("openIcon");
[ 7]     var src = oNode.getAttribute("src");
[ 8]     var target = oNode.getAttribute("target");

         var ip = oNode.getAttribute("parent");
         var id = oNode.getAttribute("id");
         if (ip > "") {  // Use the given Parent ID to find the parent node
             parent = webFXTreeHandler.getElementById("T" + ip);                           
         }                                                                                    

[ 9]     // create jsNode
[10]     var jsNode;
[11]     if (src != null && src != "")
[12] //      jsNode = new WebFXLoadTreeItem(text, src, action, parent, icon, openIcon);
             jsNode = new WebFXLoadTreeItem(text, src, action, parent, icon, openIcon, id);
[13]     else
[14] //      jsNode = new WebFXTreeItem(text, action, parent, icon, openIcon);
             jsNode = new WebFXTreeItem(text, action, parent, icon, openIcon, id);
[15]
[16]     if (target != "")
[17]         jsNode.target = target;
[18]
         if (parent) { return; }  // Not sure about this, but I don't think
                                  // it makes sense to allow for recursively
                                  // defining a tree if the Parent ID is given
[19]     // go through childNOdes
[20]     var cs = oNode.childNodes;
[21]     var l = cs.length;
[22]     for (var i = 0; i < l; i++) {
[23]         if (cs[i].tagName == "tree")
[24]             jsNode.add( _xmlTreeToJsTree(cs[i]), true );
[25]     }
[26]
[27]     return jsNode;
[28] }


  5. Finally I ran across the need to read an XML file locally. After playing around with it a bit, I modified your _startLoadXmlTree funciton to first try to use the xmlDocument object.  I thought of first checking the protocol prefix, but since most URI references are relative, most will cause an attempt to use the xmlDocument first.  I don't know how much of a performance hit this would be, but I implemented this into your function below and it seems to work fine.
     
[ 0] function _startLoadXmlTree(sSrc, jsNode) {
[ 1]      if (jsNode.loading || jsNode.loaded) { return; }
[ 2]          jsNode.loading = true;
[ 3]         
          if (sSrc.substr(0,7) != "http://") {                          
          if (sSrc.substr(0,7) == "file://") { sSrc = sSrc.substr(7); } 

              var xmlDocument = XmlDocument.create();                   
                  xmlDocument.load(sSrc)                                
              if (xmlDocument.xml > "") {                               
                  _xmlFileLoaded( xmlDocument, jsNode)                  
                  return;                                               
              } 
          } 
                                                            
[ 4]      var xmlHttp = XmlHttp.create();
[ 5]          xmlHttp.open("GET", sSrc, true);    // async
[ 6]          xmlHttp.onreadystatechange = function () {
[ 7]      if (xmlHttp.readyState == 4) {
[ 8]         _xmlFileLoaded(xmlHttp.responseXML, jsNode);
[ 9]          }
[10]      };
[11]     // call in new thread to allow ui to update
[12]     window.setTimeout(function () {
[13]         xmlHttp.send(null);
[14]     }, 10);
[15] }
 

     




Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX