Re: jsinterop: create cast native types: JavaScriptObject

Declare your objects as 

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

You can then just use new.

On Wednesday, May 11, 2016 at 11:16:07 AM UTC-4, Vassilis Virvilis wrote:

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

--
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.