Wednesday, December 14, 2011

How to Connect GWT Widgets Using jsPlumb

After  a lot of tinkering around and research I finally got GWT and jsPlumb working.  To skip the tutorial and jump straight to the demo go to: http://gwtjsplumb.appspot.com.  Note, if you're using Internet Explorer 8 and below this won't work.

The actual demo may not look so exciting, but if you've been trying to get javascript libraries such as jQuery and jQueryUI to work with GWT you'll know what I'm talking about.  I've always liked GWT for its widget library and its ability to create web applications without knowing any javascript; however some functions such as simple drag-and-drop and connecting widgets alluded me.  I looked at the ease and power of jQuery and jsPlumb and thought why can't GWT do that.
Well you can have the best of both worlds thanks to JSNI.  I've listed the high level steps below. (For details on the actual code that was written for this demo please go to: http://code.google.com/p/gwt-jsplumb/ or follow the links in the steps.) 

Steps
  1. Edit The Main Html File to Include the Required Javascript Libraries
  2. Edit Your Entry Point Module
  3. Create the jsPlumb Code
  4. Final CSS trick
Screenshot of the gwt/jsplumb demo


By the way if you're a coder (experienced or newbie) please check out our new site: http://www.codifyme.co.

Posted by at
Labels: , , , ,

8 comments:

  1. Sven G.Monday, March 12, 2012 at 10:38:00 PM GMT+11

    Hi ITMan,

    currently i'am trying to achieve the same that you are trying to achieve: a web-based diagramming tool. I came across your gwt-jsplumb project and tried it myself. Now i have two questions:

    1. How is your web-based diagram tool project going?

    2. Using jsplumb as you proposed i get the same problem as on your screenshot. The connector-points do not align well with the gwt widgets. Do you fixed this issue?

    With best regards

    Sven

    ReplyDelete
  2. UnknownTuesday, March 13, 2012 at 2:02:00 AM GMT+11

    Hi Sven,

    Its great to hear from a fellow programmer! To answer your questions:

    1.The project is still going albeit very slowly as I've returned to full time work, however if you look at http://infrasigner.appspot.com you'll see the last project I was working on.

    2. Last time I checked, jsPlumb was on version 1.4 and it had something called Dynamic Anchors. These look like they better align to the widget, plus they behave more like what you expect when you connect two widgets together and move the widgets around.

    Hope that helps. How far along are you on your web based diagramatical tool?


    ITman

    ReplyDelete
  3. Sven G.Saturday, March 17, 2012 at 8:23:00 AM GMT+11

    Hi ITMan,

    at the moment i try to figure out which technology is suitable for
    my issues. I really like GWT cause i like Java and dont't like JavaScript
    that much. jsPlumb is a nice way to connect widgets although there is this
    alignment problem (which i try solve but i have now idea how to do this) and i
    need the static anchors.
    Have you recognized that on your demo application (http://gwtjsplumb.appspot.com/) the alignment problem doesnt
    appear? Strange :-) !

    Another issue i need to solve is composability which means that i need "container"-widgets which just give me the opportunity to drop widgets on them.
    These widgets are then displayed inside the "container"-widget.


    Have you seen the draw2d.org library? It's looks pretty awesome but there is no full GWT wrapper for it.


    So long

    Sven

    ReplyDelete
  4. UnknownSaturday, March 17, 2012 at 11:39:00 PM GMT+11

    Hi Sven,

    I did notice that the alignment problem of the anchors and widgets on the screenshot above is no longer in http://gwtjsplumb.appspot.com. Not sure how that got fixed, but I do know that if you re-size your browser window this will move your widgets, but not your anchors.

    There is an easy way to fix that and that's to use jsPlumb's repaintEverything().

    eg:
    $(window).resize(function () { jsPlumb.repaintEverything(); });
    //added this so that connectors get repainted on window resize

    I checked out draw2d.org, pretty cool stuff. Btw I forgot to mention in my last comment to check out www.lucidchart.com. It's a web based drawing application built on Google App Engine.

    Happy coding :)

    ReplyDelete
  5. SWednesday, June 27, 2012 at 7:48:00 PM GMT+10

    Hi ITMan,

    Can you provide a little more detail on how to get jsPlumb to work? I'm encountering some difficulties trying to replicate what you've done.

    Would you mind providing an absolute bare minimum html file with embedded script that show's jsPlumb working?

    Thanks,

    S

    ReplyDelete
  6. UnknownThursday, June 28, 2012 at 4:15:00 PM GMT+10

    Hi S,

    I put a sample HTML in step 1 above. Click on the link and you should be able to see the HTML. Let me know how you get along. If you list the errors you're getting I might be able to help further.

    Cheers,
    ITMan

    ReplyDelete
  7. nikitaFriday, July 5, 2013 at 1:47:00 AM GMT+10

    Hey ITMan

    I am currently making a GWT project where I have to allow the users to connect the widgets and not hardcore it in the code.
    Can you tell me how to do that? I am unable to understand it.

    ReplyDelete
  8. UnknownFriday, July 5, 2013 at 9:06:00 AM GMT+10

    Hi Nikita,

    Have you tried the jsPlumb library that I used in the example?

    The current version is 1.4.1 http://jsplumbtoolkit.com/jquery/demo.html and has some excellent examples and documentation.

    Regards,
    ITman

    ReplyDelete

Subscribe to: Post Comments (Atom)