Best way to style GWT widgets in a library

Question

I'm developing some widgets into a library for internal use at the company I work for.

I don't know what's the recommended way to style the widgets.

There are at least these ways:

• use Widget.setPrimaryStyleName and let the user provide an external css. We use maven archetypes to build applications so we can provide default styles. Anyway I don't like it very much.

• use the GWT 2.0 CssResourceBundle. So we can compile the CSS into the module and it will be optimized (and it can be browser-dependant too).

• provide a module with the styling. Something like the default GWT themes. But I don't know how exactly this works.

I want to:

• make the components as cohesive as I can (don't depend on externally included css's)
• leave open the door to modify styles (if I want to change the way some widget looks in a concrete application).

What's your experience in this subject?

Note: if you are looking for a definitive answer look through all the answers and the comments. There are different ideas and all good ones. Then choose what is best for you :)

Answer 1

I think the best way would be to provide styles in a module. This way you will be able to easily restyle, or add "themes" for your controls.

I'm doing a similar project which is hosted on github (http://github.com/markovuksanovic/gwt-styles), so you might want to check that out. You can download the jar file, include it in your project and specify in your module xml that you wanna use that style.. sth like

<inherits name='gwt.theme.flick.Flick'/>

I would suggest you to use new module for your styles so that you can easily switch among styles... (just change the inherits tag). So, for example, if one of your widgets used css class "my-widget", you would have a "style" module (or multiple modules) which would define that css class (in the css file) - this way you could have multiple modules that implement that css class and switching amongst them would be as easy as changing the module name in the inherits tag. This way you would a nicely decoupled code - styles will be independent of the technical implementation of the widgets. If you have some more questions, feel free to ask.

P.S. I forgot to mention above - pay close attention on how the style module is built (build.xml), it's a little tricky. You can find some more information about creating modules at the following lication http://developerlife.com/tutorials/?p=229

Answer 2

If you're just writing a new widget and want people to be able to customize its css, then one pattern I've used is this:

public class MyWidget extends Composite {
  public interface MyCss extends CssResource {
    ...
  }

  private static MyCss defaultStyle;
  private static MyCss ensureDefaultStyle() {
    if (defaultStyle == null) {
      defaultStyle = GWT.create(DefaultResourceBundle.class).css();
    }
    return defaultStyle;
  }

  /** If you want to use default style, call this */
  public MyWidget() {
    this(ensureDefaultStyle());
  }

  /** If you want to use your custom style, call this */
  public MyWidget(MyCss css) {
    ...
  }
}

So your widget library can provide a CSS interface, and provide a default implementation for it. If your user wants to customize it, he can bind the CSS interface to a css file of his own choosing in his own resource bundle, and use the second constructor instead.