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.*;

@SuppressWarnings("serial")
public class MoonPhasesApplication extends Application
{
	@Override
	public void init()
	{
		setTheme("MoonPhasesTheme");

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

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

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

		verticalLayout.addComponent(btn);
		verticalLayout.addComponent(theImage);

		mainWindow.setStyleName("black");
		mainWindow.setContent(verticalLayout);
		setMainWindow(mainWindow);
	}
}

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: http://demo.vaadin.com/chameleontheme

  2. Futurix says:

    Thank you

Comments are closed.