Google Web Toolkit (GWT) : Your first step !

Table of contents

Reading Time: 3 minutes

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. It is an open-source, Java-based framework for creating Ajax web applications. It is created and used by Google. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.

What the code is ?

• Client-side code
– compiled to HTML and JavaScript
– uses CSS for formatting

• Server-side code can be implemented
– including Java 5 and 6
– commonly Java-based GWT RPC servlets are used

For now Let us implement a basic application say “My Total Bill App ” for your understanding using GWT Remote Procedure Call (GWT-RPC) . The whole thing what we have to do is to implement following:

Implementing the synchronous & asynchronous interfaces
Building user interface using GWT
Writing a service implementation

The basic GWT project structure looks like as:

1. Building user interface with GWT in MyTotalBill.java(Client Side)

package com.knoldus.gwtsampleapp.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class MyTotalBill implements EntryPoint {

	VerticalPanel vpanel = new VerticalPanel();
	HorizontalPanel hpanel1 = new HorizontalPanel();
	HorizontalPanel hpanel2 = new HorizontalPanel();
	HorizontalPanel hpanel3 = new HorizontalPanel();
	HorizontalPanel hpanel4 = new HorizontalPanel();

	Label cname = new Label("Customer Name :");
	TextBox tbcustomer = new TextBox();
	Label itemprice1 = new Label("1st Item Price :");
	TextBox textbox1 = new TextBox();

	Label itemprice2 = new Label("2nd Item Price");
	TextBox textbox2 = new TextBox();

	Button submit = new Button("Calculate My Bill");

	String result1;
	String result2;

	private final BillServiceAsync billService = GWT.create(BillService.class);

	public void onModuleLoad() {

		hpanel1.add(cname);
		hpanel1.add(tbcustomer);

		hpanel2.add(itemprice1);
		hpanel2.add(textbox1);

		hpanel3.add(itemprice2);
		hpanel3.add(textbox2);

		hpanel4.add(submit);

		vpanel.add(hpanel1);
		vpanel.add(hpanel2);
		vpanel.add(hpanel3);
		vpanel.add(hpanel4);

		hpanel1.setSpacing(10);
		hpanel2.setSpacing(10);
		hpanel3.setSpacing(10);
		hpanel4.setSpacing(10);

		RootPanel.get("mainpanel").add(vpanel); /*
												 * get("mainpanel") is used to
												 * map the entire layout to HTML
												 * page.
												 */
	}

}

After implementing this with corresponding HTML page you will find the user interface as follows:

2.Implementing interfaces:-
Each RPC service must define a pair of interfaces: the synchronous interface, which is implemented on the server, and the asynchronous interface, which is called by the client-side code.

BillService.java(Client side)

package com.knoldus.gwtsampleapp.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
@RemoteServiceRelativePath("billservice")
public interface BillService extends RemoteService {
	
	
	String fetchName(String customername);
	int totalAmount(int itemprice1 , int itemprice2);

}

BillServiceAsync.java(Client side)

package com.knoldus.gwtsampleapp.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface BillServiceAsync {

	void totalAmount(int itemprice1, int itemprice2,
			AsyncCallback<Integer> callback);

	void fetchName(String customername, AsyncCallback<String> callback);

}

3. Writing the Service implementation BillServiceImpl.java(Server Side) :-

package com.knoldus.gwtsampleapp.server;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.knoldus.gwtsampleapp.client.BillService;

public class BillServiceImpl extends RemoteServiceServlet implements BillService {

	
	private static final long serialVersionUID = 1L;

	@Override
	public String fetchName(String customername) {
		String resultString= customername ;
		return resultString;
	}

	@Override
	public int totalAmount(int itemprice1, int itemprice2) {
		int totalBill=itemprice1+itemprice2;
		return totalBill;
		
	}

}

4. Adding the onclick handler on submit button in MyTotalBill.java.

submit.addClickHandler(new ClickHandler() {

			@Override
			public void onClick(ClickEvent event) {
				billService.fetchName(tbcustomer.getText(),
						new AsyncCallback<String>() {

							@Override
							public void onSuccess(String result) {
								System.out.println(result);
								result1 = result;
							}

							@Override
							public void onFailure(Throwable caught) {
								System.out.println("RPC Failed" + caught);

							}
						});

				int itemprice1 = Integer.parseInt(textbox1.getText());
				int itemprice2 = Integer.parseInt(textbox2.getText());

				billService.totalAmount(itemprice1, itemprice2,
						new AsyncCallback<Integer>() {

							@Override
							public void onSuccess(Integer result) {
								System.out.println(result);
								result2 = result.toString();
								Window.alert("Hello " + result1
										+ " , Your Bill Amount is $" + result2);

							}

							@Override
							public void onFailure(Throwable caught) {
								System.out.println("RPC Failed" + caught);

							}
						});

			}
		});

5.Configuring the web.xml file to define servlet mapping:

 <servlet>
    <servlet-name>billServlet</servlet-name>
    <servlet-class>com.knoldus.gwtsampleapp.server.BillServiceImpl</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>billServlet</servlet-name>
    <url-pattern>/gwtsampleapp/billservice</url-pattern>
  </servlet-mapping>

6. Now we are ready to run our application, the result will look like as: