GWT Hyperlink Widget with Image

Standard GWT Hyperlink widgets don't seem to give the possibility to associate an image. This is quite awkward since you may want to provide nice icons along with your links. In my opinion, appropriate icons increase the user experience dramatically. But it is also not difficult to create image-enhanced hyperlink widgets.

public class HyperLink extends Hyperlink {

 public HyperLink(){
 }
 
 public void setResource(ImageResource imageResource){
  Image img = new Image(imageResource);
  img.setStyleName("navbarimg");
  DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
 }
}

Now you can use the widget like

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
 xmlns:g="urn:import:com.google.gwt.user.client.ui" 
 xmlns:v="urn:import:com.devbook.client.view" xmlns:d="urn:import:com.devbook.client.widget">
 <ui:style>
 </ui:style>
 <ui:with field="res" type="com.devbook.client.IDevbookImageBundle" />
 <g:DecoratorPanel ui:field="outerContainer">
  <g:HTMLPanel ui:field="mainContainer">
   <v:DecoratedPanel ui:field="titleContainer" text="Navigation"></v:DecoratedPanel>
   <g:VerticalPanel>
    <d:HyperLink resource="{res.add}" targetHistoryToken="addSourceItem">Add Item</d:HyperLink>
   </g:VerticalPanel>
  </g:HTMLPanel>
 </g:DecoratorPanel>
</ui:UiBinder> 

The above XML file makes use of the UiBinder which has been introduced with GWT 2.0. You have to take a look at the highlighted parts. First the HyperLink widget (shown at the beginning of this post) is being referenced. Then a reference to the ImageBundle you have defined for your GWT module is created. This bundle is needed to reference the image you'll show on the HyperLink widget. The resource="{res.add}" will be translated to a call of setResource(ImageResource). The passed ImageResource is the one defined in your ImageBundle.

public interface IDevbookImageBundle extends ClientBundle {
 ...
 @Source("com/devbook/images/add.png")
 ImageResource add();
 ...
}

The final result:

---

Questions? Thoughts? Hit me up on Twitter