LDSTechForumProjects

GWT Intro Lab 3

GWT History

This lab assumes you have done Lab 2.

Add a Label to Your Entry Point

Add the following imports to your EntryPoint source file:

import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

Then replace the contents of your onModuleLoad() method with:

final Label hashTag = new Label("There is no hash tag");
RootPanel.get().add(hashTag);

This snippet of code creates a GWT label and adds it to the page. The hashTag label is declared final because we're going to access it from an event listener. You can think of RootPanel as a representation of the body tag in HTML.

Run your application in developer mode to make sure you can see the label in your web browser.

Add a History Change Event Listener

Add the following imports to your EntryPoint source file:

import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.user.client.History;

Then add a history change event handler that will update the label when the hash tag changes.

History.addValueChangeHandler(new ValueChangeHandler<String>() {
    @Override
    public void onValueChange(ValueChangeEvent<String> event) {
        hashTag.setText("The hash tag is: " + event.getValue());
    }
});

The method onValueChange(...) will get called every time the hash tag changes. Refresh your application and then append a "#" to the URL with some additional text and push enter. The label on your page should change with the page being reloaded.

Add a TextBox and Button to Change the History Token

Add the following imports to your EntryPoint source file:

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.TextBox;

Then add TextBox to your page doing the following:

final TextBox box = new TextBox();
RootPanel.get().add(box);

Then add a button that updates the history token with the value in the TextBox;

Button button = new Button("Add History");
button.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
      History.newItem(box.getText());
   }
});
RootPanel.get().add(button);

Now refresh the page in your browser. Enter some text in the input box and press the button. You should see the label and the hash tag get updated.

This page was last modified on 5 June 2010, at 19:23.

Note: Content found in this wiki may not always reflect official Church information. See Terms of Use.