Archiv der Kategorie: GWT

Using guava with GWT

Guava is a very useful library, and it is quite easy to use it (partially) within the GWT client code.

First, add the guava.jar and the guava-gwt.jar libs to your project. If you are using maven, just add the following dependency to you pom.xml:

For Ivy or Gradle, just have a loot at here.

Once the libs are in your classpath, you can inherit the required modules in your GWT module:

or, as in my case, just add

which does all of the above…

I am not going into all the guava goodies here, but…


CellTable/DataGrid wrapped by TabLayoutPanel (non active tab): Table not filled

Finally, the issue CellTable/DataGrid wrapped by TabLayoutPanel (non active tab): Table not filled seems to be fixed by 2.5 RC1. Just in case you are stuck with a previous version of GWT for now, try using the following workaround:

Creating cell widgets with uibinder

With the upcoming GWT 2.5 release we will be able to create cell widgets using UiRenderer, a sort of an UiBinder technique. The main difference: while UiBinder creates either widgets or DOM elements to be used with (Resize)Composite or Widgets, the new approach enables us to render the content as HTML, as required by the cell widgets.

Coding HTML in a custom cell means writing HTML in Java code, and while it is possible, it is not very readable. The code is hard to read and hard to maintain. Wrapping css, js and html in Widgets is quite heavyweight, but it enables a certain level of software engeneering on the java side. With the cell widgets it changed in favor of performance – and in my opinion it was a fair trade: we needed an efficient data grid.

The first remedy for the HTML and CSS pain with the cell widgets came with the SafeHTMLTemplates. SafeHtmlTemplates did a good job helping here and there, here is an simple Example:

Another nice example (where I do copy and past from), comes from the IconCellDecorator from the toolkit itself. For „small“ or „simple“ cells, SafeHtmlTemplates will continue to be my favorite approach. But when it comes down to more complex cells, the new UiRenderer approach is better.

One drawback with the SafeHtmlTemplate approach is that it is cumbersome to catch specific events on the rendered cell. Since the cell is not a Widget, you cannot register DOM event handlers. This changes a little with the new UiRenderer, as shown on the next example.

So here is a more complete example of how to use an UiRenderer to shape a custom cell. This is quite cutting edge, and the API is likely to change. The example below works with GWT 2.5 RC1. The actual 2.5 RC documentation seems to be a little out-dated, it took me a little try-and-error to get it working.

This is the UiBinder like markup for the layout of the cell. Did you notice the „fileName“ trick? You declare what the cell will need with the „

The real magic than happens in the Java counterpart:

This is very promising!

How to change the style of a CellTable/ DataGrid

The cell table widgets in GWT use a client bundle to store all the required resources. This is great in reducing the number of round-trips for loading the required css and image resources, and allows us to place images and css fragments where they belong: close to the components.

But how do we change the styles? Simply subclass the client bundle, replace the images/ styles partially or completely, and they give it to the cell widget.

Here is a small example:

Now, you have to create the cell table:

GWT 2.5 Release candidate 1 [update1]

Just in time for the Google IO 2012, the GWT team released a first release candidate for the upcoming GWT version 2.5.

The download can be found in the GWT  google code project downloads page.
The official  release notes are missing can be found here, but and there is a blog posting about  the new and noteworthy features/ changes:
  • Preview of Super Dev Mode
  • Introducing Elemental
  • Speed and Optimization Improvements
  • ARIA
  • UiBinder and CellWidget Enhancements
Citing Ray Cromwell from the GWT team about Elemental:
It’s basically a new API for GWT that is „to the metal“. It is not hand written, but completely generated by the W3C machine readable IDL specs which are used by Chrome and Firefox to implement the C++/Javascript API bindings.This means GWT will have 100% feature parity with hand written JS. There will be no API not exposed. In fact, even experimental stuff like MouseLock, Web Components/Shadow DOM and Web Intents is exposed. And of course, Typed arrays, WebGL, WebAudio, WebSockets, WebRTC, WebWorkers, and pretty much everything else.
Just for the curious: if you don’t know how bare „to the metal“ elemental is, have a look here. In my opinion,  it is nothing I would like to be building apps with, but it is the best we can get to build components with. And it is a change of course: this is something that is really leaving old browsers behind, meaning that we developers must start developing more defensively.
There recording of the session is not available yet, but the slides of the presentation can be found on google docs.
Taking GWT 2.5 RC1 to a ride on an existing project was not a problem at all. The compile settings did not change, and none of my code complained about the new version.
So nothing new? Not really! One of the big news to GWT 2.5 is that the closure compiler was integrated into GWT.
Compiling the app with a few optimizations turned on, I managed to reduce the size of the compile output by almost 50%!!!

„compiler.stackMode“ value=„strip“ />
„“ value=„true“ />

-XfragmentMerge 20
Unfortunately I was not able to generate a SOYC report for those settings (why?), so I cannot provide hard numbers. As soon as I figured it out I will update the post.