Best practices for designing GUI in GWT

Question

I have recently started studying Google Web Toolkit. I have went through some walkthroughs, and I think I understand the basics and the idea. However, I have some questions on the overall architecture and design of the applications.

Let's start with the GUI. I want to build a "common" web application, where the user first sees a login page. After successful login, the user is redirected to some kind of index page and a menu is added. I created a new LoginComposite for the login page, and tried to design a nice looking HTML table using the GWT Designer. However, I find that really hard to do, as you cannot set any individual properties on the individual cells (TDs)? There's no way to specify colspan or rowspan, and I can't set any padding or margin on the cells themselves. In short, I know exactly how I would have written the HTML code, but I can't translate that to the designer. Is that just me?

Also, I am wondering about the best practice for code layout and design. I went through the StockWatcher tutorial, but that's really not a very realistic web application. For example, I would like to know how I should design different forms (should each be in a own class inheriting the Composite-class)? How should I switch between forms (for example, first a list view, then a form for editing a chosen item from the list, then a totally different page)? If I have one Composite for each page, and instantiate them when needed in my EntryPoint, would that mean that the client will download all the JavaScript for all those Composites at page load? Should I stick with only one HTML page, or should I have many?

These are questions not really covered by any GWT tutorial. If anyone know a good example of a "real" web application built using GWT, I would love to see it.

Thanks for your input!

Answer 1

There are a whole bunch of resources in Google IO talks. For example:

• http://www.google.com/events/io/2011/sessions/high-performance-gwt-best-practices-for-writing-smaller-faster-apps.html
• http://www.google.com/events/io/2011/sessions/highly-productive-gwt-rapid-development-with-app-engine-objectify-requestfactory-and-gwt-platform.html
• http://www.google.com/events/io/2010/sessions/architecting-production-gwt.html
• http://www.google.com/events/io/2010/sessions/architecting-performance-gwt.html
• http://www.google.com/events/io/2010/sessions/gwt-ui-overhaul.html
• http://www.google.com/events/io/2009/sessions/EffectiveGwt.html

Also, don't expect to be able to edit absolutely everything if you are using the GUI to build your GWT app. Good luck!