How to to customize GWT components style?

Question

I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.

I see two solutions:

Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.

There are other solutions? Which is the correct one?

score 2 · Answer 1 · answered Aug 07 '13 at 19:11

2

You can put those styles in a CssResource as well. Just put @external on top of those styles in your css file, and you are good to go.

For example:

@external gwt-DatePicker; 
.gwt-DatePicker {
    ...
}

Hope it helps.

answered Aug 07 '13 at 19:11

emanuele

193
1
10

score 0 · Answer 2 · answered Aug 07 '13 at 14:13

0

Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.

answered Aug 07 '13 at 14:13

Hilbrand Bouwkamp

13,509
1
45
52

I've to deal also with widgets that are not mapped directly to a simple HTML element. – Fedy2 Aug 07 '13 at 14:29

score 0 · Answer 3 · answered Aug 08 '13 at 12:45

0

You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.

Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?

answered Aug 08 '13 at 12:45

Jake Weber

301
3
7

This will require subclass each class only to set a css style name. Here a list of optimizations: http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#Optimizations – Fedy2 Aug 08 '13 at 13:02

score 0 · Answer 4 · answered Aug 09 '13 at 18:50

I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.

How to to customize GWT components style?

4 Answers4