How to capture a click event on a link inside a HTML widget in GWT?

I´m evaluating GWT as one of the alternatives to develop AJAX applications for my future projects. Untill now it is as good as it gets, but now I´m stuck looking for a way to capture a click on a tag inside HTML widget. I want to write links inside the HTML but I want to process the clicks in my application, withou reloading the page. Imagine I have the following HTML:

<p>GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples <a id='mylink'>click here</a></p>

I want to capture the click over the "click here" part of the text. What I´ve done so far is to try to attach the id "mylink" to some sort of clickable widget and process the click with a ClickHandler for that widget, but nothi开发者_Python百科ng is working.

Is there a way to do that? By the way, I know very little about Javascript.

Thank you in advance.

---

You can also do it like this:

Anchor.wrap(DOM.getElementById("mylink")).addClickHandler(yourClickHandler);

DOM class is com.google.gwt.user.client.DOM.

---

Edit after comments.

OK, the method works for elements out of GWT widgets (element comes with HTML file). If you need to generate it in GWT code then you can add link element separately. But it won't work if your content goes for instance from DB.

HTMLPanel html = new HTMLPanel("GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples ");`
Anchor a = new Anchor("click here");
a.addClickHandler(yourClickHandler);
html.add(a);

If it is fully dynamic I don't have an idea at this point. I was trying with HTML() widget, where you can plug your click handler, but I couldn't find a right way to determine whether the click was in A element. Strange.

---

The final approach (I hope)

This one should work finally. And I think this is the way it should be done, especially that it allows any structure of the HTML. The are two ways:

1. Convert links within HTMLPanel

This one will find all A elements and convert them into Anchors. It ignores href attribute, but you can add it easily :)

HTMLPanel html = new HTMLPanel("<p>Multilink example 2: <a>link1</a> and <a>link2</a></p>");
NodeList<Element> anchors = html.getElement().getElementsByTagName("a");
for ( int i = 0 ; i < anchors.getLength() ; i++ ) {
    Element a = anchors.getItem(i);
    Anchor link = new Anchor(a.getInnerHTML());
    link.addClickHandler(...);
    html.addAndReplaceElement(link, a);
}

2. Insert links into prepared spots

Just insert placeholders, where the widgets should be inserted. You could also use the addAndReplaceElement() method but with string ID.

Anchor a1 = new Anchor("a1");
a1.addClickHandler(...);
Anchor a2 = new Anchor("a2");
a2.addClickHandler(...);

HTMLPanel html = new HTMLPanel("<p>Multilink example: <span id='a1'></span> and <span id='a2'></span></p>");
html.add(a1, "a1");
html.add(a2, "a2");

---

Try something like this.

For your web page, you can use UiBinder:

<!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">
    <g:HTMLPanel ui:field="panel">
        <p>
            GWT is a great tool and I think it will be my preferred tool to
            develop web applications. To check out my samples
            <g:Anchor ui:field="myLink" text="click here" />
        </p>
    </g:HTMLPanel>
</ui:UiBinder> 

Notice that I've replaced your tag with an Anchor widget. There is also a Hyperlink widget, which has hooks into the history system.

The Anchor has a id of "myLink", which is used in the GWT companion to the XML file:

public class So extends Composite {

    private static SoUiBinder uiBinder = GWT.create(SoUiBinder.class);

    interface SoUiBinder extends UiBinder<Widget, So> {
    }

    @UiField
    Anchor myLink;

    public So() {
        initWidget(uiBinder.createAndBindUi(this));

        myLink.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                GWT.log("caught the click");
            }
        });
    }

}

I've added a ClickHandler that captures and acts on the click event.

The main program is simple:

public class SOverflow implements EntryPoint {

    public void onModuleLoad() {

        RootLayoutPanel.get().add(new So());
    }
}

Run this after and a webpage appears with the text and hyperlink. Click on it and "caught the click" appears in the console window (I'm using Eclipse).

I hope this is what you're after. If not exactly, it might at least give you some ideas of how to attack your problem.