I’m new to vaadin, and I’m having some kind of a problem with adding an image to a layout. I put the image in the same folder that is used in the sampler example of the image (…/runo/icons/64/logo2.png).
Window mainWindow = new Window(“page 1”);
HorizontalLayout h1 = new HorizontalLayout();
h1.setWidth(“100%”);
mainWindow.addComponent(h1);
Embedded e = new Embedded(“MegaSoft Logo”,
new ThemeResource(“…/runo/icons/64/logo2.png”));
h1.addComponent(e);
setMainWindow(mainWindow);
The window displayed shows only the caption “MegaSoft Logo” and no image.
Is there something wrong with this? And if I want to display an image that is located for example in the source folder, how should I do it?
So the correct folder where you’ve placed your image is
WebContent/VAADIN/themes/runo/icons/64/logo2.png , right?
Are you using the Runo theme or the Reindeer theme in your app?
Have you extracted the theme contents from the Vaadin JAR, so you have the contents of the
runo (or
reindeer ) folder in your project?
If so, then your Embedded should be able to show the image correctly. Could you inspect the generated HTML IMG-element in the browser to see to which URL it points to?
If you’re using the Runo theme in your application, you can simplify the path of the ThemeResource a bit, to
new ThemeResource(“icons/64/logo2.png”)
Note also, that you probably should create your own theme folder for your application specific resources, e.g. create a folder called "
mytheme " inside
WebContent/VAADIN/themes folder, and place the following code into a file named "
styles.css "
@import "../runo/styles.css";
Then you can place the image freely inside the
mytheme folder, and then refer to the image with ThemeResource, image path relative to the
mytheme folder root.
Yes, the location of file is exactly as you said “WebContent/VAADIN/themes/runo/icons/64/logo2.png”.
I haven’t specified which theme to use, and I don’t know how, but I tried before to add an already existing image in the same runo folder, like this one: “WebContent/VAADIN/themes/runo/icons/64/arrow-down.png” using the same code that I wrote for logo2.png image, and it actually worked, but when I tried to put the logo2.png image in the same folder it didn’t work!
So How can I use any of the themes, either Reindeer or Runo?
and for the code that I should write in the styles.css file, should I be using runo theme for the code to work or not?
OK, then you’re using the default which is Reindeer. To change the application theme, just call
setTheme(“theme-name”) in your
Application.init()
So you have just created the empty folders inside your WebContent, and placed that one single image there?
If so, my guess is that since all request to the VAADIN/themes/runo folder are forwarded through the servlet (which depends on your web.xml descriptor), the static file isn’t searched. I would suggest you try to create a completely new theme, as I described in the previous post.
