Tree Editor 
Image
Image
Image
Image
Image
Image
Image
Collapse all tree nodesExpand as far as level 2Expand all tree nodes
Expand this node
Collapse
Expand this node
Image Image Image
Introduction
Image
This site offers:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Image Image Image
Image
...which displays collapsible, hierarchical tree structures on web pages;
Expand this node
Collapse
Expand this node
Image Image Image
Image
...which allows hierarchical tree structures to be created and manipulated using a web browser.
Expand this node
Collapse
Expand this node
Image Image Image
Technology overview
Image
The tree display is generated on the server using PHP;
Image
It's rendered on the client using JavaScript and DHTML;
Expand this node
Collapse
Expand this node
Image Image Image More details...
Image
The tree editor manipulates a representation of the tree in a standard SQL database;
Image
The tree editor uses a double database abstraction layer;
Image
By default, the editor is set up to access MySQL via Pear - but other configurations are possible;
Image
Trees can be rendered directly from database tables via SQL.
Image
Trees can also be generated directly from PHP;
Image
The code works with PHP 4 and PHP 5.
Expand this node
Collapse
Expand this node
Image Image Image
Tree viewer
Image
The tree viewer component generates collapsible, hierarchical trees on a web pages.
Image
The tree viewer has its own web page here;
Image
The tree is dynamic - users can:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Image Image Image
...expand nodes:
Image
...to reveal additional details - or...
Expand this node
Collapse
Expand this node
Image Image Image
...collapse nodes:
Image
...to conceal superfluous information.
Image
Trees can be nested;
Image
Arbitrary HTML can be used in tree nodes;
Expand this node
Collapse
Expand this node
Image Image Image More details...
Image
All content wraps correctly - without disturbing the tree display;
Image
Trees are presented using a familiar interface - one immediately familiar to any users who have ever browsed through the directory structure of their machine's filing system;
Image
The tree viewer is available as a stand-alone component;
Image
Information about which branches of the tree are visible persists even if the page is left and returned to later.
Expand this node
Collapse
Expand this node
Image Image Image
Tree editor
Image
The tree editor application allows users to create and manipulate hierarchical trees using an ordinary web browser;
Image
The tree editor has its own web page here;
Image
The tree is rendered using the tree viewer component while it is being edited - providing a degree of "WYSIWYG" editing;
Image
Several sorts of operation are permitted to be performed on the tree:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Image Image Image
Single node-oriented operations:
Image
...allow single "leaves" to be created, manipulated, modified or deleted;
Expand this node
Collapse
Expand this node
Image Image Image
Branch-oriented operations:
Image
...allow branches of the tree to be pruned - or grafted to other locations in the tree;
Expand this node
Collapse
Expand this node
Image Image Image
Mass-node operations:
Image
...these allow large numbers of nodes to be manipulated at once.
Image
Branches of the tree can be treated as though they were independent roots;
Expand this node
Collapse
Expand this node
Image Image Image
Applications
Image
Many structures naturally form hierarchical trees:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Image Image Image
Threaded discussions:
Image
...often posts are made in response to other posts - and a natural way of rendering the results is a hierarchical tree;
Expand this node
Collapse
Expand this node
Image Image Image
Human family trees:
Image
Here a tree is a natural way of following blood lines;
Expand this node
Collapse
Expand this node
Image Image Image
Nested lists:
Image
In cases where lists can contain other lists, a natural representaion is a hierarchical tree;
Expand this node
Collapse
Expand this node
Image Image Image
Taxonomical diagrams in biology:
Image
Biological taxonomies are family trees on a grand scale;
Expand this node
Collapse
Expand this node
Image Image Image
Addresses, domains, file paths:
Image
The need to specify addresses as strings often results in them being arranged into a hierarchical tree;
Expand this node
Collapse
Expand this node
Image Image Image
XML/HTML documents
Image
A number of common document formats are structured into elements which naturally form nested hierarchical trees.
Image
Collapsible trees also have many applications:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Image Image Image
Collapsible trees can hide irrelevant information:
Image
Information such as footnotes or references is often best kept out of the way of the casual reader. A collapsible tree can hide this information - while still keeping it only a click away;
Expand this node
Collapse
Expand this node
Image Image Image
Collapsible trees can act as summaries:
Image
A collapsible tree can present a summary initially - while still allowing readers to "drill down" on the points that interest them - without swamping them initially with lots of irrelevant details.
Image
More examples should be available soon on our page of sample applications.
Expand this node
Collapse
Expand this node
Image Image Image
Sample applications
Image
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Image Image Image
Image
This SQL/DHTML application can be used to track problems and bugs. It uses the tree viewer component to render its display.
Expand this node
Collapse
Expand this node
Image Image Image
Image
This application allows the contents of a directory on the server to be navigated. The tree viewer component is again used to display the directory structure.

Expand this node
Collapse
Expand this node
Image Image Image
Other sample sites
Image
There are a variety of sites using the tree component.
A list of sample sites is available on the page devoted to the tree viewer.
Expand this node
Collapse
Expand this node
Image Image Image
Source code
Image
Source code for the tree viewer tree editor and is available here.
Expand this node
Collapse
Expand this node
Image Image Image
License
Image
Everything on this web site has been placed into the public domain by its author.
Expand this node
Collapse
Expand this node
Image Image Image
Development
Image
This program is under active development - and you're welcome to join in.
Expand this node
Collapse
Expand this node
Image Image Image More details...
Image
The license terms of the code maximise the ease of reusing this code in other projects.
Image
If you use the code, you are warmly invited to contribute any constructive changes you make back to the project.
That way others benefit, the project benefits - and you are likely to benefit as a user of it.
Image
To give some idea of what's planned, here are:
Expand this node
Collapse
Expand this node
Image Image Image Tree viewer
Image
...the "ToDo" list;
Image
...the list of known problems;
Expand this node
Collapse
Expand this node
Image Image Image Tree editor
Image
...the "ToDo" list;
Image
...the list of known problems.
Expand this node
Collapse
Expand this node
Image Image Image
Links


Tim Tyler | Contact | http://treeeditor.com/