GWT - Samples

11public class MyHTMLBinder extends UIObject {12 13    interface MyHTMLBinderUiBinder extends UiBinder<Element, MyHTMLBinder> {}14    private static MyHTMLBinderUiBinder uiBinder = GWT.create(MyHTMLBinderUiBinder.class);15 16    @UiField SpanElement nameSpan;17    @UiField SpanElement greetingSpan;18    @UiField DivElement divElement;19 20    public MyHTMLBinder(String firstName) {21        setElement(uiBinder.createAndBindUi(this));22 23        greetingSpan.setInnerText("Hello there ");24        nameSpan.setInnerText(firstName);25        divElement.setInnerHTML("<p> Hope you had a good time </p>");26 27    }28 29}

There is an outdated archetype which creates a very simple Gwt project without tests nor RPCs. Unfortunately the generated pom.xml is for old gwt versions and needs that you do a bunch of changes by hand.   mvn archetype:generate  -DarchetypeGroupId=org.codehaus.mojo \    -DarchetypeArtifactId=gwt-maven-plugin  -DarchetypeVersion=1.1 \    -DgroupId=com.foo  -DartifactId=myApplication - Lately I have sent a patch to gwt which adds the ability to generate pom.xm to webAppCreator. But the patch is under review and it wont be available until a new gwt version (in the case it is included). http://gwt-code-reviews.appspot.com/397801/show - So, I recommend you to get the pom.xml from a working application and use it as a template for your project. Some days ago, I  ported the google contacts example application in order to use available libraries for MVP and add tests for all the code. I think It should be a good point for starting your project: http://gwt-workshop.googlecode.com/files/GwtWsMvpContacts.zip

protected void init() {                 VerticalPanel container = new VerticalPanel();                 initWidget(container);                 int pageSize = 10;                 CellTable<User> cellTable = new CellTable<User>(pageSize);                 setColumns(cellTable);                 setSelectionModel(cellTable);                 setDataSize(cellTable);                 int pageStart = 0;                 loadData(pageStart, pageSize, cellTable);                 SimplePager<User> pager = createPager(cellTable);                 container.add(cellTable);                 container.add(pager);         }

There is two type of layouts: RIA-like and web-page-like. The RIA-like layout is done using the layout panels. The app stretch to the whole available space. There is no scrollbars. The web-page-like layout is done using HTML tags (and some standard panels). The app don't stretch. If the content is larger than the viewport, scrollbars appears, like in traditional pages. Looking at the first screenshot, here is my proposal: 1) The main panel is a DockLayoutPanel attached to RootLayoutPanel. 2) The north slot contains the header. 3) The center slot contains a TabLayoutPanel. But when you show data (list, form...) you may have no enough space to show all. Here you start to use web-page-like layout. So: 4) The contain of the contact tab is a LayoutPanel with four slot: Tighformat, the list, Detail view, Relations. 5) Tighformat, Detail view and Relations are standard panels (FlowPanel) into ScrollPanels. If there not enough space, a scrollbar will appear. 6) The list is some sort of DockLayoutPanel with the headers top, the navigation buttons bottom and the contains of the list in the center with a scrollbar is needed. The exact implementation depends on the used widget for the list (SmartGWT, GXT, gwt-incubator...)