Book of Vaadin - vaadin.com

5.15. `Embedded`
Prev	Chapter 5. User Interface Components	Next

5.15. `Embedded`

The Embedded component allows displaying embedded media objects, such as images, animations, or any embeddable media type supported by the browser. The contents of an Embedded component are managed as resources. For documentation on resources, see Section 4.5, “Referencing Resources”.

The following example displays an image from the same Java package as the class itself using the class loader.

Embedded image = new Embedded("Yes, logo:",
    new ClassResource("vaadin-logo.png", this));
main.addComponent(image);

Figure 5.40. Embedded Image

The Embedded component supports several different content types, which are rendered differently in HTML. You can set the content type with setType(), although for images, as in the above example, the type is determined automatically.

Embedded.TYPE_OBJECT: The default embedded type, allows embedding certain file types inside HTML <object> and <embed> elements.
Embedded.TYPE_IMAGE: Embeds an image inside a HTML <img> element.
Embedded.TYPE_BROWSER: Embeds a browser frame inside a HTML <iframe> element.

5.15.1. Embedded Objects

The Embedded.TYPE_OBJECT is the default and most generic embedded type, which allows embedding media objects inside HTML <object> and <embed> elements. You need define the MIME type for the object type.

Currently, only Shockwave Flash animations are supported (MIME type application/x-shockwave-flash).

// Create a Shockware Flash resource
final ClassResource flashResource =
    new ClassResource("itmill_spin.swf", getApplication());
// Display the resource in a Embedded compoant
final Embedded embedded =
    new Embedded("Embedded Caption", flashResource);
// This is the default type, but we set it anyway.
embedded.setType(Embedded.TYPE_OBJECT);
// This is recorgnized automatically, but set it anyway.
embedded.setMimeType("application/x-shockwave-flash");

You can set object parameters with setParameter(), which takes a parameter's name and value as strings. The object parameters are included in the HTML as <param> elements.

5.15.2. Embedded Images

Images are embedded with the type Embedded.TYPE_IMAGE, although you do not normally need to set the type explicitly, as it is recognized automatically from the MIME type of the resource, as in the example above.

You can find another example of displaying an image from FileResource in Section 5.16, “Upload”. Another example, in Section 4.5.5, “Stream Resources”, shows how you can generate the content of an Embedded component dynamically using a StreamResource.

If you have a dynamically generated image, for example with a StreamResource, and the data changes, you need to reload the image in the browser. Because of how caching is handled in some browsers, you are best off 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",
                       getApplication());
// Instruct browser not to cache the image.
imageResource.setCacheTime(0);
// Display the image in an Embedded component.
Embedded embedded = new Embedded("", imageResource);

When refreshing, you also need to call requestRepaint() for the Embedded object.

// This needs to be done, but is not sufficient.
embedded.requestRepaint();
// Generate a filename with a timestamp.
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String filename = "myfilename-" + df.format(new Date()) + ".png";
// Replace the filename in the resource.
imageResource.setFilename(makeImageFilename());

You can find more detailed information about the StreamResource in Section 4.5.5, “Stream Resources”.

5.15.3. Browser Frames

The browser frame type allows you to embed external content inside an HTML <iframe> element. You can refer to a URL with an ExternalResource object. URLs are given with the standard Java URL class.

URL url = new URL("http://dev.itmill.com/");
Embedded browser = new Embedded("", new ExternalResource(url));
browser.setType(Embedded.TYPE_BROWSER);
main.addComponent(browser);