Tuesday, March 13, 2007

Return to the Dojo

It has been a thorn in my side for a while that I didn't manage to grok (or find info on) how to use dojo for both resizing and drag-move simultaneously. While the visual editor is now nominally up and running, can import and digest JDA blueprints and reconstruct them again, can pass messages et.c., I found yesterday that I really need a more visual way of showing what's avialable.

In short, I need a vertical toolbar where you can drag divs, forms and the like out on the canvas and then style them to you hearts content, before you add JDA blueprints to them. Specifically I needed to be able to choose in a simple way what kind of element should wrap the blueprint, especially in the case of forms.

In addition to this sudden, pressing need, I had issues with Walter Zorns DHTML library, which for some reason does not contain a restrict_to_parent funcitonality, so I hacked together something which didn't do the job particularly well. Things got added to parents for no reasons and couldn't be moved to certain parts of the canvas, et.c.

Since Dojo had that kind of restrictability out of the box I decided to just try for ten minutes or so to use dojo for all drag, move, resize, restrict et.c. things in stead of WZDHTML. Again.

And I did. Which is kind of amazing, since I very much did not just a couple of weeks ago :)

Anyway, the trick to get things done was the following;

el.innerHTML = " <div dojoType='ResizeHandle' targetElmId='"+el.id+"'> ";
dojo.widget.createWidget(el.id);
var foo = new dojo.dnd.HtmlDragMoveSource(dojo.byId(el.id));
foo.constrainTo(dojo.byId(this.id));

Where 'el' is the newly created element of some sort, and 'this' is the Canvas infotron whch handles all new elements.
I had problems wiht getting the resizing dog-ear to show up until I saw that you could create widgets out of an entire DOM hierarchy if you want, by passing _only_ the domid of the topmost element (Which can be an ordinary element, without a dojoType attribute as you see).

Talk about being effective! I know I sound like a silly-happy ten-year old kid all the while, but that's mainly because that's the way you feel when coding js, almost all the time. Now I'm looking for a language which makes you feel like drinking a couple of beers and snoggle up to someone :)

No comments: