Nvigation within a GWT application

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.

helpermethod · Accepted Answer · 2011-06-10T15:31:05.487

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.

Thanks Helper, this gives me an idea. Please pardon my ignorance - which jar would have the Content class that you mentioned in your code ? Is it a custom class or part of a jar since Eclipse doesn't seem to find it in any of the gwt jars. — Prashanth, Jun 10 '11 at 15:25
Sry, I forget to mention. You have to create them on your own. — helpermethod, Jun 10 '11 at 15:30
Thanks, should it extend any Composite or Widget classes and what helper methods do you think it would/should have for me to show the content ? — Prashanth, Jun 10 '11 at 15:36
Yes, extends `Composite` for creating, well, your `Composite`s :-). The idea is that every component which changes another component needs to have a reference to the LayoutPanel, here DockLayoutPanel. Then, you have to remove the current component and and the new one. This is actually a little bit tricky to get right, so I'd suggest a prototype for trying this out. — helpermethod, Jun 12 '11 at 12:47

score 0 · Answer 2 · answered Jun 10 '11 at 15:13

Your question is mixing up a couple of concepts. If you want the user to click something that looks like a link, and in reponse the application sends a request to the server and shows a page that looks different than the page they're on, and that page has fresh data that just came from the server, then you want a perfectly normal anchor or form submit button. You don't need anything special or weird from GWT.

The showcase example you referenced lets the user click something that looks like a link, and looks like it loads a new page, even to the point of letting the back button work as expected, but does not actually hit the server to get a new page or new data.

Thanks Gatkin, let me clarify - I want to know how to achieve the layout that the showcase example specified in GWT. I wasnt sure how to divide the page into frames and refresh the content area (whether it be static or dynamic from server) depending on what the user clicks on the left. The confusion for me is the layout and whether to dump all this logic in one entrypoint class or not. — Prashanth, Jun 10 '11 at 15:35

Nvigation within a GWT application

2 Answers2