Question

I intend to build a web application where users can enter their time every week and have been struggling to get my head around the concept of a single page in GWT that gets repainted with data depending on the user actions. After researching a lot on this site and google, I found one link that I would like to emulate but dont know how to go about doing it in GWT. Although their source code is available, I dont think it is full and complete. I got some idea from this link – Multiple pages tutorial in Google Web Toolkit (GWT) but again dont know how to implement it into a working version. One small working sample would be great to help me understand and get started.

Could anyone please guide me as to how to achieve the look and feel of the screen with the link below and how the content can be repainted with data from the server ? Would I need to put all the logic in one EntryPoint class ? I would like to have the hyperlinks in the left navigation panel and show the content in the right panel. I seem to be completely lost after a few hours of research.

http://gwt.google.com/samples/Showcase/Showcase.html#!CwHyperlink

Thanks a lot for your help.

Regards,
Sonu.

Answer 1

A single page application layout is actually quite easy to achieve.

The first thing you do is define the general layout, using GWTs layout panels. For your layout, I’d suggest using a DockLayoutPanel.

Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);

DockLayoutPanel pageLayout = new DockLayoutPanel(Unit.EM);
p.addWest(new HTML(navigation), 7.5);
p.add(new HTML(content));

Here, the width of the navigation panel will be fixed, whereas the content will take the remaining space. You have to pass a reference of the button (or some other widget) which does the switch of the content area, add the button to the navigation area, and so on.

Put this into a class, e.g. called MasterPageFactory:

public class MasterPageFactory {
    private MasterPageFactory() {}

    public static MasterPage newInstance() {

       Content content = new Content();
       Button switchContent = new Button(content);
       Navigation navigation = new Navigation();
       navigation.add(switchContent);

       DockLayoutPanel masterPage = new DockLayoutPanel(Unit.EM);
       masterPage.addWest(new HTML(navigation), 7.5);
       masterPage.add(new HTML(content));

       return masterPage;
    }
}

Now, in your EntryPoint class, call the factory:

RootLayoutPanel.get().add(MasterPageFactory.newInstance());

This example should get you an idea. Other options would be using a DI framework like Guice or the Command pattern.