- Other Computing Topics (243)
- Other Topics (373)
This document is my attempt to describe the fancier architecture. I have been using fancier for a while, at blogory.org, so I understand a lot, but if I get something wrong, I hope that the experts willl be kind enough to correct this.
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.
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.
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.