Usage of JsniBundle: calling methods on initialized js library

Question

When I initialize d3.js and dc.js using JsniBundle there is no global variable "dc" or "d3" that is created. But I initialze crossfilter in the same way and there is window.crossfilter present.

My question is: what is the best way to call methods from the dc library using JsniBundle? Is using JsUtils.prop(window, "dc") the correct way to get a reference to the library object?

In the method drawBarChartWidget() below, the variable "dc" is null.

public interface D3Bundle extends JsniBundle {
    @LibrarySource("d3.js")
    public void initD3();
}

public interface CrossfilterBundle extends JsniBundle {
    @LibrarySource("crossfilter.js")
    public abstract void initCrossfilter();
}

public abstract static class DCBundle implements JsniBundle {
    @LibrarySource("dc.js")
    public abstract void initDC();

    public void drawBarChart(Widget container, JSONValue data, Properties chartConfig) {
        JavaScriptObject dc = JsUtils.prop(window, "dc");
    }
}

LayoutPanel layoutPanel = new LayoutPanel();
SimplePanel chartPanel = new SimplePanel();

public ChartDemo() {

    D3Bundle d3 = GWT.create(D3Bundle.class);
    CrossfilterBundle crossfilter = GWT.create(CrossfilterBundle.class);
    final DCBundle dc = GWT.create(DCBundle.class);

    d3.initD3();
    crossfilter.initCrossfilter();
    dc.initDC();

score 1 · Accepted Answer · answered Oct 19 '14 at 17:18

1

Maybe not a direct answer to your question, but if you want to use d3.js with GWT, there is a wrapper that cover most of the main APIs from d3.js : https://github.com/gwtd3/gwt-d3

answered Oct 19 '14 at 17:18

AnthoniS

66
6

Yeah, that's probably the way to go. I also looked at [this repo](https://github.com/uwemaurer/crossfilter-gwt) but was somewhat concerned that adding the overhead of the Java collections to the Json arrays that are being filtered/mapped etc might have a perf impact. Thanks. – leemon Oct 20 '14 at 00:37

score 0 · Answer 2 · answered Oct 19 '14 at 11:02

Here's what made it work:

change final assignment statement in d3.js library from

this.d3 = d3;

to

window.d3 = d3;

and change final assignment statement in dc.js library from

this.dc = _dc(d3);

to

window.dc = _dc(window.d3);

I assume this is because of some weirdness around the iframe context that GWT code is executed in, but I'm not totally clear on why it works. I haven't done it yet but I believe that instead of editing the original library you can use the "replace" attribute of the LibrarySource annotation to automate that substitution.

Usage of JsniBundle: calling methods on initialized js library

2 Answers2