client-side UIDL -how to paint an image


I need help with a client-side UIDL question about how to paint an image dynamically.

In the server I create a set of map marker icons that are generated dynamically at regular intervals. Each icon consists of an image that is unique and is created as a BufferedImage object. Because the icons are always different and change constantly they are not cached as a static ThemeResource, instead they need to be passed to a client-side function that performs UIDL updates, which could then call something like uidl.getPaintableAttribute.

Does anyone know a way to convert from a BufferedImage in the server to a Paintable for use by a client widget?
Of all the classes that implement Paintable is there one that is best suited for painting an Image on the client? Is it VLabel ?

Thanks very much for your advice,


Hi George,

What is the target widget where you wish to show these dynamic icons?

Note, if you can then I’d suggest you create the icons once on the server-side and use only URLs on the client-side to benefit of the browser cache. But if your icons are truly dynamic then there’s no point in this of course.

The dynamic icons are for the MapstractionWidget that Henri and I created for the RUMS application.
Before the icons were static and there was a fixed number of them, so it was good enough to cache the with URLs, but now they are truly dynamic so they should not be cached. Requirements creep is to blame for this :slight_smile:

One idea that comes to mind if IE6 and IE7 support is not required (perhaps not the most efficient but simple to implement):

On the server, use some library to convert the image to a
data URI
. Pass it in the UIDL as a string and on the client side use something like

Element el = DOM.createImg();
DOM.setElementProperty(el, "src", dataUri);

Thank you Henri. It seems like a good idea so I will push in that direction, I assume you meant the class.
Also, for the data URI I found this usage example of a Base64 encoder:

As an aside, if I am not mistaken the com.vaadin.terminal.Resource class only deals with files stored on disk, which is appropriate. But I wonder if it would be worthwhile for the Vaadin core to have an alternative ‘dynamic’ type of resource - a class that could deal with in-memory objects. I don’t know how many people would find it useful, but in my case such a resource might be something like a direct reference to a java.awt.Graphics2D object for example. This resource could then be cached on the client-side and it would not be necessary to do disk IO. Does this make any sense?

There is StreamResource that can have its contents generated on the fly, but in general such cannot be cached on the client without your own code that knows when and what can be cached.
On the other hand, in your case data URIs are probably more efficient and simpler for the communication layer in your case if you already have a custom client side widget in which you are going to use them.