CPS Ajaxification, round #6 a dynamic tree and an event oserver

Features

The treeview that we wanted is pretty similar to what Zope 3 has (xmltree), except that it one is implemented with scriptaculous. The principles are quite simple: branches of the tree are asynchronously loaded through Javascript whenever we need it. Scriptaculous provides the nice fade-in effect, which make the whole thing looks good.

Now the biggest deal was to be able to hook the treeview with what happens in the center of the page.

Since some drag'and'drop features were previously added, the tree needs to be refreshed whenever a drop which changes the structure of the portal is made. In our case, it happens when folders are reordered or a folder is dropped over the treeview. A event mechanism has been created, in order to be able to refresh the treeview whenever a 'drop event' happens.

See 'implementation details' section for some details.

Screencast

Implementation

The treeview is displayed in a portlet, which is, thanks to the briliant people that have thaught it, a standalone document. In other words, a simple Five view was the only thing to add to be able to query the server for an fresh version of the portlet

The treeview acts as an observer over the page, registering itself on all 'drop' events. This is done with a simple javascript class that gathers for each event name, a list of functions to call when the event is triggered. The drag'n'drop features triggers the so-called event, and the function asynchronously gets the new rendered portlet