Integrating a Google Web Toolkit application with WCI and the imageserver

Best Practices, Development by Mike on December 11th, 2009 No Comments

Google Web Toolkit (GWT) is an open-source web development toolkit that facilitates building rich, Javascript-based applications entirely through Java coding. It is very useful in speeding up complex application development, as well as in multi-developer projects where Java’s static typing enforces convention across the board. Function1 has employed GWT in the development of its product line and on the client site.

A GWT application code consists of the generated GWT static resource files (HTML, Javascript, and CSS) on the front end, and server-side service code on the middle and back end. For performance reasons, static resource files are often deployed to the image server. And as of version 1.6, Google Web Toolkit easily allows for seamlessly changing the location of the generated GWT static resource files from the default location in the war deployment.

If you do wish to pursue separating the generated static resources from the backing server code, there are a few steps to take. The primary reason for this change is to avoid potential cross-domain issues that will arise from separating your resources; your imageserver may be running on imageserver.domain.com:80, while your application service might be running on appserver.domain.com:7001.

For this example, we’ll assume your application is called formbuilder.

  • Under the war folder that GWT generates, you will find a folder with your application name, formbuilder. Copy that folder to a target folder on the image server, such as /imageserver/RemoteGadgets/formbuilder/gwt/.
  • On the GWT entry point JSP page, you’ll make two changes. The first is to create a Javascript variable that stores the gatewayed URL of the servlet. The second is to change the GWT entry point Javascript reference.

GWT portlet before.png

  • After the changes, your JSP will look something like the screenshot below.

GWT portlet after.png

  • Finally, in the Java class that implements the EntryPoint interface, you will reference the gatewayed service URL using GWT’s Javascript Native Interface (JNSI).

FormBuilderApp.png


Bonus tip: As discussed earlier in this post, Google Web Toolkit provides tools to create rich, complex web applications entirely through Java code. GWT was built with cross-browser compatibility in mind, but not all generated HTML is treated equally. For example, adding a widget that generates a block level element into a container that generates an inline element may result in an “Error: Invalid source HTML for this operation.” error in Internet Explorer. When building in GWT, remember that while you are coding in Java, your output is HTML + CSS + Javascript. As with any web application, be sure to test your GWT app in a variety of browsers.

Tags: , , , ,

No Responses to “Integrating a Google Web Toolkit application with WCI and the imageserver”

Leave a Reply

You must be logged in to post a comment.