Episode 22

One hundred days of my writing have passed :) Today we are going to talk about a cool and somehow unique web framework. Meet Google Web Toolkit.

What makes GWT so cool? You write all the client side stuff in Java, having all the power of statically typed language and power of your favourite IDE at your disposal. Its then automatically compiled to Java Script without having to worry if it’s for IE, Firefox or Chrome. Let’s begin.

First you need to install Google Web Toolkit SDK plugin on your Eclipse. A blue g icon will appear in the tool bar. Click it, Create a Web Application Project, enter name and package, uncheck Use Google App Engine and Generate project sample code as we will start from scratch. After finishing, new project will be created.

We will start with a module, New -> other -> Google Web Toolkit -> Module. Call it hello and finish.

Then we will create an Entry Point Class from the same menu, and use the hello module. Add RootPanel.get().add(new Label(“Hello World”)); in onModuleLoad method.

To root our GWT generated code in the web application, we need a html page, using wizard from the same group. You now need to provide a correct JS path in script src property, starting from the war folder. It should go like that: “<package>.<module>/<package>.<module>.nocache.js”.

Now we will prepare to launch our app in Dev Mode. This is a powerful tool that uses a browsers plugin to communicate with Eclipse plugin, recompile and push changes you made in near real time. After saving Java file, you just hit refresh in the browser and changes will be there. Unfortunately API for dev mode was dropped some time ago (WTF?) so you will have to either downgrade your browser or use older portable version. You will need Firefox 26 or older or Chrome 32 or older. I’ve used Chromium Portable version 24. You can get the plugin here. .

Select your project, Run As -> Web Application. It should start a new view called Development Mode. After several seconds it will start and display the link you should use in your browser with plugin, it will be something like this: http://127.0.0.1:8888/hello.html?gwt.codesvr=127.0.0.1:9997. Follow the link and enjoy your Hello World in GWT.

Let’s quickly look at something more. We will add a call to server in order to get the greeting. Since the client is operating in asynchronous mode, and server does rather the opposite, to tie them up you actually need two interfaces that express the same contract. Both goes to the client package.

On the client side the return type is void, while there is an additional callback argument that will get executed when the call finishes with data we need provided.

Methods on the server side interface returns the String we need and have an annotation @RemoteServiceRelativePath(“greet”) to bind the service implementation with request path.

The concrete service needs to implement our synchronous interface and extend RemoteServiceServlet and be placed in the server package. You will also need an entry in web.xml to bind the service class to servlet name and the servlet url from interface:

Having the back-end ready we can come back to our entry point class. First we have to create the service handle. Then we will add a button with ClickHandler that will invoke the service. Finally in the callback code we will add a Label with String computed on the server side. Or, in case of problem, display the message from exception. Here is the Java code:

When you run this, after pressing the button, the Hello World! will appear after a brief moment.

Unfortunately as of version 2.6 of GWT Java 8 is still not supported, so you can’t exchange listeners definitions with concise lambda syntax yet.

Some people say, that GWT is dying. Lack of support for Dev Mode in newest browsers being primary reason for that often. Well, in fact there is something called Super Dev Mode which is going to fulfill similar role. I hadn’t tried it yet, but perhaps I will have to in future. Also, Vaadin is using GWT as their rendering engine, and they seem to be doing their best to keep GWT alive (they are organizing the GWT.create conference, for example). For me, writing Java code instead of JS is a huge deal. Yeah, there are frameworks for JS to make it more manageable, but still, this is dynamically typed language. No automatic refactoring. No way to automatically find all places where something is called / used. Typo in variable name found only in runtime. Maybe after working a bit with AngularJS, so hyped now, I will change my mind, we will see about that. Also, before committing to GWT in my project I wanted to check out Vaadin. See you next time.