Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Steve's Blog / Google Summer of Code & PloneFormgen

Google Summer of Code & PloneFormgen

Posted by Steve McMahon at Jul 13, 2010 06:30 PM |
Filed under:
Nenad Mancevic (Manca) has been doing some great work adding dynamic UI elements to PloneFormGen.
Google Summer of Code & PloneFormgen

Widget Manager

Google's Summer of Code Program offers students around the world the opportunity to do some paid summer work for open-source projects. It works by pairing students and experienced project mentors. GSOC has been very good to the Plone project over the years; we've had several students every summer.

This summer, I'm working as a mentor with Nenad Mancevic (Manca), who's adding some great new dynamic User Interface elements to PloneFormGen. PFG's a generic form builder for Plone that's aimed at end users and site admins: it allows them to quickly build simple forms to do simple things like record or e-mail input.

PloneFormGen uses the Plone interface for adding and maintaining content. The advantage of that is that it gives users a very familiar interface for building forms. But that's meant that it lacks a lot of form-oriented niceties to help out more proficient users.

Nenad is using jQuery, jQuery Tools, and a little jQuery UI to add some dynamic form-editing tools that power users will really love. Let's take a quick look at some of what he's already got going. You may check out Nenad's work in detail by taking a look at his svn branch, which is currently working with Plone 4.

Widgets Manager

When you click the "quick edit" flag on a PFG form, the first thing you'll notice is a new "Widgets Manager" displaying all the form fields and actions you may add to the form. Nenad had to dive pretty deep into Plone and PFG to find a way to grab a list of all of the PFG types which may be added at a given location by a given user. (Remember, there are lots of third-party field and action add ons for PFG that need to be included automatically.)

The Widget Manager is going to allow Nenad to offer a drag and drop mechanism for adding new fields and actions to a form.

Drag-n-DropSpeaking of Drag & Drop

PFG's quick editor has been using some code repurposed from the Plone folder reordering mechanism. It had some oddities, and offered little user feedback. Nenad's replaced it with some new, very slick functionality imported from jQuery UI. (A minimal import that doesn't drag in any of the bigger chunks of jQ UIs behemoth bulk.)

AJAX Inline Editing

When you're making a quick change to a form, chances are that you're just changing a field name of its required flag.

Inline Editing

No need to pull up the full field editor with Nenad's new AJAX in-line editing. And a good chance for Nenad to master calling content object methods from jQuery's AJAX handlers.

Required Field Validation

HTML5 Validation

HTML5 is on its way, and includes some super new browser-based field input validation. jQuery Tools' latest version has some very nice code that retrofits many of these capabilities into earlier browsers. HTML5 browsers will use their native capabilities; old and crusty browsers will get a quick upgrade via JQT. Nenad's been fitting it into PFG so that PFG sends the new HTML5 field validation attributes, along with the JQT support for older browsers. So, you get validation without the round trip to the server, in a web-standards way.