Hello Planet Dojo! I'm Jeff Balogh, and I'm doing a Google Summer of Code
project for Dojo this summer. I'm an undergrad at the University of Central
Florida, with one more semester to go. I'm living in Toronto this summer and
working with the DrProject folks, so drop me a line if you're in the area. :)
For this SoC, I'm creating a drag & drop form editor for Dojo. It's not
intended to be a full-featured IDE; I want to make a fun,
easy way to interact with Dojo and Dijit in the browser.. I'm planning to use a
lot of the great work already available, like dijit.form for the widgets and
dojo.dnd for all the fancy moves. This project will provide a way for dojo
users to embed dynamic, customizable forms in their apps, and I'm hoping it can
also be a nice introduction to using dojo for newcomers.
Currently, the plan is to have a drawing area where you drag and style your form
elements, an HTML source editor for twiddling with all the little details, and a
high-level property editor that exposes the important aspects of each element,
like custom validation and callback code.
My mentors are Peter Svensson, Liu Cougar, and Greg Wilson.
This is my first big javascript project, so tips and suggestions are very
welcome! I'm looking forward to a fun and illuminating summer.
good luck
I'm very interested in what you come up with. I can see a great use for this functionality in an app i'm developing at the moment.
Thanks!
May I ask what your app is?
my app
its a database table maintenance app. Where I see your form creator fitting in is for letting the user create forms for maintaining database tables where a standard metadata generated form isn't sufficient. Such functionality would be a long way down the track from where I'm currently at though.
Awesome
I know I suggested this one (maybe along with some others) for the SoC so I am very interested in the outcome. Our current app is a dynamic form editor. We are porting it from a clunky VB6 windows app (which generates the web page forms for use by end-users) to work in a browser using dojo. The first cut won't include the DnD WYSIWYG stuff as our imposed delivery timeframe is too short so initially we will use a tree outline of the form using the dojo Tree with some of the DnD just for cut/copy/paste of form elements as nodes in the trees and then editing the properties. Selecting a node will display the nodes properties in a property grid. We use a layout approach so you have to create panels on the form before you can drop fields onto the form and each layout can be split into proportional columns.
The 2nd cut will hopefully include the WYSIWYG functionality.
So my guess is you will use something like a 3 pane approach with LHS being a toolbox (Accordion?), middle pane for WYSIWYG and RHS pane for property grid like a lot of GUI designers (probably based on the BorderContainer). I've done some (very) simple prototypes based on this setup and have some basic functionality in about a page and a half of code (mostly cut/paste from the dojo test examples).
Not sure if you intend any rubber band selection to select more than 1 item at a time to move/cut/copy but I always saw this as the major challenge. I also wanted to attach visual handles to widgets when selected. Another point to consider is whether to allow pixel precision positioning of elements or more of a snap-to-grid approach.
If you are interested I can give you further details of our app and some of my future plans.
awesome indeed.
Yes, what you described is pretty similar to how it looks in my head. We'll see how it turns out though.
I hadn't thought about doing the rubber band selection, but that's a cool idea. It seems tricky, so I don't know if it'll fit in this summer.
Right now I prefer snap-to-grid for simplicity.
I'd be happy to hear more, you can reach me off-list(blog?) at
"its.%s.%s@gmail.com" % ("jeff", "balogh")I was looking at this idea a
I was looking at this idea a month or so back and did a couple of Proof of Concept setups. With respect to the drag and drop idea you'll probably hit some problems on Firefox. The trac entry I made is http://trac.dojotoolkit.org/ticket/6350 but to sum it basically you can't drag from a source in one ContentPane onto a target in another ContentPane. I moved to a model of having the controls added from a menu choice and then dragging the control once it was a part of the page layout.
thanks! I owe you one.
I'll keep that in mind. You've probably rescued a few hours of my life from the throes of fruitless debugging. :)
wavemaker
You may want to take a look at Wavemaker (http://www.wavemaker.com) for ideas. It has a browser-based layout/editor and uses Dojo for it's widgets (then also java components for the server).
Dylan Tynan
Good Luck,
Hey i am looking to make a new widget like a datagrid, which can be dragged dropped on to form area. so let me know if you have any plans to add grid also as a form widget.
Raghavendra