Getting the internal DIV element and id of a GWT Panel

Question

I have an app that have this JSNI that needs to be passed with a container id, in which I pass a DIV id:

HTML:

<div class='example-waveform' id='example4'></div>

JAVA:

initWave("example4");

public native void initWave(String __id)/*-{
    var instance = this;
    var data = $wnd.data = [];
    var waveform = $wnd._waveform = new $wnd.Waveform({
        container: $doc.getElementById(__id),
        interpolate: false
    });
}-*/;

This works fine, however I need to use a GWT container instead of just a HTML div.

I tried:

HTMLPanel container = new HTMLPanel("Test");
container.getElement().setId("someid");

String id = container.getElement().getId();
initWave(id);

However the Javascript function can't accept the element id I am passing into it (I am using a third-party JS Library so I can't debug this one) so I just assume that I just need to pass a DIV id, however DIV is OK, but I need a GWT widget that I can manipulate like show/hide/etc in the GWT UI.

In this case, is there a way to get the DIV element and id of a GWT Panel (HTMLPanel or VerticalPanel) so I can pass this onto my JSNI function.

Answer 1

It must be some error related to the order you are calling the methods, or in the use of the 3rd party lib. This code works perfectly fine in GWT 2.4.0.:

final HTMLPanel container = new HTMLPanel("Test");
container.getElement().setId("someid");

container.addAttachHandler(new Handler() {

    @Override
    public void onAttachOrDetach(AttachEvent event) {
        initWave(container.getElement().getId());
    }});

RootPanel.get().add(container);

with initWave being:

public native void initWave(String __id)/*-{
    var x = $doc.getElementById(__id);
    alert(x.innerHTML);
}-*/;

Works both with SimplePanel and HTMLPanel!