Login Register

SoC Wrapup : Drag & Drop Form Editor

The Summer of Code is over; where did the time go?

Demo

The final demo is available at http://jbalogh.dojotoolkit.org/dojo-svn/release/dojo/soc/test.html

There isn't anything new visually. In the last stretch I:

  • added documentation, cleaned up the code, fixed some little bugs

As Peter suggested, I moved each of my classes to a separate file, and then I wrote an overview of how it all works.

  • taught the Canvas how to populate itself from a JSON string

In the last blog, I mentioned that the Canvas can export it's current state to an array of objects, which can then be turned into JSON. Now the cycle is complete, and another Canvas object can take that exported string and repopulate itself.

  • made a widget that pulls in the entire app

Another suggestion from Peter :-). Adding the form editor to a page is super simple; minus the CSS, this is the source for the test page:

<html lang="en">
    <head>
        <title>test page</title>
        <script type="text/javascript" src="../dojo/dojo.js"
                djConfig="parseOnLoad: true">
</script>
        <script type="text/javascript">
            dojo.require("soc.ed");
        </script>
    </head>
    <body class="tundra">
        <div dojoType="soc.ed.FormEditor"></div>
    </body>
</html>

You just need to dojo.require the editor, and add it to a div somewhere on the page. Templates take care care of all the rest.

  • moved to _Widget.attr

I have some custom setters and getters sprinkled throughout the code, e.g. to update an object variable and set the innerHTML when changing labels. The new _Widget.attr protocol is a cool way to standardize these accessor methods so that client code doesn't need to know if it's setLabel or _setLabel or something else. It reminds me of Python's properties and __getattr__ method.

Final Thoughts

This was my first big Javascript project, and I had a lot of fun working on it and learning about the language. The prevalence of anonymous functions is an interesting departure from other mainstream languages, and I like the functional power they afford.

If I had to do it over again, I'd pick a project more important to the Dojo community. There were a few people interested at the beginning of the summer (thanks for the comments!), but I felt like I was twiddling away in my own corner instead of contributing to Dojo as a whole. That's not a criticism of the Dojo people, I was the one who proposed the project.

The Dojo community is awesome, and the project is adeptly managed. I'm glad I got a chance to become a part of it. Thanks everyone.

thanks for the demo

Hi,

don't think this is a project without importance for Dojo or the community. In contrast i think this is a very interesting demo and i like the idea of having such an editor. Probably we'll try to learn from it when starting our own editor one day ;)

Thanks for that.

SVN server URL?

It looks quite good. Is there a URL on an SVN server from which it can be checked out?