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?

Batts

Answer 1

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.

Batts

If you switch theme at run time beware of bugs in complex layouts (for example with Tables), because concrete implementation not always reacts on size changes after theme change – Larrikin

Answer 2

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.

Astrogate

any other way to change the Themes?? – Batts

You can do it like the last post in this forum: vaadin.com/forum#!/thread/1154742/2995814 or like here: vaadin.com/forum/#!/thread/1803904/1805113 with the UIProvider. – Astrogate

Thanks rege.. I will look in to it. – Batts

As mentioned in @Leif Åstrand s answer, setTheme() is re introduced in vaadin 7.3.0 – Nakashima

Answer 3

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

Sacramental

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
}

Longlegged

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).

Adonic

Answer 6

Since Vaadin 7.3 you can use UI#setTheme()

Scissor

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.

Alain