FancyTree is great software, with a well documented api, but it is a bit difficult to figure out what is going on under the hood. This is what I have learned so far. Read More

FancyTree Architecture


This document is my attempt to describe the fancier architecture.  I have been using fancier for a while, at, so I understand a lot, but if I get something wrong, I hope that the experts willl be kind enough to correct this.


Fancier implements trees in the web browser using Javascript and the DOM.  There are three representation of a tree.  The one in the DOM, the one in Javascript and the one on the server.  Fancytree provides the tools to coordinate these trees.


A tree starts off on the server.  Fancytree does not control how you represent your tree on the server.  Only how it is transmitted to the client. Trees can be sent to the client as HTML, as a json tree, or a json list of nodes, each naming their parent.  Trees can e sent to the client in one server call, or parts of the tree can be sent to the client at a time using lazy loading. Trees can also be stored on the client browser persistent store.


Once a tree gets to the client, Fancytree takes over.  There are two representations not he client.  In the DOM, and in Javascript.  Reportedly the DOM is less efficient, and so what FancyTree does is only tells the DOM about part of the tree, based on user interactions.  


In the Javascript world, FancyTree represents the tree as a tree of nodes.  Each node has a parent pointer, and possibly a list of children.  It has a key, which is its name. It has a title which is the display name. It has a data object which contains additional custom fields the user can define.  It carries two state variables (expanded, selected)  It carries two variables which affect the display ( extra CSS classes, tooltip).  And some fields that determine how it is treated by Fancy Tree.  (Status Node Type, lazy, folder).  It has a cache of the tree pointer, which could also be found by climbing to the root of the tree. 


You can read the full and excellent documentation here.



Fancier Nodes are part of a FancyTree.  The tree object aggregates information about the tree (name, $div, $container,  activeNode, selectedNode, rootNode).  The tree object keeps track of things that FancyTree needs. ( A namespace, Aria Property name, hash of extensions, property name used by single elements, status class property name, and options.  When you get to the point where you want to understand those last items, read the docs.


Fancier node also maintains a representation of the tree in the Dom.  I have not been able to find any documentation on this model.  In general it is a tree of Ul and LI elements with large number of css selectors.  Maybe the best way to understand it is to just use the browser developer tools to inspect the CSS elements.   


As things happen, Fancytree modifies the DOM, and uses animation to make to open and close the tree in a  graceful manner.  And in the process, FancyTree generates lots of events to empower the user.



Here are some of the critical FancyTree concepts.


Let us look at the very import function expand node.  This shows all the nodes immediately under a particular node.  When a folder node is expanded, Fancytree creates a new <UL> </UL> section with a list of <li> elements in it.  One <li> element for each child.  Maybe their height is initial set to zero, and then some animation expands the node gracefully.   Calling setExpanded (false) does the reverse. 


FancyTree Extensions.

There is a very excellent description of how FancyTree Extensions are written.



That is about all I know.  But at least I now know what questions I would like to ask. 

  • 1.  What its he DOM model for FancyTree?
  • 2. What do all of those different CSS classes do?
  • 3.  What happens for each event.  Or at least for one of the most important events. 













Powered by Zopache, Grok, Zope and ZODB