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












(if you read this entry through a aggregator, you should open your flash enabled browser
to see the 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


All the code is viewable here: http://svn.nuxeo.org/trac/pub/browser/CPSPortlets/trunk/browser/

and here is the class that register event observers and trigger them : http://svn.nuxeo.org/trac/pub/file/CPSDefault/trunk/skins/cps_javascript/cpsdefault.js.dtml (see at end of file)

(Post originally written by Tarek Ziadé on the old Nuxeo blogs.)