Use my icons for UI Components

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I’m new for Vaadin and after triing to develop some easy applications, I’m triing to use my personal icons on com.vaadin.ui.Button and com.vaadin.ui.Label but without successeful ( using Theme resource, too ).

How can I do that?

Which code do I have to write?

Thank you
Stefano

2

Hi Stefano!

If you want the button to show only your image (eg. a clickable icon) you need to

[list=1]

[]
wrap the image in a Resource
[]
use button.setIcon() to assign the resource to the button’s icon
[*]
use button.setStyleName(Button.STYLE_LINK) to make the button show only the image

[/list]If you want just to display a unclickable image you want to use the Embedded component. Examples with source code for these and most other components are available in
the Sampler
.

3

Hi Henri, thanks a lot for you answer, but I’ve just tried that you say bu everytime I receive this Error message:

Requested resource [VAADIN/themes/reindeer/icons/contact-128.png]
not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

Have you never see it?

Stefano

4

Hi Stefano,

In order to use your own icons, you must create your own theme as well, because that’s how ThemeResources work. They use relative paths and always use the current application theme as the root folder.

See the
tutorial for creating a simple theme
, and then create the folder “icons” inside your theme folder and place your icons there.

5

You can do it by hand like Jouni described if you want, but I recommend letting our Eclipse plugin handle that stuff. For more info see here:
http://vaadin.com/eclipse
.

After you’ve created a new theme (let’s say you named it “mytheme”) for your project you create the directory WebContent/VAADIN/themes/mytheme/icons and put all your images there. You need to switch your application to the new theme by adding setTheme("mytheme"); to your application init(), (the plugin does that automatically) and after that you can assign the images to your buttons like this: button.setIcon(new ThemeResource("icons/yourimage.png"));

6

Ok, now it works!!!

It’s so easy to understand now: Vaadin is superbe, I love it

Thanks a lot to you 2!!!

7

A little Off-Thread: in your opinion, this site

http://www.buyon.it/?sender=EH6HxTueQvW3lFdIfpoMwA%3D%3D
 is made by vaadin ?

Because I look like that is being developed by that: i like so much its look!

Thanks, Stefano.

8

It is not developed with Vaadin.