11. GWT introduction

Now that we have a working environment and basic API for the yoctopuce devices, let's start to work on the project.

The goal is pretty simple but will use many different pieces of GWT and Google APP engine:

1. When I go on the web service, I want to see my geographical location and the yoctopuce devices running on my computer with their values
2. I want as well to see the location of all the people who have come on the webpage and who have a yoctopuce device.

You can check the project here: http://yocto-meteo.appspot.com

And the source code is here: https://github.com/jfontignie/yocto-meteo

GWT introduction

I am not planning to explain how GWT is working, you can find very good explanations here: https://developers.google.com/web-toolkit/. Let me try to explain some key aspects of GWT:

• GWT is a java compiler which will compile your JAVA code into javascript. This implies a few "points" that will impact standard java developers:
• The whole java API is not available
• Multi-threading does not exist: callbacks have to be considered
• Debugging can work using google plugin
• JSNI (JavaScript Native Interface) is needed for some part of the development
• You can access directly the DOM.

JAVA API

As GWT compiles java into javascript, the whole java API is not available and you will have to use only a subset: URL, files and other objects do not exist in GWT. To describe an URL, you will have to use Strings instead. 

Multi-threading

Multi-threading is not supported in javascript however, you can use callbacks: 

1. Call a particular URL
2. Return directly to the caller
3. When the result is available
4. A callback is called where the content is provided

This has some impact in the structure of the code as a big part of the code will be directly in callbacks. 

Debugging

The code generated by GWT is not really human readable and JavaScript debuggers will be almost useless with GWT. Fortunately, Google provides a very nice debugger which you can use in your Java development environment. 

JSNI

In some cases, you will have to run directly some javascript functions. In this case, you can use JSNI. Here is an example:

     
31    
32       public final native int size() /*-{ 
33           return this.length; 
34       }-*/;

The syntax only consists of setting the function as native and applying this particular layout:   /*-{...}-*/


We will go more in details in a future post.

DOM

To change a page, it is very simple, you can call the function:

RootPanel.get("content").add(dock);

This code would for example add a new view in the DOM element called content in the current page.

Create a GWT project

To create the project, I used Intellij Idea: Create a new module from scratch and when asked for a facet, I choose "Google Web Toolkit". You can decide that GWT creates an empty project for you, it is up to you.