GWT History
The browser history has always been finicky at best when working with AJAX, but I believe GWT has one of the best frameworks for handling browser history. For this tutorial, you should have a good idea on how to use GWT’s Anchor widget, and also you should know what a hash is, but if not you can click here for the tutorial on Anchors. One more thing you need to remember, I am using GWT version 1.7, so if you are using an earlier version you might want to consider upgrading.
So what is AJAX history, and how is it handled differently? AJAX history allows you to move backwards and forwards through the browser’s history while updating the state of your web application. Remember with GWT and AJAX, all posting to the server should be done asynchronously, which provides your users with a seamless web application.
GWT handles the browser’s history stack by changing the hash, which is always preceded by the “#” symbol. While the JavaScript community call it a hash, GWT calls it a token, but regardless of what you call it, the token is how you are going to update the state of your web application. Let’s start writing some code, and hopefully some of this will become clearer.
The absolute first piece of code that needs to be added to a newly created GWT project is an iframe, which is how GWT traverses the history stack. You will need to include the following line in the body of your welcomeGWT.html file or your host file.
<body> <script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script> <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> </body>
Once you have included the iframe in your host file, we can now begin working with GWT history. The way in which you are going to capture changes in history is through the ValueChangeHandler. You will need to implement the ValueChangeHandler in your EntryPoint class, and then include the onValueChange function. For example:
public class MainEntryPoint implements EntryPoint, ValueChangeHandler { public MainEntryPoint() { } public void onModuleLoad() { } public void onValueChange(ValueChangeEvent event) { } }
Now we have a way to change the state of our web application when the token in the browser’s address bar changes, but we still have a few more things to do before we can traverse the history stack. The next step is to implement a function that will handle the logic of your state changes. So I am going to create a new method called onHistoryChange and I am going to pass in an argument called token. You will see why it is not recommended to write your logic in the onValueChange method in a moment. So here is the updated code.
public void onHistoryChange(String token){ } public void onValueChange(ValueChangeEvent event) { onHistoryChange((String)event.getValue()); }
The next step is to initialize the state of your web application using the history stack. This can be done by implementing the following method.
public void initHistoryState(){ //Get the history token. You can use //History.getToken() throughout your //web application to determine what //state your application should be in. String token = History.getToken(); //determine if there is a token in the history //stack, and if there is not a token then you //can pass through any string you want, //denoting that your web application is in its //initial state. if(token.length() == 0){ onHistoryChange(INIT_STATE); }else{ onHistoryChange(token); } }
Notice that this method passes the token to the onHistoryChange method, which is why you do not want to write your state changes in the onValueChange method. Also you can Programmatically change the state of your web application by using the following two function:
//This function adds a new token History.newItem(String token); //This function adds a new token and //fires the onValueChange event if //issueEvent is true. History.newItem(String token, boolean issueEvent);
Now that you have all the pieces in place to work with GWT history, it is time to write your state logic. AJAX history logic can get confusing quickly, so you should have a good plan in place before writing the logic. Here is the completed MainEntryPoint class.
package org.yournamehere.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.logical.shared.ValueChangeEvent; import com.google.gwt.event.logical.shared.ValueChangeHandler; import com.google.gwt.user.client.History; public class MainEntryPoint implements EntryPoint, ValueChangeHandler { public static final String INIT_STATE = "init_state"; public MainEntryPoint() { } public void onModuleLoad() { initHistoryState(); } public void initHistoryState(){ String token = History.getToken(); if(token.length() == 0){ onHistoryChange(INIT_STATE); }else{ onHistoryChange(token); } } public void onHistoryChange(String token){ //implement you logic here. } public void onValueChange(ValueChangeEvent event) { onHistoryChange((String)event.getValue()); } }
If you have any questions, please leave a comment.
hi,
i have knowledge regarding GWT 1.7 buti have got a project where it is mentioned that GWT 0.0.2030 has been used. i am not getting what is difference in those versions. how to compile it and has structure been changed of GWT project for new versions of GWT.
i had done wiki search for history of GWT but there gwt versions were started from 1.0. i did search on google then i got gwt 0.0.2030 version to donload it.i am really confused.please help.
gwt 0.0.2030 is actually GWT 1.5.1 or GWT 1.5 RC2. There were some major changes between 1.5.1 and 1.7 in regards to how events are handled among other things, but the structure of a GWT project has pretty much remained the same. If you are going to upgrade to 1.7 you need to make sure you fix any deprecation, because my understanding is that in verion 2.0 they are going to get rid of all deprecated methods.
@prashant malviya
@admin
Thanks a lot
Tones of Thanks. short and helpful again!!!
عجرت با سید الشهدا
Thanks for sharing, please keep us posting about this info. I’d like to read it more.