Working with a theme resource in Vaadin

Post to Twitter

Vaadin can do a lot out of the box. The other day I wanted to simply display an image so I began to look at the demo and then at the code for ThemeResource. I checked out the Vaadin forums and quickly found a good way to solve this. At the same time I also wanted to use the black version of the Reindeer theme (which is baked into Vaadin). Today I’ll show you how I did this and hopefully it can help someone out.

Using the Vaadin plugin for Eclipse I created a new Vaadin project. I needed a place to store my image so under the “WebContent” folder I created a folder structure like this:

I grabbed an image of the Moon’s phases and put it into the “img” folder. I also added a file called “styles.css” which contains just this line:

@import url(../reindeer/styles.css);

My code looks like this:

package com.example.moonphases;

import com.vaadin.Application;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.*;

public class MoonPhasesApplication extends Application
	public void init()

		Window mainWindow = new Window("Moonphases Application");
		VerticalLayout verticalLayout = new VerticalLayout();

		Embedded theImage = new Embedded("The Moon", new ThemeResource("img/moon.jpg"));

		Button btn = new Button("Hello World");



So with that code I can load my image and display it as well as use the dark reindeer theme as seen by the button I placed on the page.

Post to Twitter

This entry was posted in Java, Vaadin. Bookmark the permalink.

2 Responses to Working with a theme resource in Vaadin

  1. hezamu says:

    Cool stuff, thanks.

    Also check out the Chameleon theme (available in the Vaadin Directory) which comes with a nice customization options:

  2. Futurix says:

    Thank you

Comments are closed.