A tree widget is basically a bunch of collapsible containers, when you open a node all it's child nodes becomes visible, and when you close it they're hidden. The basic idea is that simple however there are a few things that makes it a bit more complicated. Below you'll find information about parts of the implementation of this tree widget, how the generated code looks like and how a few of the methods work. This is not something you need to read and understand in order to use this widget, however if you're interested in how this was made and how it works you might find this helpful.

Generated Code

As described earlier the tree widget uses an object hierarchy implementation to simplify the creation of trees, however since the browser cannot understand that object hierarchy we are required to convert it into something that the browser can render, in this case guess what we're using? Yeah you where right, our old buddy html. Below is the generated html code for a small tree with only three items. Further down this document you'll find the same code but split up and described.

<div id="webfx-tree-object-0" ondblclick="webFXTreeHandler.toggle(this);" class="webfx-tree-item">
  <img id="webfx-tree-object-0-icon" src="images/openfoldericon.png" onclick="webFXTreeHandler.select(this);">
  <a href="javascript:void(0);" id="webfx-tree-object-0-anchor">Root</a>
</div>
<div id="webfx-tree-object-0-cont" class="webfx-tree-container" style="display: block;">
  <div id="webfx-tree-object-1" class="webfx-tree-item">
    <img id="webfx-tree-object-1-plus" src="images/L.png">
    <img id="webfx-tree-object-1-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
    <a href="javascript:void(0);" id="webfx-tree-object-1-anchor">1</a>
  </div>
  <div id="webfx-tree-object-2" class="webfx-tree-item">
    <img id="webfx-tree-object-2-plus" src="images/L.png">
    <img id="webfx-tree-object-2-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
    <a href="javascript:void(0);" id="webfx-tree-object-2-anchor">2</a>
  </div>
  <div id="webfx-tree-object-3" class="webfx-tree-item">
    <img id="webfx-tree-object-3-plus" src="images/L.png">
    <img id="webfx-tree-object-3-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
    <a href="javascript:void(0);" id="webfx-tree-object-3-anchor">3</a>
  </div>
</div>

WebFXTree Object

The code below is what is generated from the WebFXTree Object (it will however also contain the code from all tree items but to increase the readability that code has been removed).

<div id="webfx-tree-object-0" ondblclick="webFXTreeHandler.toggle(this);" class="webfx-tree-item">
  <img id="webfx-tree-object-0-icon" src="images/openfoldericon.png" onclick="webFXTreeHandler.select(this);">
  <a href="javascript:void(0);" id="webfx-tree-object-0-anchor">Root</a>
</div>
<div id="webfx-tree-object-0-cont" class="webfx-tree-container" style="display: block;">
  <!-- This is where the Tree Item's will be inserted -->
</div>

The first div contains the top level icon and label while the secund div is the container that will house the tree items. When the first div is double clicked the display property of the secund one will be toggled.

WebFXTreeItem

The code below is what is generated from a singel WebFXTreeItem Object.

<div id="webfx-tree-object-1" class="webfx-tree-item">
  <img id="webfx-tree-object-1-plus" src="images/L.png">
  <img id="webfx-tree-object-1-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
  <a href="javascript:void(0);" id="webfx-tree-object-1-anchor">1</a>
</div>

As you can see the code generated by each WebFXTreeItem looks pretty much the same as the one for the WebFXTree object, the main difference is the extra image(s) that the tree items has (the plus/minus and track icons). Also note that the code shown above is from a tree item without children. If the tree item has children an extra div to contain those will be added (much like the secund div generated by the WebFXTree Object).

Expanding/Collapsing

The most important methods for this widget are expand and collapse. Here I'll try to describe how those works. As the html code above showed webFXTreeHandler.toggle(this); is executed once a tree item is clicked. The tree handler then uses an internal reference, webFXTreeHandler.all to look up the object for the clicked tree item. Once the object has been found it executes the toggle() method on that object.

Below is the code for the toggle method and as you can see all it does is to check whatever or not the item is currently expanded or collapsed, and then calls the appropriated method (expand if it's collapsed or collapse if it's expanded).

WebFXTreeItem.prototype.toggle = function () {
  if (this.open) { this.collapse(); }
  else { this.expand(); }
}

Since the expand and collapse methods works pretty much the same I'll only describe one of them, the expand method.

WebFXTreeItem.prototype.expand = function () {
  if (!this._subItems.length > 0) { return; }
  document.getElementById(this.id + '-cont').style.display = 'block';
  document.getElementById(this.id + '-icon').src = openFolderIcon;
  document.getElementById(this.id + '-plus').src = this.minusIcon;
  this.open = true;
  setCookie(this.id.substr(18,this.id.length - 18), '1');
}

The first line of code checks to see if there are any children, since it doesn't do any good to expand it unless there are. The next line is the most important one and does the expanding by changing the display mode of the div containing all children to block. The next two lines changes the icon and the plus/minus sign, then the open property is changed to reflect the expanded/collpased state and finally it sets a cookie (used to keep track of what's expanded or not so that the tree can be restored to it's previous state the next time you visit the site).

History & Introduction
Usage
API
Implementation
Demo
Download