Monday, November 21, 2011

jQueryUI vs GWT: Drag and Drop

So you want to try and create an application that has simple drag and drop capabilities?  My advice is if you're app relies heavily on drag and drop; and drawing connections between widgets - use jQueryUI.

GWT Drag and Drop
I started using GWT/GAE because I could host my application on Google's cloud for free.  I wanted to create an application that utilises drag and drop for a web-based diagram drawing tool (something like lucidchart).  I googled "GWT and drag and drop" and used the gwt-dnd library.  It's a bit of a learning curve, but once you get the hang of what DropController and DragController it becomes pretty simple.  If all you want to do is drag and drop then using the gwt-dnd library is a good option.

However if you want to do more complicated things like, drawing a line between two widgets then you might be better off using jQueryUI.   There are gwt libraries such as gwt-connectors and gwt-links, but these don't offer the same user experience as jsPlumb which uses jQueryUI.

jQueryUI Drag and Drop
jQueryUI and its big brother jQuery are powerful JavaScript libraries that provide rich user interface experiences.  jsPlumb was just one extended application of jQueryUI/jQuery, but there are many others.  If you're familiar with CSS, then understanding jQuery and jQueryUI should be a breeze as it works off the same selectors that CSS does.  For example to make all divs of class "widget" to be draggable,  you could just write:

$(".widget").draggable();

Combining GWT and jQueryUI
Ideally if I could combine the gwt-widgets that I've already created in my app with the added functionality that jQueryUI can offer I'd be a happy chap.  This is where I'm at now.  So far I've been trialling JSNI, but am running in to difficulties because the gwt-widgets load after the jQueryUI runs rendering my jQueryUI code useless.  Another avenue I'm going to be investigating is Google's Closure Lab.  Either way I'll update the progress and post it on here.  If you're writing Google Apps and trying to use your own custom JavaScript would love to hear from you too.

2 comments:

  1. What about GWT's built in drag and drop support? I haven't used it yet, but I believe it is available in the latest version.

    ReplyDelete
  2. Hi Patrick,

    GWT 2.4 has a Drag and Drop API, but I'm yet to see support documentation for it, which is a big draw back for me. Also there seems to be some limitations such as not working with AbsolutePanel which adds to my reluctantance to try it out for now. (see
    http://stackoverflow.com/questions/7381138/drag-and-drop-in-gwt-2-4).

    I like Allen Sauer's gwt-dnd library because of the support documentation you get and it has an active user base. Plus the demos really help you understand what the library can and can't do.

    If you get to try GWT's built in drag and drop before me, please do let me know how it goes and thanks for being the first person to comment on my blog!

    Happy coding :)
    Vincent

    ReplyDelete