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?

Augmentative

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 :)

Austria

Does UiBinder internally uses HtmlPanel to embed raw HTML? – Augmentative

Short answer: no :) UiBinder is just a templating language - it's up to you if you want to use only HTML in your template or to embed some Widgets in some sort of Panel. Your template will be output just as it is - without and extra "wrapping" around it (so if your root Panel is HTMLPanel you'll get a div, etc). HTMLPanel is often used as a root Panel for UiBinder templates, because it has some special treatment by UiBinder - you can mix HTML and Widgets in it (you can't, for example, put raw HTML in a VerticalPanel). See the UiBinder docs for more info. – Austria

Thanks Igor, I have decided to use UiBinder approach. – Augmentative

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?)

Activate