Handling the Response

The TReeManager object is the access point to the component. This object bridges the gap between the Ajax response and the tree object in the view or the GUI.

treeManager may be a small object, but it helps to separate the back-end response data from the GUI by adding an extra layer to act as a data controller, which is something we will cover in more detail in Chapter 15, "Model View Controller."

The display method (see Listing 11.3) first checks to see if the ready state of the Ajax object is successful. After it receives the 'OK' string, it is ready to parse the response from the request. The difference between this controller and the controllers in the other components is that we do not actually parse any data from the response in this object; we simply pass it to the TRee object when we instantiate it. After we have a tree object that has received the response data, we simply use the Utilities object from Chapter 9, "Extending the Engine," to append the tree display directly to the body of the page. Alternatively, if we want to add it to a specific HTML element, we can append it to a specific element by name.

Listing 11.3. Creating and Displaying the TReeManager (TReeManager.js)

 TreeManager = {}; TreeManager.display = function() {     if(Ajax.checkReadyState('loading') == "OK")     {         var tree = new Tree(Ajax.getResponse());         Utilities.appendChild(document.body, tree.display());               //tree.toggle();     } } 

You will notice that this method also contains a tree object method called toggle. This method toggles tree items open and closed. Because the tree view will render itself in an expanded state by default, the display method has the capability to call the toggle method to change the tree view to a collapsed state by default instead. The next method is to set the custom icon (in our case, the folder) from an image that represents the expanded state to an image that represents the collapsed state. This method is called toggleImage and can be seen in Listing 11.4.

Listing 11.4. Toggling Custom Folder Icons (treeManager.js)

 TreeManager.toggleImage = function(id) {     if(Utilities.getElement(id) != null)     {        if(Utilities.getElement(id).src.indexOf('img/folder_o.gif') == -1)        {            Utilities.getElement(id).src = 'img/folder_o.gif';        }        else        {            Utilities.getElement(id).src = 'img/folder.gif';        }     } } 

This method can be changed to include any images that you choose as the icons for the categories. As you can see, it checks by id to see whether the specified category icon has an index of the expanded or collapsed version of the image. Based on which image it currently has, it chooses the other, which creates a toggle effect. Next, we will be creating the TRee object, which will render the tree view for display in the GUI.