What is the best way to lay out elements in GWT?

Question

What is the best practice to specify the positions of elements in GWT widget?

Imagine you have a task: place a set of widgets in page layout. What would you use to position all your buttons and inputs in some order?

1. standart HTML markup with tables/divs + CSS styles for positioning
2. GWT widgets: panels, grids, tables + CSS styles for positioning
3. GWT widgets: panels, grids, tables + their native properties for positioning

If 2 or 3 - what would you use to reproduce a standart HTML table with colspans, fixed width columns and paddings?

ps UIBinder and XML markup. GWT 2.4

---

My opinion: one of the biggest advantages of GWT is the ability to prevent programmer from writing HTML markup and add cross-browser support for interfaces. We shouldn't drop these points so its better to choose p.3 and try to use CSS ONLY for decoration - i.e. colors, fonts etc.

Another point of view: its a bad idea to place any styles inline. By specifying properties of the widgets in XML markup we are literally doing exactly this. Also, GWT doesn't have enough widgets to produce a normal layout. For example you need to create a simple table with collspans and fixed column width. How would you go about this? Looks like you have to embed several HorizontalPanels into VerticalPanels, specify width/height in everyone of them and produce a great paper of XML by this.

---

So whats your opinion?

Answer 1

GWT generates terrible, horrible, no-good, very-bad HTML. This is just my opinion, and others will disagree. But I work with GWT every day, and the infinitely nested divs and tables are enough to make even a newbie web developer cry. And all of its styles are inline, so if you want to apply or override these with an external style sheet, you'll end up with a forest of !important declarations.

It does, however, generate amazingly lovely JavaScript. As someone who once had to maintain and develop a supremely complex DHTML project and provide support for IE 5.5 and up -- by hand -- I have to admit, this is the best part of GWT.

Admittedly, I am a DHTML purist, having been a web devleoper long before I became a software developer. Personally I believe that HTML should only be for structure, CSS should provide styling, and JavaScript should provide the other functionality, and all three should be completely separate. GWT is pretty good at the last part -- the JavaScript -- but its generated HTML offends my sensibilities and is at least ten times more complicated than it has to be. But then again, most generated code is. (Consider websites created in MS Word or the HTML generated from WYSIWYG-style editors.)

Given a complex web-based application -- and the restriction against rolling a Ruby on Rails application -- I'd happily go with GWT. But my app would be pretty much a collection of FlowPanels (which compile to HTML <div>s) and GWT-generated Javascript, with my own CSS on top. So in the situation laid out by the OP, I'd use a FlowPanel, add the elements (eg. GWT form elements), apply any server-side logic, and then do styling with external CSS.

When looking at GWT, you may want to consider whether you'll be wanted to re-design your application later on, or wish to have a designer or other non-programmer create templates/styles/CSS to apply on top. If this is the came, you'll want to be very careful when you design your GWT app to not apply styles and instead apply classes and id's.

Also as a testing side note: if you plan on using Selenium for UI testing, you'll really want to hang id's on things. The xpath's from the generated HTML are practically unsuable and can stretch into the hundreds of characters in length.

This being said, I'd be very interested in hearing about other peoples' experiences, especially if they differ from mine.

tl;dr version:

1. GWT-generated HTML is quite bad with nested tables and many layers of nested <div>s (more than necessary)
2. GWT does not generate CSS stylesheets, but places all styling inline. This makes using external stylesheets tedious and difficult.
3. GWT does an excellent job with cross-browser Javascript.
4. GWT does not, by default, attach id's to elements, so if you plan on using a tool like Selenium, you must add your own id's by hand or face amazingly long xpath's like you've never seen before.