PMAP: Tree control
May 5, 2007
Here is our first PMAP control: the Tree View. Please look at the demo in Morfik Labs (as soon as it is up) (it is uploaded!).
Our new Tree View will allow you to build trees of virtually any complexity, even containing HTML and the ability to command other parts of your user interface. It has been optimized to keep its performance sustained even with large trees. The PMAP code set contains both the full source code of the tree control and the continuously growing infrastructure functions we are using to build high performance controls and applications.
Some highlights:
- Full keyboard navigation.
- Multiple levels of customizability (style sheet, properties, events, etc.).
- Any tree node can contain valid HTML.
- Build the tree either through the control API, or with the help of XML or JSON.
- Performance optimized.
- Multiple selection support (with keyboard navigation, too!).
- Fixed height or elastic sizing based on content.
- Dynamic loading API for huge trees.
A few words about the demo:
- The default tree demonstrates a few things, like embedded hyperlinks, user interface commanding (will turn the pages in the Tab control in an event handler), and various icons.
- You can edit this tree or create your own in many ways
- by building it up node-by-node,
- by adding complete sub-trees defined in JSON format,
- by specifying the entire tree in XML or JSON format, or
- by generating a tree based on some parameters.
- You will notice that using the JSON interface is much faster than the XML interface. This is indeed a good comparison of the JSON v.s. XML support of your browser (see the Log for timing data).
- You will be able to customize many of the node and tree options.
- How to use the Items page:
- First press “Set Items (XML)” (and be patient;-: it will set up a test tree that is in the editor on the right in XML format.
- Then press “Get Items (JSON)”: the editor will be filled with the JSON version of the same tree.
- Careful: press “Clear” below the tree control, to make the tree empty (it is lovely to have so many Clear buttons:-).
- Now press “Set Items (JSON)”: your tree will be re-built much faster (just look at the log, on some configurations the difference can be 50 fold+!).
- If you want to get back the original tree, just press “Default content”.
Feel free to play with the control and let us know of your findings (either by commenting here or by dropping a mail).
