GWT Panel Design Best Practices

Question

I am new to GWT and also in Swing / SWT interface style. I have been working with HTML for a long time, and I know how to create my user interfaces in it. However, it’s hard for me to translate this to GWT. What I'm trying to do at the moment is a simple interface with a table on the left with 4 columns, a title and a header, and a panel on the right with input and some drop-down lists (filters for the list on the left). I did this as a layout in HTML, but it's hard for me to translate this into GWT. Each row in the table must also have a select link to select an item in the table.

I know UiBinder , but seeing that there has been a page for him since December and it still hasn’t come out, this does not seem to be a viable option. I would love it if I could convert my HTML into some kind of GWT code, but it looks like the material that exists in GWT is at a higher level of abstraction. It is also difficult to use the DOM.createElement material in conjunction with widgets, i.e. creating your own panel.

Answer 1

The trick with the GWT or Swing GUI is to visualize your planned layout as a combination of toolkit layout widgets nested together.

Based on your description, this is a high level view of how you can design your GUI:

Start with HorizontalSplitPanel for the highest level.

For the left side (table :)

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

(Alternatively, you can get away with one large FlexTable for the entire left side. Especially if you want to emulate HTML tables with colspans, etc.)

For the right side:

Create a VerticalPanel and simply add headings, drop-down menus and text inputs as needed. Alternatively, you can create a grid if you want the labels on the side of each drop-down menu or text input. Add the right sidebar to the right side. HorizontalSplitPanel

Answer 2

What you are describing is pretty easily available in GWT with integrated panels.

I suggest you take a look at the GWT storefront and look at the source to find out how.

---

Dock panel example

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

Answer 3

I think you can use your HTML experience in your GWT project. And you also do not need to look for a connecting UI. You can play between them.

Create your entire layout in HTML. Even if you need static content, use HTML. in your HTML. Put it where you want to place your interactive widget. This is where the GWT begins. Create your beautiful widgets in GWT. Connect it to the HTML layout of RootPanle.get ("your div id"). Add (your widget);

This method is also used in the sample project shipped with sdk. Even in Google IO 2010 they promote USE of more HTML where you can (My personal opinion ..)

Answer 4

In addition to very good answers, the following are already available:
Maybe you should take a look at smartGWT , which provides much more sophisticated widgets than those that come with GWT. Their storefront is also very useful if you are looking for ideas or cannot implement something.