Learn the future of web development

This tutorial is going to cover the use of the Anchor widget in GWT. The Anchor widget is important because it is going to allow you to link to other pages as well as to pages within your own project. The primary reason why I am writing a specific tutorial on the Anchor widget is because without it you will not be able to easily use GWT’s history framework. So let’s begin by writing some code.

Anchor anchor = new Anchor("GWT Tutorials", "http://www.gwttutorials.com", "_blank");

Creating an Anchor widget is as simple as the code above. The arguments passed through to the constructor varies, but you will usually pass through these three arguments when creating an Anchor widget. The first argument is the string you want displayed for the link object, and GWT allows you to pass through HTML as will, but you will need to pass through the boolean asHTML argument to the construtor. So for example you could also do the following:

Anchor anchor = new Anchor("<img src='gwttuts.jpg'/>", true, "http://www.gwttutorials.com", "_blank");

The above is just basically using an image for your link, but notice the boolean asHTML argument has been included. That is pretty much the basics for using an Anchor object, but there are a couple of other things I would like to cover in this tutorial.

The first issue seems basic, but if you are not familiar with HTML then you may have some trouble. For the link argument, if you are trying to link to an external page or even an internal page that is not a hash then you need to include the “http://” otherwise the browser will append anything you mark as the “href” argument to the web application location. So for example if you write “www.google.com” as the href argument and you click on the link then you will actually be taken to “http://localhost:8080/WebApplication1/www.google.com”. See the problem? The simple fix is to include the “http://”.

Next let’s talk about a hash, and how to use them. Since GWT is an easy way to use AJAX we are going to stay within that realm when talking about the hash. A hash is simply anything with the pound symbol in front of it. For example “#gwt” is a hash that points somewhere in your web application. We are going to learn more about the hash in the tutorial on GWT history.

Finally you can also pass through parameters using the Anchor object. Here is an example of how to do this.

 
Anchor anchor = new Anchor("GWT Tutorials", "http://www.gwttutorials.com?action=hello", "_blank");
 
String paramAction = Window.Location.getParameter("action");
 
//Do something with paramAction.

So basically the way this works is that you can create a new Anchor widget and append a parameter to it. In your onModuleLoad function you can get the parameter from the window’s location, and then use this parameter to load a different state of your application. To create a parameter just append a “?” then the name of the parameter and finally the value of the parameter. Also you can include multiple paramters by using the “&” symbol, so for example you could do this: “?action=hello&noaction=bye”.

As always if you have any questions, please leave a comment.