GWT: How to Embed Widgets in Anchor with UIBinder

Question

I would like to use the following in UIBinder so that I can programmatically set href links 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 to do 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? I used to resort to using:

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

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

Answer 1

It’s 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.

Answer 2

The class below acts just like a SimplePanel (i.e. you can put a widget in it), but instead of "div", "a" is used. If you need more widgets, just enter another panel into 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); } }