GWT add event handler to dom element

[Noor]

Hi, I want to add a click handler to an anchor defined in an gwt html
panel with no success. I am using the following method

panel_1 = new HTMLPanel("<div class='BackHeader'>Selected
Attribute:Select an Attribute to edit(<a Id='DeleteCategory'>Delete
this Attribute</a>)</div>");
flexTable.setWidget(3, 0, panel_1);
Element DeleteCategory=panel_1.getElementById("DeleteCategory");
Anchor C= Anchor.wrap(DeleteCategory);


Exception while loading module com.BiddingSystem.client.BiddingSystem.
See Development Mode for details.
java.lang.reflect.InvocationTargetException at
sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at
sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:
39) at
sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:
25) at java.lang.reflect.Method.invoke(Method.java:597) at
com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) at
com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:
183) at
com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:
510) at
com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:
352) at java.lang.Thread.run(Thread.java:662) Caused by:
java.lang.AssertionError at
com.google.gwt.user.client.ui.Anchor.wrap(Anchor.java:55) at
com.BiddingSystem.client.View.ProductTaxonomyView.
(ProductTaxonomyView.java:174) at
com.BiddingSystem.client.BiddingSystem.onModuleLoad(BiddingSystem.java:
63) ... 9 more

[Noor]

Many are suggesting me to use UIBinder but I don't know how to use it

[Thomas Broyer]

On Sunday, December 12, 2010 2:59:18 PM UTC+1, Noor wrote:

Hi, I want to add a click handler to an anchor defined in an gwt html
panel with no success. I am using the following method

panel_1 = new HTMLPanel("<div class='BackHeader'>Selected
Attribute:Select an Attribute to edit(<a Id='DeleteCategory'>Delete
this Attribute</a>)</div>");
flexTable.setWidget(3, 0, panel_1);
Element DeleteCategory=panel_1.getElementById("DeleteCategory");
Anchor C= Anchor.wrap(DeleteCategory);

See http://code.google.com/p/google-web-toolkit/issues/detail?id=3511

(particularly comment #9 and #18)

In your case, how about using HTMLPanel to *insert* your Anchor within the HTML (replacing, say, a <span> used as a placeholder)?

That being said, Anchor (<a> in HTML) is not the right tool for the job. You should only use a link to... link to something (i.e. use its href="" attribute); otherwise, use a Label or whatever and eventually style it to make it look like a link.

As for UiBinder, it would allow you to write your HTML fragment as XML (instead of a string literal in Java code) and directly embed the Anchor widget in the HTML instead of doing yourself the placeholder+replace dance (UiBinder would generate it for you):

<g:HTMLPanel>

  <div class='BackHeader'>Selected 

Attribute:Select an Attribute to edit(<g:Anchor ui:field='DeleteCategory'>Delete 
this Attribute</g:Anchor>>)</div>

</g:/HTMLPanel>

And for handling the ClickEvent, you can then use an @UiHandler method in the owner class:

@UiHandler('DeleteCategory')

void onDeleteCategoryClick(ClickEvent event) { ... }