Web-based WYSIWYG Form designer

A few days ago I decided to suppress my “conservative” stance towards massive Javascript usage and started working on a WYSIWYG editor for HTML Forms, The application resembles drag-and-drop GUI editors, I’ve spent lot of time in building the codebase to make it as Object oriented as possible.

The codebase is simply composed of two parts, Core and pluginis “Elements”

Each draggable element is handled by a 2 files

• A javascript file that does the rendering and the event handling “Events are triggered by the core and passed down to each individual element”.
• A php file that defines what properties the element has, these information are used by the core to generate property page, this file is just meant to hold configuration parameters, no actual coding involved.

Adding a new element would just require writing two files and the core handles the rest.

I’m using Prototype, script.aculo.us and Webtoolkit context menu, No true AJAX has been used so far, everything is done on the client side.

Now the question is , what does the end user see?

• Drag and drop environment
• Context menu for each element
• Properties for each element
• Simple keyboard interaction “Selected element can be deleted by pressing the (del) button (except textfield and textarea)”

I’ve tested this on FF2 and IE6.

What I really need to implement right now is the “Resize” function

Why don’t you check A demo of the code in action

I plan to turn this into a Joomla! forms component soon Insh’Allah.

Update: My Proposal to Google Summer of Code has been accepted and I’ll be working on implementing this form editor as a Joomla! 1.5 component, You can find more information about my progress on my GSoC blog

CSS Naked day!

No , My blog is not broken , CSS has been deliberately turned off to celebrate the 3rd CSS Naked day.

You know what, I kinda like my blog the way it is now, without any CSS :).