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!

3 thoughts on “Creating cell widgets with uibinder”

  1. Nice example.

    What if I want to render a dynamic image in ui.xml(not from ImageResources)?
    The image src is changing.

    i.e.

    How I would get the src to FileNameCell class?
    I tried:

    void render(SafeHtmlBuilder sb
    ,String filename
    ,String testImg
    //OR ,SafeUri testImgUri
    );

    cellRenderer.render(
    sb
    ,file.getName()
    ,”http://www.testimage.com/bla.jpg” //,UriUtils.fromTrustedString(“http://www.testimage.com/bla.jpg”)
    );

    Thanks Miltos

  2. thanks for details.

    How would one go about using this with a Column and then adding that column to a CellTable ?

Leave a Reply

Your email address will not be published. Required fields are marked *