Tag Archives: ajax

GWT with Cypal Studio

GWT 1.5 (official version is 1.5.2) is now finally released and not longer a release candidate. GWT is very nice as AJAX toolkit for a java programmer. You code your application in pure Java and all the JavaScript stuff is done behind the scenes. Important is to understand the build process. The Java Source Code is translated by the GWT Compiler to JavaScript Code. This GWT Compiler understands Java 1.5 with limited API. Eclipse has it’s own built-in Java compiler corresponding to the compiler level of the Java Project. Usage of unsupported Java functions will only be shown by the GWT compiler. Eclipse can only limit the access by setting access rules on the used JRE. In the project preferences under Java Build Path -> Libraries is the JRE. Under this Tree element is the access rules item. In the edit dialog can e.g. the usage limited to java.lang.* by setting “java/lang/*” as accessible. All other classes will not be available and cause compile errors in eclipse.

GWT ships with command line tools to create a new eclipse project including batch files to run the GWT compiler and launch files to start the hosted mode of GWT. Hosted mode starts a embedded tomcat and special GWT browser. The refresh button of this browser recompile the Java Code to JavaScript. Changes in the Java Code will directly shown in the browser after refresh. No restart is required.

GWT has two main concepts for a GWT application. The module defines the main class for a application and the AsyncCallbacks the service layer for accessing server side logic. The module name must be defined for the applicationCreator gwt command line tool as a java package name like com.mypackage.myapp.Main. Inside the source folder of the created eclipse project is the xml file with the gwt project definition and a Java class extending EntryPoint. The EntryPoint onModuleLoad method creates the UI of our GWT module. In the GWT docs online you will find a nice gallery with available ui elements called widgets. Remember that all code inside this method will be translated into JavaScript code.

Accessing business logic requires to define a interface extending RemoteService and a @RemoteServiceRelativePath annotation containing the name of the Service. This service must be implemented by class extending RemoteServiceServlet and implementing your interface. Additionally is a interface needed called <yourInterfaceName>Asyn, which contains the same signatures with a added AsyncCallback callback parameter e.g.

void sayHello(String text, AsyncCallback<String> callback);
final MyServiceAsync service = (MyServiceAsync) GWT.create(MyService.class); service.sayHello(textbox.getText(), new AsyncCallback<String>() { public void onFailure(Throwable caught) { Window.alert(caught.getMessage()); } public void onSuccess(String result) { Window.alert(result); } }); } });

So many steps has to be made by hand to code a GWT app in this way.

Cypal Studio is a open source eclipse plugin to extend web tools platform of eclipse with GWT. Just extract the install zip file to the plugins subfolder of eclipse 3.3. With Eclipse 3.4 (aka Ganymede) you have to use the dropins/<pluginname>/plugins folder. Cypal integrates as a facet for dynamic web projects. Best environment is a JRe 1.5, GWT 1.5 and a Tomcat 5.5 with this JRE as run time. Call the New Project wizard of Eclipse and choose Dynamic web project. Choose the Tomcat 5.5 as target run time, set web modules version to 2.4 and choose “Cypal Studio for GWT” as configuration. Change either the workspace or project JRE to 1.5. If not done before you must now define the GWT home folder. Give here the path to the extracted GWT 1.5.2 archive. Select under File->New->Other..->Cypal Studio->GWT Module. Give the Module a Java Package name and and a name. The EntryPoint class, the html and the gwt xml file will be created. Under Run->Run configurations you will find “GWT hosted mode application”. Click on the new button, select the Project and click on the run button. The application will be compiled by GWT and the internal browser of GWT started with your Module. Remote Services can be created with File->New->Other..->Cypal Studio->GWT Remote Service. Enter here a name and a uri. Advised is to use the same value for Name and service URI e.g. MyService. This creates a public interface, a async interface, a implementation and change your gwt xml file to include this service as a servlet. Remember to use gwt serializable objects as parameters and return value for your service methods.