mgwt & super dev mode

This post is part of a series of blogposts that show the usage of  some mgwt / gwt-phonegap components.

GWT Super Dev Mode is a very nice way of seeing your changes on a mobile device very quickly.

Unfortunately it`s not that easy to use with a mobile browser. This is why I built a direct support for it into mgwt.

The basic idea:

The GWT Super Dev Mode consists of a so called code server which skips many of the standard GWT optimizations and thus is able to produce Javascript from Java very fast. You can run it alongside your nomal GWT Dev Mode. On browsers that support source maps you can even do Java debugging in their Javascript Debugger.

Right now the support in mgwt is considered experimental, because I might change some bits based on your feedback.

Setting it up:

Requirements

• GWT 2.5 rc1 (or later) from here
• latest mgwt trunk (1.1.2-SNAPSHOT) from here

Configure SDK in Eclipse

Go to Prefrences -> Google -> Web Toolkit. Click on the add button and browse to the GWT 2.5 installation directory:





After adding the SDK, make it your default SDK. You list should look something like this:

Setting up your gwt.xml file & Entrypoint

In your gwt.xml file you need to add the following lines:

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<set-configuration-property name="mgwt.superdevmode" value="on" />

If you want to run your GWT CodeServer from a different host or port you also need to add:

<set-configuration-property name="mgwt.superdevmode_host" value="http://<yourhost>:<port>" />

In your Entrypoint you will have to add the following line, which will compile out if you turn off mgwt.superdevmode:

SuperDevModeUtil.showDevMode();

Setting up your Run Configuration to start Super Dev Mode

Inside Eclipse you need to create a Java Run Configuration. Go to your Run Configurations, select Java and press New:




On the first tab (Main) you can set a decent name and the project to use.
The main class you need to start is: com.google.gwt.dev.codeserver.CodeServer





In the arguments we need to pass a bindAddress as you know from a normal GWT dev mode, since with mobile devices we will not use it locally. Also we need to specify the Module to use. In my case it looks like this:
(Programm Arguments)
-bindAddress 0.0.0.0 com.googlecode.mgwt.examples.showcase.Showcase

In the VM Arguments make sure to give it some RAM, something along the lines of:
-Xmx1024m







In the class path tab you will need to add the gwt-codeserver.jar which you will find in your gwt installation directory and you will also need to add all folders with source code to the project. (The Codeserver operates on Java files)

You can add a folder by selecting User Entries, click on Advanced -> Add Folder and select the source folder of your project.





My classpath looks like this:





Now you can just start the code server. It will take some time but at the end it should print something like this:

The code server is ready.
Next, visit: http://:9876/

Compile your mgwt app once with the normal compiler

Now you need to compile your gwt module once the normal way and open it with your mobile phone / tablet. This is your normal gwt app that runs on the jetty server (http://yourpost:8888 by default) You should see something like:

If you click "Super Dev Mode On" you will see this:

Now you can hit compile, which will compile the app and reload the page:

Important: Super Dev Mode saves its state (turned on) inside session storage. So if you want to see the normal compiled app, you will need to hit "Super Dev Mode Off".

Round up

With this integration of Super Dev Mode into mgwt it will be much easier to test features on a device. I am seeing compile times less than 4s for many of my projects, which is a major improvement.

I am looking for feedback on this one. If you have some good suggestions on how to improve this, please let me know!