jsinterop: create cast native types: JavaScriptObject

[Vassilis Virvilis]

Hi,

I am trying to construct with jsinterop a json config object for datatables. Here is an example

var table = $wnd.$(table_selector).DataTable({
                "dom" : 'lf<"dateRange"><"pull-right"B>rtip',
                "serverSide" : true,
                "ajax" : {
                    "url" : ajax_url,
                    "dataSrc" : "",
                    "data" : {
                        "date" : "date_range"
                    }
                },
                "columns" : headers,
                "buttons" : [ 'copyHtml5' ]
            });

The idea is to use something like that

       @JsType(isNative = true)
        public static class Config {

            @JsType(isNative = true)
            public static class Ajax {

                @JsType(isNative = true)
                public static class Data {
                    String date;

                    @JsOverlay
                    public static Data create() {
                        final Data data = createDataObject();
                        data.date = "date_range";
                        return data;
                    }
                }

                String url;
                String dataSrc;
                Data data;

                @JsOverlay
                public static Ajax create(String url) {
                    final Ajax ajax = createAjaxObject();
                    ajax.url = url;
                    ajax.dataSrc = "";
                    ajax.data = Data.create();
                    return ajax;
                }
            }

            String dom;
            boolean serverSide;
            Ajax ajax;
            JsArray<JavaScriptObject> columns;
            JsArrayString buttons;

            @JsOverlay
            public static Config create(String url,
                    JsArray<JavaScriptObject> headers) {
                final Config config = createConfigObject();
                config.dom = "lf<'dateRange'><'pull-right'B>rtip";
                config.serverSide = true;
                config.ajax = Ajax.create(url);
                config.columns = headers;
                config.buttons = createJsArrayString("copyHtml5");
                return config;
            }
        }

Something similar (but simpler) is done for vue.js here https://gist.github.com/bduisenov/2c5ef0e4ff4874f2c5d2

Unfortunately the Datatables are picky and they are poking (iterating) the Config object in the wrong way and they hit the __proto__ and constructor members and the script crashes.

So I had to specify  @JsType(isNative = true) to match the naming and a way to start from a plain javascript plain object {}

The question is how to create and cast in a generic way a {} in my native objects i.e.

Config, Config.Ajax, Config.Ajax.Data?

I tried

1) Config config = new Config(); // protected empty constructor - fails at runtime

2) Config config = createConfig();

        private static native Config createConfigObject()/*-{
            return {};
        }-*/;

This works but I have to create one static function for every native Type I need to create;

3) Config config = createObject();

        private static native <T> T createObject()/*-{
            return {};
        }-*/;

fails at runtime

4) Config extends JavascriptObject and use .cast() - fails at compile time

Is any of the 1, 3, 4 supposed to work?

   Vassilis

--

Vassilis Virvilis

[Paul Stockley]

Declare your objects as 

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

You can then just use new.

[Vassilis Virvilis]

Thanks Paul,

In retrospect this is obvious which means I would never figured it out by myself :-)

I will test it tomorrow.

Shouldn't this trick documented in https://docs.google.com/document/d/10fmlEYIHcyead_4R1S5wKGs1t2I7Fnp_PaNaa7XTEk0

Thanks again.

--
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-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--

Vassilis Virvilis

[Vassilis Virvilis]

yep that works. thanks a bunch

Option 3 is not needed - it can be done with new MyObject()

What about option 4? Is JavascriptObject scheduled to be deprecated? If not should it work with jsinterop or not?

--

Vassilis Virvilis