User Interface Components

The menu bar has the overall style name .v-menubar. Each menu item has .gwt-MenuItem style normally and .gwt-MenuItem-selected when the item is selected.

5.18. Embedded Resources

You can embed images in Vaadin UIs with the Image component, Adobe Flash graphics with Flash, and other web content with BrowserFrame.There is also a generic Embedded component for embedding other object types.The embedded content is referenced as resources, as described in Section 4.4, “Images and Other Resources”.

The following example displays an image as a class resource loaded with the class loader:

Image image = new Image("Yes, logo:",

new ClassResource("vaadin-logo.png")); main.addComponent(image);

The caption can be given as null to disable it. An empty string displays an empty caption which takes a bit space. The caption is managed by the containing layout.

You can set an altenative text for an embedded resource with setAlternateText(), which can be shown if images are disabled in the browser for some reason. The text can be used for accessibility purposes, such as for text-to-speech generation.

5.18.1. Embedded Image

The Image component allows embedding an image resource in a Vaadin UI.

// Serve the image from the theme

Resource res = new ThemeResource("img/myimage.png");

// Display the image without caption Image image = new Image(null, res); layout.addComponent(image);

The Image component has by default undefined size in both directions, so it will automatically fit the size of the embedded image. If you want scrolling with scroll bars, you can put the image inside a Panel that has a defined size to enable scrolling, as described in Section 6.6.1, “Scrolling the Panel Content”. You can also put it inside some other component container and set the overflow: auto CSS property for the container element in a theme to enable automatic scrollbars.

Generating and Reloading Images

You can also generate the image content dynamically using a StreamResource, as described in Section 4.4.5, “Stream Resources”, or with a RequestHandler.

If the image changes, the browser needs to reload it. Simply updating the stream resource is not enough. Because of how caching is handled in some browsers, you can cause a reload easiest by renaming the filename of the resource with a unique name, such as one including a timestamp. You should set cache time to zero with setCacheTime() for the resource object when you create it.

//Create the stream resource with some initial filename StreamResource imageResource =

new StreamResource(imageSource, "initial-filename.png");

//Instruct browser not to cache the image imageResource.setCacheTime(0);

160	Embedded Resources