Embedded Resources

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

    Java

    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 alternative 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.

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

    Java

    2. Resource res = new ThemeResource("img/myimage.png");
    4. // Display the image without caption
    5. Image image = new Image(null, res);

    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 “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.

    You can also generate the image content dynamically using a StreamResource, as described in , or with a RequestHandler.

    Java

    When refreshing, you also need to call markAsDirty() for the Image object.

    Java

    1. // This needs to be done, but is not sufficient
    2. image.markAsDirty();
    5. SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
    6. String filename = "myfilename-" + df.format(new Date()) + ".png";
    8. // Replace the filename in the resource
    9. imageResource.setFilename(makeImageFilename());

    The Flash component allows embedding Adobe Flash animations in Vaadin UIs.

    Java

    You can set Flash parameters with setParameter(), which takes a parameter’s name and value as strings. You can also set the codeBase, archive, and standBy attributes for the Flash object element in HTML.

    The BrowserFrame allows embedding web content inside an HTML <iframe> element. You can refer to an external URL with ExternalResource.

    As the BrowserFrame has undefined size by default, it is critical that you define a meaningful size for it, either fixed or relative.

    1. BrowserFrame browser = new BrowserFrame("Browser",
    3. browser.setHeight("400px");
    4. layout.addComponent(browser);

    Notice that web pages can prevent embedding them in an <iframe>.

    The generic Embedded component allows embedding all sorts of objects, such as SVG graphics, Java applets, and PDF documents, in addition to the images, Flash graphics, and browser frames which you can embed with the specialized components.

    For example, to display a Flash animation:

    Java

    Or an SVG image:

    Java

    1. // A resource reference to some object
    2. Resource res = new ThemeResource("img/reindeer.svg");
    4. // Display the object
    5. Embedded object = new Embedded("My SVG", res);
    6. object.setMimeType("image/svg+xml"); // Unnecessary

    The MIME type of the objects is usually detected automatically from the filename extension with the FileTypeResolver utility in Vaadin. If not, you can set it explicitly with setMimeType(), as was done in the example above (where it was actually unnecessary).

    Some embeddable object types may require special support in the browser. You should make sure that there is a proper fallback mechanism if the browser does not support the embedded type.