Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

GWT Hyperlink Widget with Image

2 min read

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);
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:v="urn:import:com.devbook.client.view" xmlns:d="urn:import:com.devbook.client.widget">
<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>
<d:HyperLink resource="{res.add}" targetHistoryToken="addSourceItem">Add Item</d:HyperLink>
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 {
ImageResource add();
The final result:

Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus