4.5.2.1.10. Embedded
Embedded
component is intended for displaying images and embedding arbitrary web pages into the application screens.
XML name of the component: embedded
![gui Embedded dia](./img/gui_Embedded_dia.png)
The component is implemented for Web Client and Desktop Client. Desktop Client supports image display only.
Below is an example of using the component to display an image from a file located in FileStorage.
-
Declare the component in an XML screen descriptor:
<groupBox caption="Embedded" spacing="true" height="250px" width="250px" expand="embedded"> <embedded id="embedded" width="100%" align="MIDDLE_CENTER"/> </groupBox>
-
In a screen controller, inject the component itself and the
FileStorageService
interface. Ininit()
method, get theFileDescriptor
passed from the calling code, load the corresponding file in a byte array, create aByteArrayInputStream
for it, and pass the stream to thesetSource()
method of the component:@Inject private Embedded embedded; @Inject private FileStorageService fileStorageService; @Override public void init(Map<String, Object> params) { FileDescriptor imageFile = (FileDescriptor) params.get("imageFile"); byte[] bytes = null; if (imageFile != null) { try { bytes = fileStorageService.loadFile(imageFile); } catch (FileStorageException e) { showNotification("Unable to load image file", NotificationType.HUMANIZED); } } if (bytes != null) { embedded.setSource(imageFile.getName(), new ByteArrayInputStream(bytes)); embedded.setType(Embedded.Type.IMAGE); } else { embedded.setVisible(false); } }
The Embedded
component supports several different content types, which are rendered differently in HTML. You can set the content type with the setType()
method. Supported types:
-
OBJECT
- allows embedding certain file types inside HTML <object> and <embed> elements. -
IMAGE
- embeds an image inside a HTML <img> element. -
BROWSER
- embeds a browser frame inside a HTML <iframe> element.
In Web Client, the component enables displaying of files located inside VAADIN
folder. You can set the resource path relative to the application root, for example:
<embedded id="embedded"
relativeSrc="VAADIN/themes/halo/my-logo.png"/>
or
embedded.setRelativeSource("VAADIN/themes/halo/my-logo.png")
You can also define a resource files directory in the cuba.web.resourcesRoot application property and specify the name of a file inside this directory with the prefix for the value: file://
, url://
, or theme://
:
<embedded id="embedded"
src="file://my-logo.png"/>
or
embedded.setSource("my-logo.png")
In order to display an external web page, pass its URL to the component:
try {
embedded.setSource(new URL("http://www.cuba-platform.com"));
} catch (MalformedURLException e) {
throw new RuntimeException(e);
}