Gwt History Router Wiki

Welcome to the gwt-history-router wiki!

---

Usage

1. Import the module in your gwt.xml file:

<inherits name="com.matteoveroni.gwthistoryrouter.GwtHistoryRouter" />

2. Create your pages extending the Page superclass. Example:

PageOne.html (HTML Template/View)

<div id="pageOneId" style="border: 5px solid red;">
    <div>Page One</div>
    <button id="btn_name" type="button">My button</button>
</div>

PageOne.java (Controller)

public class PageOne extends Page {
	
	public PageOne() {
		super(PageOne.class);
	}

	public interface PageOneResource extends ClientBundle {
		PageOneResource INSTANCE = GWT.create(PageOneResource.class);

		@Source("PageOne.html")
                // This is the HTML template of this page
		TextResource getResource();
	}

	@Override
	public String getHtmlText() {
		return PageOneResource.INSTANCE.getResource().getText();
	}
	
	@Override
        // This method is called when the page is used
	public void use() {
		super.use();     // call the superclass use method (which calls the showHtml() method to render the page
		addHandlers();   // add the handlers to the view when the page is used
	}

	private void addHandlers() {
                // Search a button named btn_name in the 
		HTMLButtonElement button = (HTMLButtonElement) document.getElementById("btn_name");
                // Add a listener to handle the click event
		button.addEventListener(BrowserEvents.CLICK, clickEvent -> {
			console.log("botton pressed");
		});
	}
}

3. Populate the PageRegistry with all your pages, create a new router in your app entry point and call the router.listenUrlChanges() method to startup the router

public class MyModuleEntryPoint implements EntryPoint {

	private static final String APP_URL = "http://localhost:8080/app/";

	@Override
	public void onModuleLoad() {
		populatePageRegister();
		Router router = new Router(APP_URL, PageRegister.getMainPage().getURLHash());
		router.listenUrlChanges();
	}

	private void populatePageRegister() {
		final FirstPage firstPage = new FirstPage();
		final PageOne pageOne = new PageOne();
		final PageTwo pageTwo= new PageTwo();
		PageRegister.addPages(firstPage, pageOne, pageTwo);
		PageRegister.setMainPage(firstPage);
	}
}

4. From your Pages you use the router as shown below. For example to go from PageOne to PageTwo call the method Router.go(SecondPage.class) in PageOne. Example:

HTMLButtonElement button = (HTMLButtonElement) document.getElementById("btn");
button.addEventListener(BrowserEvents.CLICK, clickEvent -> {
	Router.go(SecondPage.class);
});