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.