I've been busy trying to get simple moving and resizing of visual components to work in my new JDA editor , which if not a tour de force of JDA, at least will let people create composite infotrons fairly quickly, and to browse and share them with others.
However, I really didn't want to use any toolkit that messed my current codebase. Call me crazy, but I really dislike having written something fairly complex in plain vanilla javascript, and then have it break because I wan't a little eye-candy.
Anyway, my two prime candidates were dojo and jQuery. I've been using dojo on and off for some things before, but really wanted to try out jQuery and the incredibly beautiful Interface fx library, which had almost everything I wanted in form of widgets and effects.
At the end of the day (and a half), though, I just couldn't make Interface/jQuery work for me, and I think that part of the reason is the fact that jQuery feels a little like coding forth or something. You begin with a lookup function and then tag a lot of other functions on it. I've seen things like it in prototype as well, and it _looks_ powerfull but it works contrary to how I think.
So, disgruntled, I tried to get resizing and drag-move to work with dojo instead. This should have worked OK, since dojo is über-explicit about most things. But sadly dojo, rounded down, completely lacks documentation. Despite this, I managed to find some examples here and there and finally had components which I could move about and resize.
The bad part was that resizing also triggered moving, and I could not figure out why. I created a div, which I used in a call to new dojo.widget.ResizeHandle. I also separately created a new dojo.dnd.DragMoveSource with the same div, and despite the fact that dojo's own FloatingPane (for instance) managed to both be moved and resized correctly, I couldn't find any clues in the code to tell me how they did it.
I would have wished to find just one framework/toolkit which I could use for everything, and dojo looked the part, but slapped my hand when I tried to get comfy with it. I then turned to an old flame; Walter Zorn's DHTML drag and drop library.
Walter needed only two things (apart from including the script in the page);
1) Initialize the library by having SET_DHTML(); called in a script tag somwhere before getting to business.
2) Whenever you have any element you would like to move around (position:relative, for some reason), you just call ADD_DHTML(this.id+RESIZABLE); where this.id is the DOM id of the element, and RESIZABLE is a magic string Walter have defined which also lets you resize the element by holding donw SHIFT while mousing around.
Two steps. None of the particularly hard to follow. Now _that's_ usability.
(P.S. I still use Dojo for the fisheye menu. That widget is actually quite OK as well :)
However, I really didn't want to use any toolkit that messed my current codebase. Call me crazy, but I really dislike having written something fairly complex in plain vanilla javascript, and then have it break because I wan't a little eye-candy.
Anyway, my two prime candidates were dojo and jQuery. I've been using dojo on and off for some things before, but really wanted to try out jQuery and the incredibly beautiful Interface fx library, which had almost everything I wanted in form of widgets and effects.
At the end of the day (and a half), though, I just couldn't make Interface/jQuery work for me, and I think that part of the reason is the fact that jQuery feels a little like coding forth or something. You begin with a lookup function and then tag a lot of other functions on it. I've seen things like it in prototype as well, and it _looks_ powerfull but it works contrary to how I think.
So, disgruntled, I tried to get resizing and drag-move to work with dojo instead. This should have worked OK, since dojo is über-explicit about most things. But sadly dojo, rounded down, completely lacks documentation. Despite this, I managed to find some examples here and there and finally had components which I could move about and resize.
The bad part was that resizing also triggered moving, and I could not figure out why. I created a div, which I used in a call to new dojo.widget.ResizeHandle. I also separately created a new dojo.dnd.DragMoveSource with the same div, and despite the fact that dojo's own FloatingPane (for instance) managed to both be moved and resized correctly, I couldn't find any clues in the code to tell me how they did it.
I would have wished to find just one framework/toolkit which I could use for everything, and dojo looked the part, but slapped my hand when I tried to get comfy with it. I then turned to an old flame; Walter Zorn's DHTML drag and drop library.
Walter needed only two things (apart from including the script in the page);
1) Initialize the library by having SET_DHTML(); called in a script tag somwhere before getting to business.
2) Whenever you have any element you would like to move around (position:relative, for some reason), you just call ADD_DHTML(this.id+RESIZABLE); where this.id is the DOM id of the element, and RESIZABLE is a magic string Walter have defined which also lets you resize the element by holding donw SHIFT while mousing around.
Two steps. None of the particularly hard to follow. Now _that's_ usability.
(P.S. I still use Dojo for the fisheye menu. That widget is actually quite OK as well :)
Comments