Banjo – Plone theming made easy with Deliverance

UPDATE: Read the part 2 – Banjo progress report

I recently returned from the Plone Symposium East hosted by the friendly and talented WebLion folks at Penn State University. In the last session of the final day of the conference, I gave a talk about Deliverance, a tool to theme HTML, and how that tool can be used to theme Plone sites. The talk started out by outlining all of the technologies one must learn before one can create a Plone theme product. I won’t go into the details here, but I’ll just say that it’s a lot of skills to expect a designer to learn.

When I saw Deliverance demonstrated several years ago, I saw an easier way, one that truly separates the presentation layer from the content. It’s taken awhile for Deliverance to mature, but from my recent experiences with it, I can say that it’s ready for primetime.

While Deliverance is an incredibly powerful theming tool, that power comes at the expense of complexity. I found myself asking the question: could that power be harnessed and made accessible to a non-developer, a person who just wants to change the look-n-feel of their Plone site?

Two years ago I envisioned a tool built on top of Deliverance that would provide drag-n-drop mapping of elements in your Plone site to placeholders in your theme (HTML/CSS web design). I even spoke with Balazs Ree (co-author of KSS) about this idea at one of the Snow Sprints. We talked about pursuing it, but as is typical after a sprint, everyone goes home and the realities of real work return, and those fun and interesting projects get thrown on the back burner.

Well, I’m happy to say that two years later, I got an opportunity to revisit this idea at the Plone Symposium East sprint. On Friday after the symposium, I was enjoying an almond crunch ice cream cone at the Penn State Creamery, and standing next to me also enjoying a cone was Eric Steele (the newly appointed Plone 4 release manager). I knew that if anyone was qualified to build this tool, Eric was the guy to do it. Besides giving a talk about adding interactivity to your Plone site using jQuery and KSS, Eric is also the author of the popular GloWorm tool for developers – which shares a lot of functionality with the tool I wanted to see built.

I asked Eric what he was planning to sprint on over the weekend. “I haven’t really decided yet,” he said. I then gave him my pitch for this as-yet-unamed theming tool, and would he like to sprint on it with me. Thankfully he said, “Sure, that sounds like an interesting sprint topic to work on.”

And so we began the following morning brainstorming how the tool would work, experimenting with different UI layouts, and digging into the intricacies of jQuery. While we ran into a few technical difficulties (compiling lxml on OSX), at the end of the two-day sprint, we managed to come up with a working prototype, still very rough around the edges, but in a state that at least demonstrates where we are going with it.

We’re calling it Banjo, inspired by the hilarious diagram I discovered on the Openplans website. (Why a Banjo was used to represent Deliverance in this diagram, I leave as an exercise for the reader. 😉

Like the four stringed instrument after which it is named, Banjo has four “strings” it can play, the four actions provided by Deliverance: drop, replace, append or prepend. Each of these verbs represents an action that you can perform on elements in Plone’s HTML and/or the elements in your theme’s HTML.

Here’s how it works: Banjo is a web-based tool which loads in the browser. The browser window is divided into three panes: one pane that loads the Plone site, one pane that loads the theme, and one pane that we’re calling the control panel. You simply click on the element in your Plone site, and then click on the corresponding element in your theme to “map” these elements together. The resulting mappings are written out as rules in the rules.xml file, which is used by Deliverance to insert Plone’s HTML in the proper placeholder in the theme’s HTML.

This process is probably best explained in this short screencast. Please note that the mapping part is not implemented yet. We’re still exploring the best way to do this, possibly using some kind of drag-n-drop interface.

We’re still in the early stages of building this tool, and there’s a lot of work to do before we have something that is production ready. But for those of you who like to live on the bleeding edge, you are welcome to download the buildout and try out what’s there already. Release early, release often!
If you are a developer and want to help out, please join the mailing list and introduce yourself and what you’d like to work on. You can check out the task list to see what’s on the roadmap. And please give us your feedback! We want this to be a tool that makes Plone theming easier, so if you have ideas for making it better, don’t hesitate to make your voice heard.
Read the part 2 – Banjo progress report