GWT: How to create a new page

Question

I have a GWT MVP application with one page. How can I create a new page and link to it?

Answer 1

you can do one thing, at same page make different layouts and at particular action you can hide one layout and show other layout or component.

Answer 2

GWT has support for pages within application via URL fragment identifier, i.e. http://www.yourhost.vom/main#pagename, where "pagename" is a fragment identifier representing a "page" within your app.

1. Enable history support by adding an iframe to your host page:

   <iframe src="javascript:''" 
           id="__gwt_historyFrame" 
           style="width:0;height:0;border:0">
   </iframe>
   

2. Register a ValueChangeHandler to be notified when history (page) changes. Within this handler you put a logic that displays the new page.

3. Go to a particular page by calling History.newItem("newpage")

Answer 3

I created a open source, MIT licensed project to ease the page navigation handling in GWT. Take a look at the GWT Views project.

Using it you can define a View (a Widget referenced by an unique URL token) using simple Java annotations. The framework takes care of code-splitting for you, and hides all the boilerplate code.

Here is an example:

@View(Login.TOKEN)
public class Login extends Composite {
//... your code, you can use UIBinder, procedural UI, whatever you like

When using History.newItem(Login.TOKEN) the Login widget will be rendered at the page.

There are a lot of common use cases handled by the framework as well, such as ViewContainers, 404 pages, Google Analytics tracking, and user authorization.

Answer 4

This is what I ended up doing:

package com.example.client;

import java.util.logging.Logger;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.shared.GWT;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.RootPanel;

public class Controller implements EntryPoint {
    private static Controller instance;
    private static final Logger log = Logger.getLogger(Controller.class.getName());

    // I have a feeling GWT does not respect private constructors, or else it uses some other voodoo.
    private Controller(){}

    public static Controller getInstance() {
        if (instance == null) instance = new Controller();
        return instance;
    }

    @Override
    public void onModuleLoad() {
        String token = History.getToken();
        log.info("****************************** token:"+token);
        History.addValueChangeHandler(new ValueChangeHandler<String>() {
            @Override
            public void onValueChange(ValueChangeEvent<String> event) {
                navigate(event.getValue());
            } // onValueChange
        });
        if (token == null || token.length() == 0) History.newItem(Login.TOKEN); // no token
        else navigate(token); // restore app state
    }

    private static void navigate(String token) {
        RootPanel rootPanel = RootPanel.get("gwtApp");
        if (rootPanel.getWidgetCount() > 0) rootPanel.remove(0); // clear the page

        if (Login.TOKEN.equals(token)) {
            Login page = Login.getInstance();
            page.onModuleLoad();
        } else if (MainApp.TOKEN.equals(token)) {
            MainApp page = MainApp.getInstance();
            page.onModuleLoad(); // display the page
//          page.setAuthenticated(true);
//          page.setUsername(email);
        }

    }

} // Controller

In your *.gwt.xml file:

<entry-point class='com.example.client.Controller' /> 

Now when you want to go to a new page:

History.newItem(Login.TOKEN);