Blog

Over the past couple months, I have had the opportunity to have somewhat of a crash course in Ext GWT while helping to develop Function1’s new product FormBuilder.  Thus, I thought it prudent to write about some of the basics of Ext GWT and pass on the knowledge.

As you all may know, GWT (Google Web Toolkit) allows you to write code for AJAX web applications in Java, and then compile your code into Javascript.  “Sencha” Ext GWT takes that to the next level, and many components of FormBuilder take advantage of Ext GWT advanced features, such as high-performance widgets, feature-rich layouts, and data stores.

The initial hurdle of coding in Ext GWT was that it was tough to find usable hints and examples online.  But the Sencha site is a great starting point and gives a multitude of demos and samples:

http://www.sencha.com/products/extgwt/

Also, this site is extremely helpful in getting started developing your own Ext GWT web application:

http://code.google.com/webtoolkit/doc/latest/tutorial/gettingstarted.html

The starting point for any Ext GWT web application is a Java class (we’ll call it Foo) that implements the GWT EntryPoint interface, which allows the class to act as a module entry point.  Every class that implements EntryPoint must define the entry point method called onModuleLoad(), which is called automatically and loads all application-specific modules.

Class Foo must also define an asynchronous service interface that is created by passing in the ‘.class’ file of a custom Java interface (we’ll call it Bar) that extends the GWT RemoteService interface and defines all the methods comprising the client-side stub for the RPC  (remote procedure call) service.

And although interface Bar resides on the client side of your application, its implementing class lives on the server side, because all of the object-relational mapping frameworks (such as Hibernate) required to implement its methods must reside on the server side.

In addition, class Foo must define a GWT ServiceDefTarget interface that is casted from the asynchronous service and sets the service entry point for the web application using an application-specific service URL.

The rest of the work in class Foo is done via Ext class Registry, GWT class RootPanel, and instantiating custom application classes that utilize the asynchronous service.

Here is a quick example:

public interface Bar extends RemoteService {

Model1 rpcMethod1();

Model2 rpcMethod2(int parameter);

Model3 rpcMethod3(String parameter);

}

public class Foo implements EntryPoint {

public void onModuleLoad() {

String serviceUrl = “app specific service url”;

AsyncService asyncService = GWT.create(Bar.class);

ServiceDefTarget point = (ServiceDefTarget) asyncService;

point.setServiceEntryPoint(serviceUrl);

if (RootPanel.get(“custom tag”) != null) {

Registry.register("root", RootPanel.get(“custom tag”));

new CustomClass(asyncService);

}

}

}

Hope this helps all you Ext GWT beginners!

Thanks,

Somen