Yesterday, I committed to the Cocoon svn repository a new Tree widget for Cocoon Forms.

Trees and more generally hierarchical structures are traditionally some of the most complex and painful things to implement in web applications. And ready-made implementations often don't allow much flexibility in the presentation.

Cocoon Forms uses, as everything in Cocoon, a strong separation between content and presentation. So does the Tree widget.

It is heavily inspired by Swing's JTree for its server-side part, featuring a lightweight tree model that can handle arbitrarily large data structures. Server-side event handlers, written in plain Java or in Javascript, can be attached to a tree to react to changes in the selection.

The presentation part relies on a few new templating primitives that make it dead easy to layout the tree in whatever way you want. And of course it uses the transparent Ajax framework for quick roundtrips and a better user experience.

One of the quickly hacked demos for this new widget is a two-pane file explorer. It uses two trees, one for the directory hierarchy and one (of depth 1) for the file list of the currently selected directory, and an output (readonly) widget for the status bar.

The explorer's form definition shows how easy it is with event handlers to react to user inputs. The form template shows the use of the new <ft:tree>, <ft:tree-nodes> and <ft:tree-children> instructions to layout the trees.

Having started more than 5 years ago as a publication-only framework, Cocoon is now a very efficient platform to build complex web applications, and this tree widget is another step forward in managing complex user interactions.