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?

Coverlet

Why are you using InlineLabel widgets? Can't you use <span>s or similar element instead? – Liability

@Thomas- I'm using InlineLabels because I need to update them programmatically. InlineLabel renders as a span. – Coverlet

Answer 1

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.

Torquemada

I ended up adding the ClickHandlers to the inline labels directly. Otherwise I'd need to add the Flow/HorizontalPanel into a FocusPanel. Sigh, this should be easier. – Coverlet

I am worried about avoiding anchor elements in my gwt websites as google crawler is not understanding the structure of my website. Why is it so problematic to allow Anchor/Hyperlink to have widgets? – Smuts

@DraškoKokić I think that GWT is not to make pages but application. So it doesn't care abou search engines. – Authenticate

Answer 2

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);
    }
}

Haft