CODEWITHSUNDEEP
cssgwt
Nagesh Salunke
Nagesh Salunke

Reputation: 1288

Changing GWT theme Dynamically

I have a GWT application, I created appBlueTheme.jar,appOrangeTheme.jar and added to BuildPath of project. My module.gwt.xml file has

 ....
<inherits name='appBlueTheme.appBlueTheme'/>
<inherits name='appOrangeTheme.appOrangeTheme'/>
 ...

But in my app i see the effect of appBlueTheme as GWT doc say

"inherited modules will be cascaded in the order they are listed"

I want theme to be changed based on user response. How do i achieve this?

Upvotes: 2

Views: 2493

Answers (1)

Andrei Volgin
Andrei Volgin

Reputation: 41099

If by "theme" you mean styling, the right approach is not to create a separate jar for each theme, but to use CSS instead.

A. If you use CSSResource, you can use conditional CSS:

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Conditional_CSS

B. If you use an external CSS file, instead of

.headerPanel {
    background: blue;
}

you can specify a different background based on a theme selected:

.orangeTheme .headerPanel {
    background: orange;
}
.blueTheme .headerPanel {
    background: blue;
}

Note that your code (or Ui:Binder) should only assign class "headerPanel" to a widget. When you start your app, you assign a default theme to your outmost widget (the one you add to the RootPanel). For example, you set

myAppPanel.addStyleName("blueTheme");

This will give a blue background to all widgets with "headerPanel" class. When a user chooses a different theme, you remove "blueTheme" class and add "orangeTheme" class. It will automatically refresh the page (no need to reload it) and all styles will change.

EDIT:

If you need to apply a theme to the entire app, including PopupPanel and dialogs, use this code to apply your theme:

Document.get().getBody().setClassName("blueTheme");

Upvotes: 3

Related Questions