New Collection Editor

Thanks to @hedleyroos and @rochecompaan out at Upfront Systems, we're delighted to have a shiny new collection editor. There's a separate post that gives a great overview of how to use it but in this post I'll go under the hood and describe a bit about the technologies used and how they were implemented. Finally, there are a couple of "gotchas" we ran into that are worth discussing.

The editor uses two JavaScript frameworks, ExtJS and jQuery, along with Zope Page Templates (ZPT). Zope is the templating engine used to implement Connexions. The editor uses AJAX (Asynchronous Javascript And XML) to call the server on Connexions. This eliminates the need to refresh the entire page as the old editor did. Users start off with an ExtJS tree that shows how the collection is organized. The tree is reorderable with links to add/delete Subcollections or modules. On load, the collection hierarchy is requested as JSON from a ZPT. JSON (JavaScript Object Notation) is a lightweight data-interchange format.

Every time a module or subcollection is dragged and dropped, a call is made to Zope to update its objects. Since these objects can be moved anywhere in the hierarchy they may get a new parent. To handle this in Zope, we cut, paste, and reorder.

Gotcha 1: Initially the Zope UID was used to keep the Javascript and Zope objects in sync. However, when an object is pasted the UID changes. In the code both the UID and path to the object (using ids) were used but in order to support moving the node to a different parent both would have to be updated so we switched to calculating the path on each update.

The editor also has popup dialog boxes for editing properties of the collection. When a button to open a dialog box is clicked an AJAX call is made to Zope and the resulting HTML is injected directly into the page. The HTML that is sent back also contains a Javascript tag that contains all the logic needed for the dialog. Sending back HTML from the server has the advantage of using the Zope internationalization machinery to support other languages and by keeping the Javascript in the same file it is easier to keep track of which code goes with which dialog box.

Gotcha 2: Those pesky corner cases (in form submission, cancellation, and validation).

Since we request HTML from Zope, very little state is stored on the browser. To support canceling a dialog box, we had to first store the default values. When a user enteres some invalid data and submits, Zope does a nice job of rendering the form with how to fix the problem. However, if the user cancels, we needed to scrub the form clean, removing the validation errors as well.

So, that's a quick run through the new Collection Editor and if you're interested in the code, it can be viewed at our trac page.