Web-based WYSIWYG Form designer
Posted by مصطفى in English, Javascript, PHP Apr 14th, 2008 | 6 responsesA 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
6 Responses to “Web-based WYSIWYG Form designer”
Leave a Reply
About Me
Just give it a 25-letters Latin name and it will be much fun
I’m open for suggestions :)
zOMG!!
DUDE YOU ROCK!!!
really , great work man :)
after i drag some elements and try to debug i have an alert with the status of some elements , i delete all elements and the alert back when debugging [explain more about it ] ?
my suggestions are :
* add (required) option to the menu with the [delete] option
instead of it’s place in property page
* i agree with you to try present the ( Resize ) function
* try to make link to add upload filed under the previous one in one div with one label
* add [captcha code] element to prevent the form from spam ;)
finally , rabena yezedak we yewfa2ak ya drsh
Okay ,All elements you see in the workspace are stored in an array, the index of each element in that array is used to identify it, Now when you delete an element (Say index 5) I set elmentsArray[5] = null; , I don’t reorder the array because if I do this would change the id of all the elements that follow, IDs are meant to stay constant during the form design session.
Although the context menu is all cool and makes thing easier to use, It doesn’t work on Opera “Opera doesn’t allow Javascript to use Right mouse button”, So I will need to workaround it (e.g. Use a button to trigger it).
Adding “required” to the context menu won’t be straight forward as I will need to write support for “Toggle” menu items, but I think that’s inevitable :P.
I’ll be adding more elements as soon as the “Elements framework” is stable enough.
Thanks for your input.
الى الامام يا بطل
والله مشروع اكثر من رائع
انا مبتدىء فى جملة واكاد لا افقه شىء فى البرمج
لكن بجد اول ما شوفت مشروعك وشوفت الديمو
لاقيت انه اكثر من رائع
قولت لازم اعلق
وانا اسف لو تعليقى خارج عن صلب الموضوع
منتظرين منك الكثير
وان شاء الله نشوف مشروعك فى جملة فى اقرب وقت
وارفع رأسنا يا بطل
بالتوفيق ليك ان شاءالله