Chapter 11. Tree View

In this chapter, we will be creating an Ajax-enabled tree view component. This component will accept an XML file that will define the structure of the data and render it as a tree view in a specified HTML element or the document body. The tree view will have expand and collapse functionality and custom icons for folders. Each folder will have the capability to add HTML-enabled content, which in our case will be used to produce hyperlinks. These hyperlinks can be used for just about anythingfor example, they can be used for internal or external website navigation or they can be used in a web application, as we will be doing in the final sample with our email application that will display specific folders with hyperlinks to emails.

This component will consist of two objects: treeManager, which will control and bridge the gap between the Ajax engine and the graphical user interface (GUI), and tree, which will render the GUI after parsing the response data it receives from treeManager. A fully rendered tree view will look similar to Figure 11.1.

Figure 11.1. A fully rendered tree view.