Tuesday, July 24, 2012

GWT RPC - Server communication with MongoDB

Further to the client tutorial in the previous blog, here i am going to present how client communicates with the server with the help of GWT RPC (Remote Procedure Call).
Using RPC which works asynchronously only specific part of the client components can be updated without updating the complete client.

Java, Eclipse with GWT plugin, MongoDB.

In this example i have extended the previous client to
  a) save data i.e. user data to database and
  b) authentication user

Client can send/receive serializable objects to/from the server. In this example server is going to use that data and insert in into DB, which is MongoDB in our case.

Create Modal
As the client can send serializable java objects over HTTP. Lets create a modal first.


Create Service
Now we need to have a service which a client can use.
In our case we name it as MongoDBService and it implements RemoteService


@RemoteServiceRelativePath("dbservice") is annotation used for the service identification and calling, which should match with the service path defined in web.xml for servlet-mapping tag.

We need to create Asynchronous service for our MongoDBService, client is actually going to call RPC through MongoDBServiceAsync. All methods of MongoDBService will have extra parameter which is of type AsyncCallback. Client call will be notified when any asynchronous service call completes.


Implement service at the server side
Create class MongoDBServiceImpl which extends RemoteServiceServlet and implements MongoDBService. Basically MongoDBServiceImpl is a servlet which is extending from RemoteServiceServlet rather than the HttpServlet directly.

Updating web.xml with servlet details
make sure that all the service which are created with the annotation RemoteServiceRelativePath are added properly for each servlet.


url pattern tag path should be formed using module/service.
In this case module name is gwtwebappdemo ( see in GwtWebAppDemo.gwt.xml for rename-to value) and service in dbservice.

Client Service Call
calling service from client

Running application

1) Start MongoDB
    In this case i have started DB without authentication and on default port.
    Default port is 27017 which we have used to connect to database in the code. See DBUtil.java in the

2) Add user into database.
    Client calls asynchronous call to server, server starts the processing. Once request processing is finished it calls back with the call back handler provided in the request. Client gets call in onFailure in case of failure and onSuccess in case of request processing successful.

    In the server side, server received the User object and sets the data into User collection which is in the mymongodb database using BasicDBObject.


3) Check the collection ( table) creation in dbs (database)
    In this example mymongodb is the database and User is the collection which we are using.
    Initially both database and collection is not present, when the first save happens. Both gets automatically

4) Check User Authentication with wrong input.

Download complete example from here in GwtWebAppDemo_server.rar file.

Tuesday, July 17, 2012

Google Web Toolkit - step by step GWT client tutorial

Its free!
Its opensource!
Its makes development faster!
Its amazing!
Faster development of web application with an ease.
AJAX based app develop in java and run in all browser.
Works well with Android/iPhone.

Google has done preaching on their site and blog about GWT, find more details their.
Ofcourse believers of those preaching also wrote a lot about it on their blog(s), website(s), papers, etc,
So, moving to example.:

   Eclipse, Java.

Download and install GWT plugin for eclipse, in my case its for indigo and link is as follows:

for complete instruction use the following link

Create a Google Web Project -> GwtWebAppDemo

     Click on next.

    Un-check the checkbox "Use Google App Engine" as we are going to use internal app server.
    Click on finish.
    A new google web project is created with default project files.
    Delete all default java files from client, server and shared package.
    Add a new Entry-Point class into the client package.

One entry will be added into GwtWebAppDemo.gwt.xml.
Verify that entry point is correct in GwtWebAppDemo.gwt.xml. In this case its

Change the class in entry-point tag if you have changed/added the class manually and not as Entry Point Class.

Add RootPanel to the entry point class i.e. GwtDemoAppClient.java in onModuleLoad() method.

RootPanel rootPanel = RootPanel.get();

RootPanle is a panel to which all other widgets must ultimately be added.
RootPanels are never created directly. Rather, they are accessed via get().
Most applications will add widgets to the default root panel in their EntryPoint.onModuleLoad() methods.

After that right client on GwtDemoAppClient.java and open with GWT Designer
We are ready for adding the components by drag and drop.

I have selected LayoutPanel as it allows its children to be positioned using arbitrary constraints.

After adding the components you can see the generated code:

Add few componets to the layoutPanel and test the demo without web app to see it as preview.

If its fine than go ahead and create a web app/deploy to internal app server which is jetty.
Else go and add/remove/update components in the panel.

Change the default html content of GwtWebAppDemo.html in the war/WEB-INF folder.

Right click on the project and click on Run As Web Application
It will start new tab as development mode, copy the link and paste into your browser

For the first time it will ask for installing the plugin for gwt. 
Install it and see the application running.

Do remember to close the client running the the IDE before launching it again.

You can download sample from here  --> GwtWebAppDemo.rar