W3C Widgets in GWT

18th June 2010, 1521

Back when Google Web Toolkit (GWT) was first released in 2006 I was still working for Opera Software and thought it would be an interesting side-project to see if it was possible to create a W3C Widget using GWT.

A couple of months ago, after holding a presentation about Widgets on mobile phones the question of whether it would be possible to develop Widgets with GWT came up and I decided to finally create the proof of concept.

Why?

Google Web Toolkit (or GWT), is a tool produced by Google that allows you to develop rich JavaScript applications by writing Java code that is then converted to cross platform JavaScript code.

The advantages of this are that developers with existing Java skills don't need to learn a new language in order to produce rich web applications, you gain the advantages of static typing in your code (and therefore fewer runtime failures) and that GWT abstracts away the differences between user agents that often cause frustration when developing rich web applications that must run across a variety of web browsers. GWT also comes with a library of UI componenets that you can use in your applications.

The example code

My example project can be found on BitBucket: http://bitbucket.org/sharebear/gwt-hello-world

For the purposes of this proof of concept I have just created a skeleton gwt-maven project that consists of a very simple "Hello World!" application constructed from the following html file;

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" language="javascript" src="hello_world/hello_world.nocache.js"></script>
</head>
<body>

</body>
</html>

And the following EntryPoint class;

public class HelloWorld implements EntryPoint {

  public void onModuleLoad() {
    Label label = new Label("Hello World!");

    DockLayoutPanel panel = new DockLayoutPanel(Style.Unit.EM);
    panel.add(label);
    RootLayoutPanel.get().add(panel);
  }
}

Packaging the widget

In order to create the widget according to the packaging and bla bla specification I have attached a maven-antrun execution to the package goal in maven so that it will execute after the GWT compiler. This execution takes all of the artifacts generated by GWT and packages them together with the contents of the src/main/webapp directory where I have defined a simple config.xml for the widget.

The maven definition looks like this;

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-antrun-plugin</artifactId>
  <version>1.4</version>
  <executions>
    <execution>
      <id>build-widget</id>
      <phase>package</phase>
      <configuration>
        <tasks>
         <property name="widget.filename" value="${project.build.directory}/${project.build.finalName}.wgt"/>
          <zip destfile="${widget.filename}">
            <fileset dir="src/main/webapp"/>
            <fileset dir="${project.build.directory}/${project.build.finalName}"/>
          </zip>
        </tasks>
      </configuration>
      <goals>
        <goal>run</goal>
      </goals>
    </execution>
  </executions>
</plugin>

After running mvn package with the above configuration in place you will find that a .wgt file has been created in the target directory of your maven project.

Installing/Running the widget

Not content with just packaging the widget, I also want to install and run my widget directly from my maven build in order to reduce the round-trip time when testing out changes. In order to do this I have the following antrun execution (tested on OS X and Windows XP);

<execution>
  <id>install-widget</id>
  <phase>install</phase>
  <configuration>
    <tasks unless="widget.install.skip">
      <property name="widget.filename" value="${project.build.directory}/${project.build.finalName}.wgt"/>
      <exec executable="open" os="Mac OS X">
        <arg value="${widget.filename}"/>
      </exec>
      <exec executable="cmd" osFamily="windows">
        <arg value="/c ${widget.filename}"/>
      </exec>
    </tasks>
  </configuration>
  <goals>
    <goal>run</goal>
  </goals>
</execution>

Now when I run mvn install, the widget installer is run allowing me to run and test my widget immediately.

Further work

For now this is only a very trivial example, I would be surprised if there weren't a few problems that crop up when trying to develop a full widget, especially regarding initiating cross site XMLHttpRequests. I hope to make a more fully developed example at some point over the summer.

This Blog represents my personal views and experiences which are not necessarily the same as those of my employer.