Conditional Theme Setup in Vaadin 7

i am developing a ‘beta’ version of our app, views/theme, that runs in our exsting vaadin app we have.
Because the the views will be based on a new theme, I will need to set the theme based on conditional settings on UI init.

I have located the following post, that lets you change theme using a UIProvider, however I do not need a selector.

http://stackoverflow.com/questions/16141247/change-themes-in-vaadin-7-via-code

Borrowing from the above, I have implemented the following in my AppUI:

[code]
ThemeUIProvider provider = new ThemeUIProvider();
String theme = (useBeta ? “mytheme-responsive” : “mytheme”);
provider.setTheme(theme);

getSession().addUIProvider(provider);

if(getSession().getAttribute(“theme”) == null || !getSession().getAttribute(“theme”).equals(theme)){
getPage().getJavaScript().execute(“document.location.reload(true)”);
}

getSession().setAttribute(“theme”, theme);
[/code]This works, as expected, but I would really like to set the UI Provider and Theme without causing a page reload.

Is there a way to setTheme before hand, and haveto do a page reload to pick up the sessioned provider theme?

I guess it goes something like that IF you have selection logic for the theme in the main UI. I assume the useBeta variable comes from some user interaction? Yes, changing the theme requires reloading the page…I just hope you are doing everything right there. You should be able to use Page.getCurrent().reload() for the reload, unless there’s some problem with that.

I don’t quite understand what you use the session attribute for. I guess you could use it to communicate the theme to the UIProvider, but you already set it there when you create the provider. Somehow communicating it through a session attribute sounds better if you later need to change the theme again - you don’t want to add a new UIProvider to the session every time.

Normally, you add the UIProvider in a SessionInitListener in the servlet, so there’s no reload, as it directly creates the proper UI with the proper theme. But I guess that can’t be done if you need user interaction to select the theme.

Notice that it is possible to switch between two Sass themes
like this
. There’s just couple of problems. One of the themes must be primary, to style all floating overlays. The other problem is that the theme’s CSS will be twice as big, as it includes both base themes (or twice if same base theme is used).

You are right about not adding to session everytime, I will need to fix that. I just follwed the previous user’s example. We I set the theme in the main UI, it doesn’t reflect in the app until we call the page reload, as it gets picked up the second time, I presume.

The user interaction is not direct, but is a setting that is picked up from a user data obj. I also allow a URL param to be passed (on page load) that will temporarly enable the new navigation/view/theme.

My last resort was to do the nested theme’ing, but this approach looks good, except for the page reload that I have to do.

You might be happy to learn that we added setTheme functionality to Vaadin 7.3.0.

See https://vaadin.com/wiki/-/wiki/Main/Changing+theme+on+the+fly for a very simple example on how this is used.