GWT Developer Plugin is now compatible with Firefox 8.0.1

If you've been sitting on an older version of Firefox because the GWT Developer Plugin wasn't compatible, the great news is that its now fixed in version 8.0.1!  Unfortunately latest versions of Google Chrome and Safari still have the issues as described in this post, but with the fix in the latest Firefox there's no reason why you'll need to use those other browsers until you get to production testing of your code.  Happy GWT coding!

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.

GWT Drag and Drop

I wasn't able to find any documentation on GWT's inherent drag and drop, but it is covered in this video. Skip to the 20:37 mark to see an example of how to use it.

How to Wrap jQueryUI in GWT to make GWT widgets draggable

Following my previous post, I've been trying to get GWT and jQuery/jQueryUI to work together.  I came across this blog How to Create a Simple jQuery Wrapper written by Matthew Edwards and after some tinkering I was able to get a make a GWT Label widget draggable using the jQueryUI draggable() function.

I've cut and pasted most of Matthew's instructions below and highlighted in red what I did to allow gwt-Labels to be draggable.  I'm hoping I can apply the same logic to other javascript libraries and gwt widgets.

1. Reference the jQuery and jQueryUI libraries in your web page

2. Reference the GWT application in your web page

3. Create a JSNI method to call jQuery 

// Using Selector
public static native void draggable(String selector) /*-{
        $wnd.jQuery(selector).draggable();
}-*/; 

4. Call the method from within GWT 

// Using Selector 

RootPanel.get(sectionTagID).add(new Label("draggable label");
draggable(".gwt-Label");

One thing to note is that "sectionTagID" must be the id of a  <section> tag and not a <div> tag.
e.g.
<section id="id_of_section_tag"></section>  will work,

I tried using an id of a div tag, but the RootPanel.element.add() function didn't even work.  i.e. no GWT labels were added to my webpage.  (Perhaps you can suggest a reason).

I will try and write a step-by-step when I get some more time and have played more with other javascript libraries and GWT widgets, but hopefully there's enough here to inspire you to try it out in the meantime.

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.

Lessons Learnt Using Objectify with Google App Engine's Bigtable

1. Import the correct @Embedded library

If you are getting errors like "... is not a supported property type" when trying to save an entity, check that the your import line is:

import javax.persistence.Embedded
and not
import javax.jdo.annotations.Embedded.

(This is one of those things that took me 3 hours to debug before realising the suggested import Eclipse gave me was wrong).

2. Example of how to Register Your Classes Using a DAO
According to Objectify's Best Practices, you should be using a Data Access Object (DAO) to register your classes, however the example they give may be a bit limited.

David M. Chandler has an excellent example here which you can use.

I'm using RPC in my code so in your RpcServiceImpl.java so to add a new class to the datastore you can use code like the following:

@Override

public void addTemplate(Template template)

throws IllegalArgumentException {

ObjectifyDao<Template> objDao = new ObjectifyDao<Template>(Template.class);

objDao.put(template);

}

and substitute Template for the class that you have defined.

3. Think in Bigtable and not in Relational Database mode

This is a bit of a tricky one to explain (and more of a Bigtable lesson learnt), but basically the strength of BigTable is how it manages denormalized data.  So instead of multiple tables to store information (RDBMS), Bigtable uses well ... one bigtable to store the information.  

This affects how you define your classes, because Objectify doesn't have inner joins (select from table A values matching those of in table B).  Instead data is retrieved and then filtered.  You should review the Query Class information that Google provides when creating your classes for more information, but as long as you remember denormalised data you should find designing your classes pretty easy.

If you have any other lessons learnt from using Objectify, I'd be glad to hear from you.

CSS3 Pocket Guide

Just thought I'd share a great book I've been using to learn CSS3.   It's The CSS Pocket Guide (Peachpit Pocket Guide). If you already have some Web/HTML experience this is a good place to start as its straight to the point and you can learn quite quickly how to style your web page.  After I read the chapter on the box-model I finally understood why my buttons weren't being aligned.

While there is loads of info for free on the internet, if you're like me, its good to get a paper version for easy referral. You can always supplement your knowledge with resources from the net if you want more in depth information.