GWT: An introduction

GWT: An introduction
Posted by Himanshu Gupta in the early afternoon: March 26th, 2009

Introduction

Google Web Toolkit is a open source java framework to build rich user interface with widgets and panels. It communicates with one technology rather with different technologies, and it works on linux, windows and mac. In GWT code is converted from Java to Java script. GWT can be compared with latest technologies as Flex, Microsoft Silverlight and Java FX. All of these technologies provide rich widget based development but GWT stands apart due to its java script code conversion.

GWT has some interesting features which brings thoughts why GWT is good. Some of these features are integration with browser back button, internationalization, code development in eclipse, fells working in desktop based application and UI code written in java.

Lets compare Flex with GWT and see where GWT is going. In Flex we need to learn new Action script where as in GWT its all java. For integration with backend services you need webservices in Flex while in GWT you can write your own services in java. This gives edge to GWT over Flex.

Installation

GWT can be downloaded from http://code.google.com/webtoolkit/.

Installation is simple, unzip the downloaded file with some tool such as WinZip, and add the root folder into path.

On windows vista -

Control Pannel-> System and Maintainence-> System->Advance System Settings

Click Environment Variable button

From the user variable list find path and click edit

add semicolon at the end and add your installed directory(eg ;E:\gwt-windows-1.5.3)

Dummy application

Lets create a project and go through the project created in GWT.

First create a project with the tool applicationCreator provided in the installation directory. Use -eclipse option so that project can be imported in eclipse, -out tells the name of project in eclipse and then the client class full name.

applicationCreator -eclipse GwtDemo -out School in.xebia.demo.client.GwtDemo

Import the project created in eclipse.

Add the following jar files in the eclipse project.

- gwt-user.jar file is in the installation directory of GWT.

- junit.jar from the junit installation directory

Once the project is imported its time to run the project. There are two modes to run the application, host mode and hosted mode web browser. Hosted mode runs in JVM and inbuilt browser while host mode web browser runs in browser.

Applications that run in hosted mode don't translate into the javascript, by this you can debug your application just like another application.

To run the project just click on shell command script.

Running the demo project

You see two new windows opened. First is the log viewer where you see status and error messages. Second is hosted mode web browser, where the application is running.

There are two files one is html and other is java file that are created by default application ( you just created above). Java class is implementing interface EntryPoint and one method onModuleLoad. In this method write the actual java code which tells whats the behavior of application is when its loaded. This place you create your UI.

Lets take a tour of existing demo application UI created. It has created button "Click me"

 
Button button = new Button("Click me");

An event listener is added to the button to make the feature more advance.

 
 button.addClickListener(new ClickListener() {
      public void onClick(Widget sender) {
            dialogBox.center();
            dialogBox.show();
      }
 });

Deploying project in web server

You can generate the server side code, run the application in shell mode you'll see the compile button, this will create the javascript file in www. directory.

The complier names the application directory with full module name. These are static files generated from compiler. These file can be moved to any webserver and deployed on it. The generated code can run in any web browser by loading the generated files.

Conclusion

In this blog I talk about the dummy application created by GWT. I also talk about what code needs to be deployed on web server and how that code is generated in gwt.

Filed under Java | 4 Comments »

4 Responses to “GWT: An introduction”

Robert Says:

Posted at: March 26, 2009 at 11:47 pm

Hi,

Flex can use RemoteObject to directly access server side java objects. No need for web services.

As for the Actionscript, yes you need to learn it but the learning curve is not steep. It took me about 3 to 4 days to get really comfortable with the new language. The cool thing about Actionscript is for me that it’s a scripting language and gives me a lot of freedom without having to write some of Java’s cumbersome plumbing code, like getters or setters.

cheers,
Robert

flipouk Says:

Posted at: March 28, 2009 at 2:09 pm

Very nice introduction. Thank you!
I love GWT.
F.

Sekhar Ravinutala Says:

Posted at: March 30, 2009 at 2:59 am

Guys, also check out the GWT Tooling plugin for Eclipse – simplifies life even further. http://eclipseguru.org/.

links for 2009-04-05 « pabloidz Says:

Posted at: April 5, 2009 at 1:02 pm

[...] GWT: An introduction Xebia Blog (tags: gwt java) [...]