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

What you're describing seems to be quite easily available in GWT, with the built-in panels.

I suggest you take a look at the GWT showcase, and view the source to see how it's done.

---

Dock panel sample

DockPanel dock = new DockPanel();
dock.setStyleName("cw-DockPanel");
dock.setSpacing(4);
dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);

// Add text all around
dock.add(new HTML(constants.cwDockPanelNorth1()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth1()), DockPanel.SOUTH);
dock.add(new HTML(constants.cwDockPanelEast()), DockPanel.EAST);
dock.add(new HTML(constants.cwDockPanelWest()), DockPanel.WEST);
dock.add(new HTML(constants.cwDockPanelNorth2()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth2()), DockPanel.SOUTH);

// Add scrollable text in the center
HTML contents = new HTML(constants.cwDockPanelCenter());
ScrollPanel scroller = new ScrollPanel(contents);
scroller.setSize("400px", "100px");
dock.add(scroller, DockPanel.CENTER);