Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Tip: Explicitly set size of Embedded object for images via ThemeResource.

Basil Bourque
10 years ago Mar 03, 2012 9:30am

I am using ThemeResource in an Embedded object to show images in my Vaadin layouts. I do so because the web browser loads those directly from the web server, as a static file fetch, outside of the Vaadin framework. The "VAADIN/themes/mytheme/images" folder is available to the web server for direct serving. No need to store copies of those images in memory on the server in my Vaadin app sessions.

This approach works well except for one thing: A visual anomaly. The first time the user loads my layout, Vaadin quickly draws the layout. But Vaadin & the browser do not know the size of the image yet to be loaded, so no room is allocated on screen. A moment later the browser loads the static image from the web server, and determines its size. The browser then juggles the rendering of my Vaadin layout to make room for the image. This happens quickly, split-second, but the user has enough time to see my layout bouncing around erratically. While users may be used to that with many other web pages, there is a simple fix in Vaadin.

This fix is the same fix used in simple HTML web pages: Explicitly specify the size of the image to be loaded. Rather than let the browser load the image and determine the size, tell the browser the size ahead of time. When the Vaadin layout is first rendered in the browser, the pixels are assigned immediately to make room for the image not yet loaded. When the image loads a moment later, the user does not really notice as the layout is no longer bouncing around to changing its arrangement.

Like this in Vaadin:

Embedded reindeerImage = new Embedded( null, new ThemeResource( "images/reindeer.png" ) );
reindeerImage.setWidth( "240px" ); 
reindeerImage.setHeight( "180px" );

The fix is easy. But of course maintenance is an issue: If you change the image, then you will need to update your Vaadin source code to match.

Last updated on Mar, 3rd 2012
Danny Roest
10 years ago Mar 03, 2012 10:50am
kirubakaran M
5 years ago Feb 04, 2017 12:05pm