GWT中的Javascript对象功能

Question

I am using DivElement on uibinder in gwt. I need to create the onclick of the div element on java class. Element class provide the element.createFunction() but i could not understand how to use it ?

**abc.ui.xml**

<g:HTMLPanel ui:field="html">
    <div class="lfloat" ui:field="label"></div>
</g:HTMLPanel>

abc.java

@UiField DivElement label;

public abc() 
{
    // TODO Auto-generated constructor stub
    initWidget(uiBinder.createAndBindUi(this));

    label.setClassName("hyperlink_labels");
    //JavaScriptObject js = label.createFunction();

    //how to create function for this DivElement

}

Answer 1

JavaScriptObject.createFunction() is of little to no use, as it'll return a function that does nothing. You need to use JSNI if you need a native JS function.

But in your case, you should rather take advantage of event delegation: set a ClickHandler on the HTMLPanel and check whether the event target was the label or a child of it:

addClickHandler(new ClickHandler() {
  @Override
  public void onClick(ClickEvent event) {
    EventTarget target = event.getNativeEvent().getEventTarget();
    if (Node.is(target) && label.isOrHasChild(Node.as(target))) {
      // label was clicked
    }
  }
}

Answer 2

I think that the simplest workaround is to use Label instead.

It uses div element so it will be rendered just like you want. As a Widget it has addClickHandler method.

xml:

<g:Label styleName="lfloat" ui:field="label" />

java:

@UiField
Label label;

label.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        ...
    }
});

Answer 3

I would change the ui.xml

<g:SimplePanel ui:field="html">
    <g:SimplePanel class="lfloat" ui:field="label" />
    <!-- I am not 100% sure, if the class-attribute is named style -->
</g:SimplePanel>

and within Java

@UiHandler("label") public void onClick(ClickEvent e){...}