Sunday, January 22, 2017

Re: Callback for CellList cell attaching to DOM?

So, right after I posted, I think I figured it out, though comments still welcome of course.  I went ahead and wrote the JsInterop code.

Answer is below based on https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver


@JsFunction

public static interface MutationsCallback {

    public void run(Mutation m);

}


@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")

public static class MutationOptions {

    public boolean childList;

}


@JsType(isNative = true, namespace = JsPackage.GLOBAL)

public static class MutationObserver {

    public MutationObserver(MutationsCallback callback) {

    }


    public native void observe(Element e, MutationOptions options);

    public native void disconnect();

}



observer = new MutationObserver(c -> {

Element e = DOM.getElementById("mapId");

        //do Google Maps STUFF

        observer.disconnect();

});


MutationOptions options = new MutationOptions();

options.childList = true;

observer.observe(this.cellList.getRowContainer(), options);





On Sunday, January 22, 2017 at 7:17:50 PM UTC-8, Paul Mazzuca wrote:
Is it possible to register a callback for when a CellList cell has attached to the DOM?  And if not, any ideas on how to solve this problem?

The problem occurs when I am embedding an interactive Google Map into a cellList cell.  Since the div element which will contain the map exists within the cell, I need to make sure the cell loads, otherwise my call to getElementById will return null.  Using a Timer, I can guess how long it will take, and usually it will work, but I would much rather respond to a callback. 

For example, in my ui:binder cell I pass a predetermined "mapId" to the cell.  This allows be to then access that specific element outside of the cell rendering, and then pass that element to the Google Maps API. 

Again, I have this working, but only by guessing a wait time with a Timer which leads to obvious issues.


<ui:with type="java.lang.String" field="mapId" />


<div>
<div id="{mapId}" style="height:15em" />
</div>

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment