GSoC Midterm Report

I have spent the last month(s) working on the new z3c.formjs package. This package builds on Stephan Richter’s recent release of z3c.form (a new and improved, built from the ground up, uber pluggable component architectured form framework). The primary goal of z3c.formjs is to make it really easy to enhance your forms with javascript and ajax. As a quick example of why such a framework is necessary, consider the “hello world” of enhancing a form with javascript.

Hello World (the old way)

Let’s imagine we want a simple form built with any form framework (formlib if you insist) with just one button “Click Me!”.
I won’t actually write the code for this because it would take too long, but I will explain generally how it is done.

  1. Write your form view class (using z3c.form or formlib) with one button/action/whateveritscalled defined in the form
  2. Write a javascript file with a clickme function and something to hook the dom element generated by the form to this function. Don’t forget to return null from the clickme function or the form will be submitted after the alert is cleared.
  3. register this file as a resource
  4. create a viewlet for this resource. Don’t forget the viewlet manager, if you don’t have it already
  5. test it out and futs with your javascript code to make the event hook up work with whatever type of dom element your form framework generates. Don’t forget to triple check the id of the dom element.
  6. profit?

If it is this much trouble, you might as well put everything into a custom page template, which unfortunately will be a pain to extend and maintain.

Hello World (the z3c.formjs way)

This time I will actually write the code because it is just so short:


class HelloWorldForm(layout.FormLayoutSupport, form.Form): #using z3c.form
    buttons = button.Buttons(jsbutton.JSButton('clickme', title=u'Click Me!'))
    @jsaction.handler(buttons['clickme'])
    def clickMeHandler(self, event, selector):
        return 'alert("Hello World!");'

As much as I’d like to write more, that’s it.

What has been accomplished

So, the hello world example above really does not scratch the surface of what we would want a JavaScript form framework to do. The following is a list of things you can now do with z3c.formjs:

  • Easily connect javascript to:
    • buttons
    • fields
    • arbitrary DOM elements
  • Validate field values on the fly using ajax
  • Create handlers for ajax requests in a form
  • Use any JavaScript framework you want provided you write renderers for it
  • Use jQuery without having to write renderers (they are already done)

I won’t go over how each of these things work here because it is all in the various *.txt files located in the package. These *.txt files are also fairly thorough tests at 99% test coverage. In fact you can see recent coverage reports here: http://beta.carduner.net/docs/z3c.form-coveragereport/all.html.

For your convenience and reading pleasure, you can look at the *.txt files below (they are iframes linked to the svn files).

README.txt

jsevent.txt

jsaction.txt

jsvalidator.txt

ajax.txt

jqueryrenderer.txt

What is next?

There is still plenty left that can be done. And some of those things will get done! They are the following:

  • ajax form submission (think of the “save” button in gmail)
  • ajax widget switching: switching a display widget for an edit widget
  • plain JavaScript function definitions wrapped in a python function – now you can reference a JavaScript function in python!
  • client side JavaScript field validators for simple cases
  • More…?

Demo

What about cool nifty demos? You can check them out *live* at http://demo.carduner.net:8080. You wouldn’t have to use the 8080 if I had set up proxy passing correctly but alas… apache configuration is not my specialty at the moment. The demos are pretty self explanatory. If you want to have extra fun, use firebug in Firefox to watch that ajax requests get sent and processed. Also take a look at the source to see the generated javascript. Alternatively, you can install the demo locally quite easily:


svn co svn://svn.zope.org/repos/main/z3c.formjsdemo/trunk z3c.formjsdemo
cd z3c.formjsdemo
svn co svn://svn.zope.org/repos/main/z3c.formjs/trunk z3c.formjs
svn co svn://svn.zope.org/repos/main/z3c.form/trunk z3c.form
python2.4 bootstrap.py
./bin/buildout -Nv
./bin/demo fg

Yes, I know, that is not *quite* easy, but there should be an egg available on cheeseshop within a couple days for a 0.2 release. I’ll announce that on this blog as well.

Final words

I cannot thank Stephan Richter enough for providing me with lots of technical support. He was grateful enough to talk me out of some bad ideas, and let me talk him into some good ideas. He also did some very helpful refactoring after the initial coding spike. Then of course there were the numerous hours we spent on skype/wengo/gobby thinking about the use cases and API. He was even willing to modify z3c.form to handle some of my unique use cases. I don’t think I would have gotten very far without his help. I also have to thank my real mentor, Martijn Pieters, who has been very helpful in his position of proverbial whip cracker. It was also really nice to finally meet a lot of zope3ers at EuroPython where I gave a quick lightning talk on the z3c.formjs demos and attended the SchoolTool sprint. They also may have talked me into hosting some kind of zope related sprint in Southern France sometime in the future. I’m looking forward to a very successful end of the summer project that I hope will be integrated into Plone, Zope Corp products, Grok, SchoolTool, and lots of other Zope3 projects. Hopefully volunteers will materialize to write renderers for MochiKit, KSS, prototype, and all the other JavaScript frameworks.

About these ads
1 comment
  1. Very interesting… as always! Cheers from -Switzerland-.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 75 other followers

%d bloggers like this: