• In my opinion, Java > JavaScript for big projects. If you like Java, you will probably like GWT.
• Cross-browser compatibility: GWT makes sure your app works the same across all browsers. (If you have written JavaScript before, you will probably remember hating the many random *cough* IE *cough* bugs that come up.)
• AJAX calls to the server is as simple as one function call. Objects can be passed as arguments without having to marshal them into strings first.

Similar to all web application frameworks, you can consider GWT apps in terms of its client-side and server-side components: the UI components being on the client side, and the business logic on the server side.

GWT apps uses the Java Servlet API to provide server interactions. You do not need to know too much about Java Servlets for this lecture, other than knowing that the servlets are where the server-side processing happens.

You may use any editor to work with GWT, but my personal choice is Eclipse, especially since Google created a plugin that makes working with GWT so much easier.
(Optionally, for the emac/vim/etc hackers, you may download the command-line version here.)

After you are done installing the plugin, you may now create a new GWT application by going to File -> New -> Project; then Google > Web Application Project. Arbitrarily pick a name for your project and a package name, make sure "Use Google Web Toolkit" is selected (optionally, you should enable "Use Google App Engine" if you anticipate deploying to Google App Engine later.)

To run a project, right click on it in the Package Explorer and go to Run as -> Web Application.

All the Java sources reside in "src/". In the package that you selected when you are creating the app, you should find a "client" folder storing all the classes on the client side; and a "server" folder containing all the classes for the server side code.

There should also be a "[name].gwt.xml" file in your package. This file specifies what class to load first (the app's "entry-point") when your app starts up; plus other configurations we usually don't care about.

The "war/" folder contains files that get uploaded to the web server. See this wiki entry for more info about what "war" stands for.

The "war/WEB-INF" folder contains configuration files (e.g. servlet mappings, logging, etc.). The most interesting one is probably "web.xml", which we will talk about later.

There are basically three things you need to make:

• An interface for the service: it will have to be under "client/" and extends "RemoteService". Make sure you also specifies a path for the Service: e.g. "hello":

  @RemoteServiceRelativePath("hello")
  public interface HelloService extends RemoteService {
    String hello(int number);
    void world();
    ...
        

• An asynchronous interface of the service: containing equivalent methods as the ones in the original interface but with an AsyncCallback argument instead of returning values. This should also reside in "client/" and take the same name as the service, appended by "Async".

  public interface HelloServiceAsync {
    void hello(int number, AsyncCallback callback);
    void world(AsyncCallback callback);
    ...
        

• The actual implementation of the service -- placed in "server/". It must extend "RemoteServiceServlet" and implement the service.

  public class HelloServiceImpl extends RemoteServiceServlet implements HelloService {
    ...
        

Be sure to add a mapping to the servlet you implemented into "war/WEB-INF/web.xml". Between the <web-app> tags add a declaration and mapping for the servlet -- it must take the same path as the one you picked for the service interface.

<servlet>
  <servlet-name>helloServlet</servlet-name>
  <servlet-class>[package-path].server.helloServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>helloServlet</servlet-name>
  <url-pattern>/[project-name]/hello</url-pattern>
</servlet-mapping>
    

In the "src/[package-name]/[project-name].gwt.xml" file, the entry-point specifies which class in client/ to run. The method "onModuleLoad" will be invoked when the page loads. You may declare UI widgets such as panels like VerticalPanel, FlowPanel, Button, TextBox, etc. in that class and add them to RootPanel when "onModuleLoad" is called.

The "war/[project-name].html" is the container for the gwt application. RootPanel refers to this page. You may declare elements in the html page like "<div id='some-div'>" and refer to it in your GWT app by calling "RootPanel.get" and add UI widgets to it by something like:

RootPanel.get("some-div").add(someWidgetObject);
  

You may declare an object with the asynchronous interface by calling "GWT.create([service-interface].class)". For example:

HelloServiceAsync helloService = GWT.create(HelloService.class);
  

You can then call any of the service's methods just like any method call.

You may create new UI widgets by creating new classes in "client/" that extend "Composite". Make sure that, in your constructor, you call "initWidget(element)" to specify which element to set as the container.

To specify a CSS style name for a widget, you can call its "addStyleName()" method, with the CSS class name as the argument. The stylesheet resides in "war/[project-name].css".

You can also make native JavaScript calls (e.g. if you want to use a javascript library's methods). You may do so by writing a method with the "native" tag and writing the code like this:

public native String someFunction() /*-{
  // this is JavaScript code!
  var someString = "hello";
  return someString;
}-*/;