Creating a reusable Vaadin theme in Eclipse

Creating a reusable Vaadin theme in Eclipse

This tutorial teaches you how to create a standalone Vaadin theme that can be reused in other Vaadin projects as an add-on.

Requirements:

Create a project for your theme

Create a new Java project.

Download a Vaadin JAR and add it to your project’s build path.

In the src folder, create a class for your theme:

Java

package com.example.mytheme;
import com.vaadin.ui.themes.BaseTheme;
public class MyTheme extends BaseTheme {
  public static final String THEME_NAME = "my-theme";
}

This makes your theme extend Vaadin’s BaseTheme, which will let you fully customize your theme from scratch. On the other hand, if you don’t have very specific theming needs and just want good-looking results quickly, try extending ChameleonTheme instead. In any case, both of these themes are designed for extension and therefore your best choices to start with.

In the root of your project, create the following folder and files:

META-INF
- MANIFEST.MF
VAADIN
- themes
  - my-theme
    - addons.scss
    - my-theme.scss
    - styles.scss

The MANIFEST.MF file should contain the following:

Manifest-Version: 1.0
Implementation-Title: My Theme
Implementation-Version: 1.0.0
Vaadin-Package-Version: 1
Class-Path:

Your Implementation-Title and Implementation-Version should reflect how you want your theme to be visible in the Vaadin directory.

Create a demo app for your theme

Create a new Vaadin project.

.png)

Add your theme project to your demo project’s Java build path.

Add your theme project to your demo project’s deployment assembly. This will automatically convert your theme project to a Java EE Utility project.

Now that your theme project is a Java EE Utility project, it will also have a deployment assembly. Add your theme project’s VAADIN folder to there and make sure you specify its deploy path as VAADIN.

In your demo application class, add the following line to your init() method:

Java

setTheme(MyTheme.THEME_NAME);

To try if it works, right-click on your demo project and choose Run As > Run on Server.

Develop your theme

Create a new style name constant in your theme class for each new CSS class name you add to your stylesheets. These can then be passed to the Component.addStyleName(String) method. This will make it easier for other developers to use your theme!

Changes to your stylesheets will be visible in your demo app almost instantly. All you need to do is save the file, wait for the server to automatically pick up the changes, then refresh your browser.

Export your theme as a Vaadin add-on

Right-click on your theme project, choose Export… > Java > Jar file and make sure your settings match those in the following two images.