GWT layout panels vs. CSS layout

Question

I read an article entitled "Tags First GWT", in which the writer suggests using GWT for event-handling, and CSS for layout. I just don't know whether the benefit of GWT's cross-browser compatibility goodness outweighs the flexibility offered by pure CSS layout.

GWT

GWT 2.0 has some snazzy layout panels, but to get them to resize properly you really need to build the entire panel containment tree from the root panel down. It's an all-or-nothing thing, it seems.

CSS

You can use CSS to layout an application too, and I'm inclined to do just that, if only to justify my purchase of several books touting the 'semantic markup' gospel. The downside might be cross-browser incompatibilities, the prevalence of which I have yet to determine.

Which way to go?

What is your opinion? Are cross-browser problems bad enough, and prevalent enough, to warrant ditching my CSS books, and building with GWT layout panels?

Answer 1

Cross-browser problems are bad enough to seek relief in a framework of some kind, especially if you're not really a front-end designer/developer. But I wouldn't ditch the CSS books just yet. It helps you to understand what's going underneath the covers when a framework's abstraction starts leaking, and what you can do about it.

Google itself says "You aren't limited to pre-canned widgets either. Anything you can do with the browser's DOM and JavaScript can be done in GWT, including interacting with hand-written JavaScript." Presumably that includes styling, if you know how to do it (as you will if you've read and understood all those CSS books).

Answer 2

I agree with the recommendation of the author - use GWT for client-side logic, but still use HTML and CSS for presentation.

The new UI Binder & Declarative UI patterns actually encourage you to write your HTML and CSS. Its easier for the designers, and makes your code maintainable. You may want to read GWT HTML layout conventions on SO - it explains how to intermix Widgets and plain-html/css to get advantages of both worlds.

UI Binder makes it easy to use CSS using <ui:style>. With <ui:style>, you can generate CSS that is specific to that file. GWT will automatically obfuscate and optimize your CSS. Plus, if you mis-spell the css class name, it will give you a compile-time error (which is great) instead of you finding out about it when the page is deployed.

Within the <ui:style>, you can put any valid CSS. UIBinder also has ways to include a global stylesheet. Additionally, background images in CSS can automatically be combined into sprites/data:uris for performance.

To learn more, I'd recommend reading the UI Binder Guide, and then following the Contacts sample application. Its a great way to get started.

Also, I'd recommend using the MVP pattern for designing your GWT application. There are several good articles on it, and the GWT Contacts Sample app is great way to learn it.