The best way to style GWT widgets in a library

Question

I am developing some widgets for the library for internal use in the company I work for.

I don’t know how to style widgets.

There are at least the following methods:

• use Widget.setPrimaryStyleName and let the user provide external css. We use maven archetypes to create applications so that we can provide default styles. In any case, I do not really like it.

• use the GWT 2.0 CssResourceBundle. This way we can compile CSS into a module and it will be optimized (and it also depends on the browser).

• provide a module with style. Something like the default GWT theme. But I don’t know how exactly this works.

I want:

• make components as complete as I can (do not depend on external css included)
• open the door to change styles (if I want to change the way a widget is displayed in a specific application).

What is your experience with this topic?

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

Answer 1

I think the best way is to provide styles in the module. This way you can easily restore the style or add “themes” to your controls.

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

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

I would suggest you use the new module for your styles so you can easily switch between styles ... (just change the inherits tag). For example, if one of your widgets used the css class "my-widget", you would have a module "style" (or several modules) that would define this css class (in the css file) - this way you could several modules that implement this css class and switch between them will be as easy as changing the module name in the inherits tag. Thus, you will be beautifully separated code styles that will be independent of the technical implementation of widgets. If you have a few more questions, feel free to ask.

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

Answer 2

If you just write a new widget and want people to be able to customize its css, then the one template I used is the following:

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

That way, 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 his choice in his own resource package, using the second constructor instead.