Embedded image problem

When you create a main window, by default it creates one with a titleBar and the first item in the titleBar is an Embedded.

The documentation “4.5.2.1.8. Embedded” shows how to inject the embedded and the filestorageservice into the controller and load the image file as a byte array.

It relies on:


FileDescriptor imageFile = (FileDescriptor) params.get("imageFile");

The documentation then says: In Web Client, the component enables displaying of files located inside VAADIN folder. For example:


embedded.setRelativeSource("VAADIN/themes/halo/my-logo.png")

Where is the “Web Client” for the main window for setting the embedded source?

It also says: 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:


embedded.setSource("my-logo.png")

How is this resource directory specified if the files are located in a folder in themes? Or are we supposed to move the files to that directory? Where is it by default?

Hi,

you can add your images to the themes directory, for example to: themes/halo/images/my-logo.png. Then you can set file reference to embedded using theme:// prefix:


logoImage.setSource("theme://images/my-logo.png");

Or using setRelativeSource method:


embedded.setRelativeSource("VAADIN/themes/halo/images/my-logo.png")

In case of logo image in main window, you can replace it using application.logoImage application property or from Studio: Project Properties - Branding (button).

If your project does not have themes directory (you didn’t extend theme) you can create modules/web/web/VAADIN directory and add your images there, it will be copied to tomcat too.

Ok. I get it now. I was a little confused by the wording in the documentation. I though FIRST you had to do something in a “screen controller” and then you had to something in a “web client” that I didn’t know where it was.

I now realize that the screen controller instructions are for the desktop application only, and the other instructions are for the controller for the screen in a web app.

Not exactly. There are actually two sections about different topics, they are just not separated visually. The first begins with “Below is an example of using the component to display an image from a file located in FileStorage.” And it is valid for both types of clients. The second is “In Web Client, the component enables displaying of files located inside VAADIN folder.” It is valid only for web client.