GWT: how to embed widgets in Anchor with UIBinder

Question

I'd like to use the following in UIBinder, so that I can programmatically set the href of the link in my code.

<g:HTMLPanel>
    <g:Anchor ui:field="link">
         <g:InlineLabel ui:field="firstName"/>
         <g:InlineLabel ui:field="lastName"/>
    </g:Anchor>
</g:HTMLPanel>

When I try this I get:

ERROR: Found widget in an HTML context Element <g:InlineLabel ui:field='firstName'> (:7). 

How can I embed widgets inside an anchor? Previously I've resorted to using:

  <a id="myAnchor">
     etc...
  </a>

And then manipulating the DOM in my code to set the HREF, but that's ugly. Is there a better way?

Answer 1

The class below acts exactly like a SimplePanel (i.e., you can put an widget in it), but uses an "a" instead of a "div". If you need more widgets just put another panel in it.

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.SimplePanel;

public class Link extends SimplePanel {
    public Link() {
        super(DOM.createAnchor());
    }

    private void setHref(String href) {
        getElement().setAttribute("href", href);
    }

    private String getHref() {
        return getElement().getAttribute("href");
    }

    public void setTarget(String frameName) {
        getElement().setAttribute("target", frameName);
    }
}

Answer 2

It is better to use a Panel (Flow or Horizontal) and add click handlers to the panel to simulate a link. Anchor, Button and similar widgets will not allow child tags inside them.