What is the best approach towards styling GWT applications?

Question

General approach in GWT is to use Panels and then apply custom CSS themes to get a customized look. While I can achieve a certain extent of personalization of my GWT app through CSS tinkering, I was wondering how others generally approach styling.

Some of the suggestions I came across the web were to manage layout with plain HTML, through use of HTMLPanel's. This way one can straightaway use the HTML mock-up within the application without having to code all the layout.

So what in your opinion is the best and least painful way to approach layout and custom styling of GWT application?

Answer 1

It all depends - on you, your experience, your team, etc:

1. The usual/older approach of Panels, Widgets and Compositing will be easier to work with/more familiar:
   • If you are a Java programmer experienced with frameworks like Swing, etc. (I think that was the point of the GWT team),
   • Or if you come from the "desktop world" in general.
2. The UiBinder approach is the newer one:
   • Recommended if you are just starting your experience with GWT (it seems UiBinder is here to stay, and it allows more flexibility than the above approach),
   • Recommended if you have experience with web development (or desktop frameworks that use markup, like .NET's XAML, etc), since you'll be working in the familiar world of HTML/XML,
   • If you are working in a larger team, where you have designated designers in charge of the look of the web application (and they don't know/care about GWT). Cutting up the layout into HTML code should be pretty straightforward for them and you can, with little work, convert those templates into UiBinder's XML templates.

None of the above approaches is perfect - that's why it's worth to know their strong and weak points - but the end decision should be yours alone, since you know your/your team's capabilities best :)

Answer 2

So far, the best approach I found:

1. get rid of any default GWT theme
2. use UiBinder as much as possible
3. place your CSS in ui.xml that describes the widget
4. have one public Common CssResource with rules reused by many widgets

that way you don't need to maintain one global stylesheet which always is a pain (common problem: where is this rule used?)