GWT – Enhancing sample greeting app!

In previous tutorial we created the default GWT sample using GPE and explored the package structure and various classes in detail. In this post, we will enhance the sample app and make something a little bit complicated and see the various parts of the GWT app along the way.

I hope you had finished you quizzes. If not, you should because you will find most of the answers in this post and this post and it might ruin your fun.

Introduction

This is the third instalment of this introductory series. We will begin by quickly altering our sample app from a simple greeting app to a basic calculator which
1. Performs summation.
2. Restricts user input to 2 integers only.
3. Displays the calculation.
4. Resets the input fields to let user feed new data.

The finished calculator will look something like:

calculator

Lets start with the easiest stuff first and update the title and heading on our main(host) page.

screen-shot-2016-11-23-at-12-44-14-am

 

Here is the full source code for HelloGWT.html. You can replace your local file with this, in case you don’t want to type the file by yourself.

 

Now, Let’s update our services to take 2 inputs i.e the operands.
For example if user types in 5 in first input field and 10 in second input field and clicks Calculate, then an addition will be performed by the server.

Did you notice @RemoteServiceRelativePath(“calculate”) above. This is how GWT associates a RemoteService with a relative path.

Update web.xml to accommodate new services.

Now, we have to update the corresponding entry point class HelloGWT.java
Create required UI elements:

 

In HelloGWT.html, you might have noticed that we had created a few containers like firstInputContainer and secondInputContainer etc. Now, we will add our UI elements to suitable containers.

Initialize the service instance to make RPC call which will perform our caculation.

Make the actual call..

Here is the full source code for HelloGWT.java. You can replace your local file with this, in case you don’t want to type the file by yourself.

 

Now the final step is to update our FieldVerifier which ensures that we input a valid integer.

 

Exercises:
1. Did you notice that all values are being passed as Strings? Update the code to allow floating point values. Make sure you update your FieldVerifier too, to make sure that validation is intact.

2. Enhance the simple calculator to allow Subtraction, Multiplication and Division.

Let me know if you face any problems or need any help.
Happy learning!!! 🙂