GWT

MOVED TO http://sites.google.com/site/uweheuerwiki/software-development/frameworks/google-web-toolkit

Overview

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. The GWT SDK provides a set of core Java APIs and Widgets. These allow you to write AJAX applications in Java and then compile the source to highly optimized JavaScript that runs across all browsers, including mobile browsers for Android and the iPhone, so GWT is a Java to JavaScript cross-compiler.

You can debug AJAX applications in your favorite IDE just like you would a desktop application, and in your favorite browser just like you would if you were coding JavaScript. The GWT developer plugin spans the gap between Java bytecode in the debugger and the browser's JavaScript. Thanks to the GWT developer plugin, there's no compiling of code to JavaScript to view it in the browser. You can use the same edit-refresh-view cycle you're used to with JavaScript, while at the same time inspect variables, set breakpoints, and utilize all the other debugger tools available to you with Java. And because GWT's development mode is now in the browser itself, you can use tools like Firebug and Inspector as you code in Java.

Development

Development Environment

The same as Google Application Engine Environment. Under the hood there is:

• GWT Java Compiler
• GWT Shell
  • logging console
  • embedded Tomcat Server
  • hosted mode browser (in contrast to normal web mode)

Development Process

New Project

Directoy structure (Details see here):

<Project>/
  src/
    <Project>/
      <Project>.gwt.xml
      client/
        <Project>.java
  war/
    <Project>.html
    <Project>.css

Specific Configuration Files

The module XML file

It contains the definition of the GWT module, the collection of resources that comprise a GWT application or a shared package. In the module XML file, you specify your application's entry point class. In order to compile, a GWT module must specify an entry point. If a GWT module has no entry point, then it can only be inherited by other modules. It is possible to include other modules that have entry points specified in their module XML files. If so, then your module would have multiple entry points. Each entry point is executed in sequence.

Host Page

The code for a web application executes within an HTML document. In GWT, we call this the host page. The host page references the application style sheet and references the path of JavaScript source code (generated by GWT) responsible for the dynamic elements on the page. The contents of the entire body element can be generated dynamically.

Entry Point Class

An entry point class (module class) is a simple client-side class that implements the com.google.gwt.core.client.EntryPoint interface, which defines a single method: onModuleLoad().

Implementation

Service Definition

@RemoteServiceRelativePath("login")
public interface MyService
  extends com.google.gwt.user.client.rpc.RemoteService
{
  ...
}

Services are technically servets. That's why the RemoteServiceRelativePath annotations contains the are name which also has to be configured in the web.xml file in the servlet mapping section.

Service Implementation

public class MyServiceImpl 
  extends RemoteServiceServlet 
  implements MyService
{
  ...
}

Adjust web.xml:

 <servlet>
   <servlet-name>MyService</servlet-name>  
   <servlet-class><package>.MyServiceImpl</servlet-class>
 </servlet>

 <servlet-mapping>
   <servlet-name>MyService</servlet-name>
   <url-pattern>/service</url-pattern>
 </servlet-mapping>

Run/Debug Project

Run

• Project Context Menu -> Run As -> Web Application or
• Project Context Menu -> Run As -> Run Configuration -> Web Application -> <Projectname>
• Copy URL from Development Console and paste in browser (first time on computer will ask to install Google Web Toolkit Developer Plugin)

GWT Services

Server Communication

GWT RPC

The GWT RPC framework makes it easy for the client and server components of your web application to exchange Java objects over HTTP. The server-side code that gets invoked from the client is often referred to as a service. The implementation of a GWT RPC service is based on the well-known Java servlet architecture. Within the client code, you'll use an automatically-generated proxy class to make calls to the service. GWT will handle serialization of the Java objects passing back and forth—the arguments in the method calls and the return value. GWT RPC services are not the same as web services based on SOAP or REST. They are simply as a lightweight method for transferring data between your server and the GWT application on the client. In order to define your RPC interface, you need to write three components:

1. Define an interface (StockPriceService) for your service that extends RemoteService and lists all your RPC methods.
2. Create a class (StockPriceServiceImpl) that extends RemoteServiceServlet and implements the interface you created above.
3. Define an asynchronous interface (StockPriceServiceAsync) to your service to be called from the client-side code.

Resources

• C:\Uwes\Documents\Software_Development\Programming\Frameworks\GWT\GWT.vsd
• C:\Uwes\Documents\Software_Development\Programming\Frameworks\GWT\GWTInPractice.pdf