GWT panel design best practices

Question

I am a newbie in GWT, and also to Swing/SWT style interface building. I have worked with HTML for a long time, and I know how to build my UIs in that. However, I am having trouble translating this to GWT. What I am trying to make currently, is a simple UI with a table on the left with 4 columns, heading and a caption, and a panel on the right with an input and some dropdowns (filters for the list on the left). I have made this as a mockup in HTML, but I am having trouble translating this into GWT. Each row in the table should also have a select link for selecting an item in the table.

I know of UiBinder, but seeing as there has been a page for it since december, and it's still not out, it doesn't seem like a viable option. I would love it if I could convert my HTML to some GWT code, but it seems like the stuff that exists in GWT is at a bit higher level of abstraction. It also seems hard to use DOM.createElement stuff combined with widgets, ie. creating my own custom panel.

Answer 1

The trick with GWT or Swing GUIs is to visualize your intended layout as a combination of the toolkit's layout widgets, nested inside each other.

Based on your description, here's a high level view of how you might compose your GUI:

Start with a HorizontalSplitPanel for the highest level.

For the left side (the table:)

Create a VerticalPanel and add 3 widgets to it - a image or html literal for the header, then a Grid with 4 columns for the table itself, then another image or literal for the caption. Add this vertical panel to the left side of the split panel

(Alternatively, you might get away with one big FlexTable for the entire left side. Especially if you're looking to emulate HTML tables with colspans and such)

For the right side:

Create a VerticalPanel, and just add headers, dropdowns, and text inputs as necessary. Alternatively, you could create a Grid if you want labels on the side of each dropdown or text input Add this right side panel to the right side of the HorizontalSplitPanel

Answer 2

In addition to the very good answers already available:
You might want to have a look at smartGWT which provides a lot more sophisitcated widgets than the ones that come with GWT. Their showcase is also very helpful if you are looking for ideas or have trouble implementing something.

Answer 3

I think you can use your HTML experience highly in your GWT project. And you also need not to go for UI binder You can play in between.

Design your whole layout in HTML. Even where you need static content use HTML. in your HTML Put a where you want to put your interactive widget. From here on GWT starts. Build your nice widgets in GWT. Hook it with your HTML layout by RootPanle.get("your div ID").add(your widget);

This technique is used also in the sample project comes with the sdk. Even in Google IO 2010, they are promoting the USE of more HTML, where you can (My personal opinion..)