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.

GWT Developer Plugin not compatible for Firefox 6

UPDATE: This issue is resolved in Firefox version 8.0.1. 


If you just upgraded your Firefox to version 6, you'll realise that the GWT Developer Plugin no longer works.  This kind of sucks if you're on a Mac, because your other options for browsers: Safari 5.1 (doesn't work) and Google Chrome (extremely slow) means you're basically stuffed.  You can always try local mode (i.e.  http://127.0.0.1:8888/), but it means you'll have to compile more often to see even the simplest CSS change.

If you're in this situation here's what you can do:
(Option 1) If you have time-machine on your Mac, revert back to the previous version of Firefox. (Mine is 5.0.1)
(Option 2) Download Firefox 3.6.  Note that this means that some CSS3 features won't work (like rounded borders), but at least you'll have a web browser that is usable in GWT Developer Mode.

Google App Engine Frameworks: Twig vs Objectify

What is Google App Engine?
If you're new to the whole Google App thing, you're probably wondering what Google App Engine (GAE) is.  In newbie terms its Google's cloud computing offering.  If you're about to create your own start up or have a pet project you want to begin on the cheap, Google offers a way of hosting your application for free (to a certain limit).  Other companies to offer such services include Amazon (EC2) and Microsoft (Azure).

I started looking at Google App Engine first, because I was developing an application using Google's Web Toolkit (GWT).   Originally I was going to use a NoSQL graph database at the backend, but then I ran in to problems when I wanted to host my application.  The original reason why I didn't choose GAE was because of the complicated code that had to be used for the datastore and the somewhat steep learning curve Bigtable (Google's database system) seemed to be.  You only need to look at the amount of documentation there is for Java Data Objects (JDO) and Java Persistence API (JPA) in the Google documentation to see why.

An easier way to understand use Google's datastore
Then I came across Twig, Objectify and Slim3 under Frameworks for Modelling and Persisting Data.  These frameworks made it easier to understand how to use Google's datastore because of the more 'sql-like' commands of 'put', 'update', 'delete' etc.  The only challenge now was to choose a framework.

Twig vs Objectify
Unfortunately I didn't find an article on comparing Slim3 to Twig and Objectify.  I did however find this great interview on the lead developers of Objectify, Twig and SimpleDS (another datastore framework). The questions and style of the interview makes it very easy to understand the benefits and disadvantages of the different frameworks.  If you want to skip all the talk, there is a summary of the feature sets on this link.  My opinion is that if you're looking for quick way to create a spike for your application, use Objectify.  Their documentation is good and the list of interfaces is small, making it easier to understand. If however you want more control over the datastore and richer feature set, choose Twig.  Twig is the only one of the 3 frameworks that offer parallel asynchronous queries and support for polymorphism.  At the end of the day choose what's appropriate for your purposes.  The one thing that all the lead developers agreed on, is that whichever framework you choose, its going to be a whole lot easier than JDO/JPA.