Change themes in Vaadin 7 via code

Question

I am doing a project in Vaadin 7. In that I need to change the theme of a page.

In Vaadin 6, there is a function called 'setTheme()'. so that I can change the theme using that function wherever I want in my code.

But, In Vaadin 7, I couldn't find any like that.

I know there will be a way to do it.

And also how to apply changes on the UI when I change a theme?

Will it be changed automatically? (or)

ICEPush gonna help me?

Answer 1

In Vaadin 7 the method 'setTheme()' has been replaced with the new Annotation @Theme. The "on the fly theme change" is not possible in Vaadin 7.

There is a disucssion in this Vaadin Forum Thread about the on fly theme change in Vaadin 7. You should have a look on it.

Answer 2

Since I used custom themes, I have made it pretty simple. I used a toggle button and executed the required piece of code every time.

JavaScript.getCurrent().execute("document.body.className = document.body.className.replace(\"theme1\",\"theme2\"); ");

JavaScript.getCurrent().execute("document.body.className = document.body.className.replace(\"theme2\",\"theme1\"); ");

My css file will be like this.

.theme1 .v-button {
   /* some css attribute */
}

.theme2 .v-button {
   /* some css attribute */
}

Believe me; the theme switch is very very fast since the browser itself do the trick to switch the theme rather than asking the Vaadin server to do the switch.

Answer 3

setTheme functionality has been introduced in Vaadin 7.3.0: https://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly

Answer 4

you can try this for Vaadin 7:

1. Create your own UIProvider
2. Register your UIProvider in root UI
3. Switch theme in UIProvider and trigger page reload

DynamicThemeUIProvider.java

public class DynamicThemeUIProvider extends UIProvider {
    private String currentTheme = "reindeer";

    @Override
    public Class<? extends UI> getUIClass(UIClassSelectionEvent event) {
        return DemoUI.class;
    }

    public void setTheme(String theme) {
        currentTheme = theme;
    }

     public String getTheme(UICreateEvent event) {
         return currentTheme;
     }
}

DemoUI.java

public class DemoUI extends UI {
    private DynamicThemeUIProvider provider;
    @Override
    protected void init(VaadinRequest request) {
        provider = new DynamicThemeUIProvider();
        getSession().addUIProvider(provider);
    }

    public DynamicThemeUIProvider getDynamicThemeUIProvider() {
        return provider;
    }
}

Then on a component which switches the theme:

@Override
public void valueChange(ValueChangeEvent event) {
    DemoUI ui = (DemoUI) getUI();
    DynamicThemeUIProvider uiProvider = ui.getDynamicThemeUIProvider();

    if (uiProvider == null) {
        return;
    }

    uiProvider.setTheme("reindeer");
    try {
        String value = (String) event.getProperty().getValue();
        uiProvider.setTheme(value.toLowerCase());
    } catch (Exception e) {
        e.printStackTrace();
    }

    ui.getPage().getJavaScript().execute("document.location.reload(true)"); // page refresh
}

Answer 5

Regarding themes for charts: simply have a switch somewhere inside a listener of either a ComboBox or an OptionGroup (for radio buttons) to make a the following ChartOptions static method call, e.g.:

ChartOptions.get().setTheme(new VaadinTheme())

then

ChartOptions.get().setTheme(new SkiesTheme())

etc.

there's also GridTheme(); GrayTheme() and HighChartsDefaultTheme(); you can even extend the base theme to create your own theme (look that up in the Book of Vaadin).

Answer 6

Since Vaadin 7.3 you can use UI#setTheme()

Answer 7

In Vaadin 7 and higher Versions we have an Annotation called @Theme(yourThemeName) based on the Theme name which you give here it will redirect to that specific .scss Style.This annotation is called before the Init method is called.