How to create a JavascriptObject object?

31 views
Skip to first unread message

rjcarr

unread,
Feb 9, 2015, 4:41:12 PM2/9/15
to google-we...@googlegroups.com
So I have an existing "class" in javascript that takes an element and then draws into it using a canvas.  In javascript, you create it like this:

    var timeline = new Timeline(document.getElementById("canvas"));

I'd like to wrap this in GWT using a JavascriptObject but I'm not sure how to create it.  Here's what I'm trying:

    public class Timeline extends JavaScriptObject {
      protected Timeline() {}
      public static native Timeline create(Element canvas) /*-{ r
        return new Timeline(canvas); 
      }-*/;
    }

And then try to create a timeline using this:

    Timeline timeline = Timeline.create(DOM.getElementById("canvas"));

Given what I've read I'd expect this to work but when running in super devmode I get something like: Uncaught ReferenceError: r is not defined.

I haven't yet tested this outside of super devmode because I can't figure out how to (I've been using GWT for many years but have never used super devmode).  I think I'm doing everything right and have isolated it to the code examples given.

Thanks for the help!

rjcarr

unread,
Feb 9, 2015, 4:53:39 PM2/9/15
to google-we...@googlegroups.com
To create the overlay type I also tried this:

    return new $wnd.Timeline(canvas); 

But it didn't seem to make a difference.

Maybe I'm not using the right functionality here?  I'd basically like to create an object in pure javascript but overlay it with java to have it available to other classes that don't need to know whether it's written in java or javascript.

Thanks!

Mark Erikson

unread,
Feb 9, 2015, 5:20:21 PM2/9/15
to google-we...@googlegroups.com

Really stupid question: do you have a typo'd 'r' after the open curly?  It's there in your pasted code snippet, and with JS's automatic semicolon insertion, I'm pretty sure it would try to use it as if you'd written "r;". 

Also, yes, I think you'd want to use "$wnd.ActualJSObjectName".

rjcarr

unread,
Feb 9, 2015, 5:30:45 PM2/9/15
to google-we...@googlegroups.com
Ha, not a stupid question at all ... it seems that was the problem!  Thanks so much, good thing I copied and pasted the code into the question!

But more generally, is this what I should be doing?  Or should I use a different approach for what I'm trying to do?  

Thanks again!

Mark Erikson

unread,
Feb 9, 2015, 5:39:50 PM2/9/15
to google-we...@googlegroups.com
Cool, glad that was an easy fix.

Yeah, this is a good approach.  See https://github.com/richkadel/cesium-gwt for a larger-scale use of this technique for wrapping the Cesium.js 3D globe library.

Alain Ekambi

unread,
Feb 9, 2015, 5:42:47 PM2/9/15
to google-we...@googlegroups.com

The error says it. You have an undeclared r variable in your JavaScript code

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" 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 http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

Robert J. Carr

unread,
Feb 9, 2015, 5:43:02 PM2/9/15
to google-we...@googlegroups.com
Awesome, thanks so much for the help!

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/AEtzZ8KgGc4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages