GWT – Hello World!

This is part 2 of the multipart GWT tutorial. In the previous post we learned how to setup GWT and Eclipse. In this post we will create a sample web-app using Google Plugin for Eclipse (GPE) and look at the various parts of the application to build some basic understanding of  GWT. It is going to be our Hello World of GWT.

This might be a long post, so grab your cup of coffee. make yourself comfortable and follow the steps.

Step 1: Initiate

Using GPE, we need to initiate the web-app creation as shown in the image below.
screen-shot-2016-11-20-at-9-56-29-amStep 2: Fill the details

In case you are following this tutorial to actually create a web application you can copy/paste the details provided here. Why not save the typing effort.

Project name: HelloGWT
Package name: com.example.hellogwt

screen-shot-2016-11-20-at-10-05-54-am
Step 3: Finish

Once you click finish in the image above a sample project will show up on eclipse

screen-shot-2016-11-20-at-10-14-11-am
Step 4: Start the server

Using the good old eclipse run menu you can run the application as shown in the image.
screen-shot-2016-11-20-at-10-37-28-am

Step 5: Run the application on browser

Now double click the url in your IDE’s Development Mode tab to open the application in your default web-browser.

screen-shot-2016-11-20-at-10-40-53-am

You can type in your name or any other text and click the send button to see the web app working.

Now, you have a working web-application which is fun and exciting but you might be thinking How it all actually works? What is going on here? What are all those packages about? What is that strangely named HelloGWT.gwt.xml? How to understand the application code and may be update the application to do something more useful than just greeting?

GWT Quick Intro

Google Web Toolkit, as the name suggests is a toolkit. It is neither a programming language nor a framework. It’s a just a set of tools that provide the means to easily write sophisticated, reliable and browser independent Ajax applications using Java. To simplify it further, it means that we write our code in Java and then compile it to JavaScript using GWT compiler.

GWT Package Structure

If you take a look at the image in Step 3 above you will notice the package structure is like:

com.example.hellogwt

This is the default package you specified while creating the project. By default, a <ProjectName>gwt.xml i.e, HelloGWT.gwt.xml in this case, is present in this package

com.example.hellogwt.client

Contains all the java code which can be translated into Javascript by GWT compiler. It is usually the UI related code. Information regarding translatable Java code is available in JRE Emulation.

com.example.hellogwt.server

Contains all the server side code. Any code in this package is not translated into javascript and not necessarily Java. Also, it is not necessarily Java code. You can choose to use any other programming language to implement your server side code and that code goes here.

com.example.hellogwt.shared

The idea behind creating this package is to provide a place where we could put the code which is shared between both server side and client side, which means the code in this directory should be translatable to javascript. So, make sure you keep JRE Emulation handy when writing code here. This code also gets compiled to byte-code using java compiler.

Diving Deeper

HelloGWT.gwt.xml

This is known as GWT module file which is nothing but a set of instructions to the GWT compiler. Read the file below and it is self explanatory.


HelloGWT.java

Let’s take a look at the file which is called Entry point class in GWT. It has the same name as the project which we had provided in our Step 2. We also specified this class in our module file as

 

An Entry point class implements EntryPoint interface which has only one method named onModuleLoad(). Think of it as a main() method of a normal Java program.
This is where the code flow begins.

 

The RootPanel is a GWT panel which represents the body of the application’s HTML. By getting the panel (RootPanel.get()) and adding (add(…)), you can add any UI element in the body of application’s HTML. In our case, RootPanel.get() takes a string parameter. Can you guess what it means? [Hint: Maybe you should search these strings in GWT’s main HTML file i.e, HelloGWT.html in your IDE]

You should take a look at the complete code in your eclipse. The code should be self explanatory but in case you have any issues, don’t hesitate to post a comment and ask.

You can also simplify this file by replacing all the code inside onModuleLoad() method by Window.alert(“Hello World!”);  You will have to add import com.google.gwt.user.client.Window; to make this work. Once you run the application with this change you should see an alert.

Next up is GWT’s asynchronous server communication mechanism, commonly known as RPC (Remote Procedural Call). We won’t dive deep into it as it is a quite complex yet interesting topic which deserves its own blog post. So, lets quickly look at it and move on:

GreetingService.java

On the client package we define our Service Interface and declare our service methods. In this case there is only one which takes one parameter i.e, the name we provided in the Text-Box of our sample web app.

 

GreetingServiceAsync.java

Asynchronous version of our service interface.

Note:-
1. The AsyncCallback<String> callback argument is always the last argument to be passed in the async version of the service method.
2. We only provide service method declarations on client side. NO definition.

GreetingServiceImpl.java

This is the server-side file where we implement our service method(s) to get something useful done. Notice that it also uses FieldVerifier.java which is in our shared package, to perform validation on the input provided by the user.

 

FieldVerifier.java

The contents of this file are not important. What’s important is that we have kept it in shared package because we would like to use it on both client as well as server side. I highly recommend you to read the javadoc of the class carefully.

 

With this, I would like to finish this post but there is one last thing for you before you call it a day 🙂

Quizz:- 
1. Can you answer, why is it required that you do not use native Javascript in FieldVerifier.java, or in any class in shared package?
2. What is the purpose of HelloGWT.css?
3. What is HelloHWT.html for?
4. If you notice your newly created web-app on the browser, it shows the heading “Web Application Starter Project”. Can you change this heading to “My First GWT app” and change its color to Green?

(Post you answers in comments)

In the next post we will update this application to create a simple calculator.

I hope you learned a few things about GWT. I would highly appreciate any constructive feedback.
Happy Learning!!!