GWT homepage
Overview
Get started
Tutorials
Docs
Resources
Make GWT Better
Terms
Download
Java Doc
Creative Commons Attribution 3.0 License.
Overview
Coding Basics
Introduction
Organize Projects
Compile & Debug
Client-side
JRE Compatibility
Ajax Communication
History Mechanism
Formatting
Delayed Logic
Working with JSON
Working with XML
JavaScript: JSNI
Overlay Types
Deferred Binding
Build User Interfaces
Html5 Support
Test with JUnit
Deploy
Advanced Topics
Reference
FAQ
Glossary
Search
History
Ajax applications sometimes fail to meet user’s expectations because they do not interact with the browser in the same way as static web pages. This is often apparent — and frustrating for users — when an Ajax application does not integrate with browser history. For example, users expect browsers to be able to navigate back to previous pages visited using back and forward actions. Because an Ajax application is a usually single page running JavaScript logic and not a series of pages, the browser history needs help from the application to support this use case. Thankfully, GWT’s history mechanism makes history support fairly straightforward.
The GWT History Mechanism
History Tokens
Example
Hyperlink Widgets
Stateful applications
Handling an onValueChange() callback
The GWT History Mechanism
GWT’s History mechanism has a lot in common with other Ajax history implementations, such as RSH (Really Simple History). The basic premise is to keep track of the application’s “internal state” in the url fragment identifier. This works because updating the fragment doesn’t typically cause the page to be reloaded.
This approach has several benefits:
It’s about the only way to control the browser’s history reliably.
It provides good feedback to the user.
It’s “bookmarkable”. I.e., the user can create a bookmark to the current state and save it, email it, et cetera.
History Tokens
GWT includes a mechanism to help Ajax developers activate browser history. For each page that is to be navigable in the history, the application should generate a unique history token. A token is simply a string that the application can parse to return to a particular state. This token will be saved in browser history as a URL fragment (in the location bar, after the “#”), and this fragment is passed back to the application when the user goes back or forward in history, or follows a link.
For example, a history token named “page1” would be added to a URL as follows:
http://www.example.com/com.example.gwt.HistoryExample/HistoryExample.html#page1
When the application wants to push a placeholder onto the browser’s history stack, it simply invokes History.newItem(token). When the user uses the back button, a call will be made to any object that was added as a handler with History.addValueChangeHandler(). It is up to the application to restore the state according to the value of the new token.
Example
To use GWT History support, you must first embed an iframe into your host HTML page.
Then, in your GWT application, perform the following steps:
Add a history token to the history stack when you want to enable a history event.
Create an object that implements the ValueChangeHandler interface, parses the new token (available by calling ValueChangeEvent.getValue()) and changes the application state to match.
The following short example shows how to add a history event each time the user selects a new tab in a TabPanel.
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
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.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
/**
* Entry point classes define onModuleLoad()
.
*/
public class BrowserHistoryExample implements EntryPoint {
TabPanel tabPanel;
/**
* This is the entry point method.
*/
public void onModuleLoad() {
tabPanel = new TabPanel();
tabPanel.add(new HTML("