GWT JS Interopt

[Eder Ignatowicz]

Hi,

I'm starting to play with the new GWT features of JS Interopt. But
unfortunately I can not make the Hello World. :/

I want to make a Java Class accessible on JS.

Could anyone help me or point the right direction?

My @JsType

My Class:

@JsNamespace("$wnd.pug")
public class SampleClass implements SampleInterface {

@JsExport("Dora")
public SampleClass( String s ){

}
}


My pom:

<dependency>
<groupId>com.google.gwt</groupId>
<artifactId>gwt-dev</artifactId>
<version>2.7.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.google.gwt</groupId>
<artifactId>gwt-user</artifactId>
<version>2.7.0-SNAPSHOT</version>
</dependency>


The scope pug are not visible on JS. Am I missing something?

Another stuff that I tried follow this example
https://github.com/ederign/realtime-store/blob/master/src/main/java/com/goodow/realtime/store/impl/HtmlStoreEntryPoint.java#L42-42
are patching the prototype. In that case I got the follow exception:

https://gist.github.com/anonymous/b6dc2bf95cc6dbedf1df


Does anyone have any idea of where I'm going wrong?

Does anyone can point me a project using this? Or a doc?


Thanks in advance

_____________
Eder Ignatowicz
ignat...@gmail.com

[田传武]

Which linker do you use in your .gwt.xml module?

Normally, the exported stuff will not be available in JS until your GWT app is fully loaded.

[田传武]

You can see a more simple example demonstrates the usages of JsExport. It only exports three interfaces, see also:

https://github.com/goodow/realtime-channel/blob/master/src/main/java/com/goodow/realtime/channel/Bus.java

https://github.com/goodow/realtime-channel/blob/master/src/main/java/com/goodow/realtime/channel/impl/ReconnectBus.java

and the live playground.

--
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/fGIr4sRkz7s/unsubscribe.
To unsubscribe from this group and all its topics, 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.

[Eder Ignatowicz]

I'm using the xsiframe linker.

I just pushed my POC here:

https://github.com/ederign/gwt-playground/blob/master/gwt-js1/src/main/resources/me/ederign/jsinterop.gwt.xml
https://github.com/ederign/gwt-playground/blob/master/gwt-js1/src/main/java/me/ederign/client/JS.java
https://github.com/ederign/gwt-playground/blob/master/gwt-js1/src/main/java/me/ederign/client/JS.java


In your demo, works. :)

What I'm trying to do: http://realtimeplayground.goodow.com/, var p =
new realtime.store.Store("a")

In my project:
var a = js.JS('fsdfsd')
ReferenceError: js is not define


Thanks for your help.

ps. I sent a PR for a small issue in your project. :)


Obrigado
_____________
Eder Ignatowicz
ignat...@gmail.com

> 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

[田传武]

gwt-js1 disappeared and you seem to have succeeded according to your commit log.

>> google-web-toolkit+unsub...@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.
>
>
> --
> 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-toolkit+unsub...@googlegroups.com.

[Eder Ignatowicz]

Yep! Thanks for your help! :)

What does the trick is the flag -XjsInteropMode JS .

If anyone want to use my GWT JS interop demo is on https://github.com/ederign/gwt-playground.

Obrigado
_____________
Eder Ignatowicz
ignat...@gmail.com  

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[Henrik]

On Wednesday, July 16, 2014 1:55:52 PM UTC+2, Eder Ignatowicz wrote:

Yep! Thanks for your help! :)

What does the trick is the flag -XjsInteropMode JS .

If anyone want to use my GWT JS interop demo is on https://github.com/ederign/gwt-playground.

Thanks for that; it helped me out a bit experimenting with jsinterop.

I had the hardest time getting the jsni functions (those simply returning $doc and $doc.body) to actually return anything other than null!  After playing with a bunch of options, I finally hit upon the problem.  I was using the maven gwt plugin (locally updated to use 2.7.0-SNAPSHOT of GWT) and one of the arguments it sends to the compiler is "-localWorkers" with a default of "8" (which comes from Runtime.getRuntime().availableProcessors() ).  The generated javascript functions contained "null.something" which clearly would not work.  But when I explicitly used "-localWorkers 1" instead, hurray, it worked perfectly!  Seems like some compiler bug to me. 

[田传武]

Maybe the same issue as:

https://groups.google.com/forum/#!topic/Google-Web-Toolkit-Contributors/nx9mBU5kwEo

BTW, how do you use gwt-maven-plugin to pass the compile option "-XjsInteropMode JS"?

--
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/fGIr4sRkz7s/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

[Henrik]

On Tuesday, July 22, 2014 6:02:44 AM UTC+2, 田传武 wrote:

Maybe the same issue as:

https://groups.google.com/forum/#!topic/Google-Web-Toolkit-Contributors/nx9mBU5kwEo

BTW, how do you use gwt-maven-plugin to pass the compile option "-XjsInteropMode JS"?

I just patched CompileMojo.java (part of the gwt-maven-plugin) directly as no option existed for it. 

By the way, any idea why that option isn't default set to JS?  It's rather annoying and it looks like I will have to patch and compile gwt itself for DevMode to support it. 

A bonus issue, I saw you did not use addEventListener like the demo does, and I really struggled to make it work.  The generated javascript looks like "addEventListener('click', new xxx(this))" which doesn't work (the key thing here being "new" I'd guess).  I found no other way to call it directly and eventually resorted to doing it from a jsni function instead:

        public static native void jsAddEventListener(Element elem, String event, EventListener listener) /*-{

elem.addEventListener(event, function(ev) { listener.onEvent(ev); });

        }-*/;

[田传武]

On Tue, Jul 22, 2014 at 4:31 PM, Henrik <henri...@gmail.com> wrote:

By the way, any idea why that option isn't default set to JS?  It's rather annoying and it looks like I will have to patch and compile gwt itself for DevMode to support it. 

The JsInteropMode has three modes, its value default to NONE for backward compatibility. I never used DevMode combined with JsInterop.

 

A bonus issue, I saw you did not use addEventListener like the demo does, and I really struggled to make it work.  The generated javascript looks like "addEventListener('click', new xxx(this))" which doesn't work (the key thing here being "new" I'd guess).  I found no other way to call it directly and eventually resorted to doing it from a jsni function instead:

        public static native void jsAddEventListener(Element elem, String event, EventListener listener) /*-{

elem.addEventListener(event, function(ev) { listener.onEvent(ev); });

        }-*/;

Which demo uses addEventListener?

[Henrik]

A bonus issue, I saw you did not use addEventListener like the demo does, and I really struggled to make it work.  The generated javascript looks like "addEventListener('click', new xxx(this))" which doesn't work (the key thing here being "new" I'd guess).  I found no other way to call it directly and eventually resorted to doing it from a jsni function instead:

        public static native void jsAddEventListener(Element elem, String event, EventListener listener) /*-{

elem.addEventListener(event, function(ev) { listener.onEvent(ev); });

        }-*/;

Which demo uses addEventListener?

https://www.youtube.com/watch?v=wFMD1GXR2Tg#t=190

[田传武]

Yes, i didn't use addEventListener. But i has a similar usage:

Java

Bus.subscribe(String topic, Handler<? extends Message> handler);

translated to js

bus.subscribe("some/topic", function(message) {
  var body = message.body();
  console.log("Name: " + body.name);
});

[Henrik]

On Tuesday, July 22, 2014 10:31:54 AM UTC+2, Henrik wrote:

It's rather annoying and it looks like I will have to patch and compile gwt itself for DevMode to support it. 

Well... I gave up on that; could barely make head or tails of it, so I ended up writing a webfilter to recompile the app when the main .html is requested.  A bit slow as it doesn't do an incremental compile (which I'm not sure is even possible at the moment), but at least now it's just 1. 'save in editor' and 2. 'reload in browser' (and wait 10 sec).  That's tolerable, and preferable, compared to my experiences with SDM thus far. 

[Cristian Rinaldi]

I have the same problem with addEventListener, the generated code is not exactly as you mention: 

This is my code:

    public interface EventListener<E extends JsObject> {

        void onEvent(E event);

    }

    @JsType(prototype = "HTMLElement")

    public interface HTMLElement extends Element {

        public void setAttribute(String align, String center);

        public void appendChild(HTMLElement element);

        public void addEventListener(String event, EventListener<? extends JsObject> handler);

        @JsProperty

        public void setInnerHTML(String text);

        @JsProperty

        public void setInnerText(String text);

    }

    .....

    HTMLElement button = doc.createElement("button");

    .....

    .....

    button.setInnerText("UPDATE - See the console");

    button.addEventListener("click", new EventListener<JsObject>() {

            @Override

            public void onEvent(JsObject event) {

                window().getConsole().log(event);

            }

    });

    ....

    ....

    ....

    body.appendChild(button);

    .....

    ....

This is the generated code:

 _.onModuleLoad = function() {

  var body_0, button, div, input_0, observer, p, person;

  body_0 = $wnd.document;

  div = body_0.createElement("DIV");

  p = body_0.createElement("P");

  input_0 = body_0.createElement("input");

  button = body_0.createElement("button");

  body_0 = $wnd.document.body;

  person = new clgscm$Person;

  observer = new $wnd.PathObserver(person, "name");

  input_0.bind("value", observer);

  person.name = "Cristian";

  button.innerText = "UPDATE - See the console";

  button.addEventListener("click", new clgsc$gwt_sample$01(this));

  $wnd.console.log("%cWelcome to JSInterop!%c", initValues(jl$getClassLiteralForArray_0(cggl$Ljava_lang_String_2_classLit, 1), $intern_2, 2, 4, ["font-size:1.5em;color:#4558c9;", "color:#d61a7f;font-size:1em;"]));

  div.appendChild(p);

  div.appendChild(input_0);

  body_0.appendChild(div);

  body_0.appendChild(button);

};

createForClass(61, cggl$Ljava_lang_Object_2_classLit);

function clgsc$gwt_sample$01(this$0) {

  this.this$01 = this$0;

  jl$$0init__V__devirtual$0(this);

}

Any Suggestion?

Thanks!!!

El martes, 22 de julio de 2014 07:16:06 UTC-3, 田传武 escribió:

Yes, i didn't use addEventListener. But i has a similar usage:

Java

Bus.subscribe(String topic, Handler<? extends Message> handler);

translated to js

bus.subscribe("some/topic", function(message) {
  var body = message.body();
  console.log("Name: " + body.name);
});

On Tue, Jul 22, 2014 at 5:41 PM, Henrik <henri...@gmail.com> wrote:

A bonus issue, I saw you did not use addEventListener like the demo does, and I really struggled to make it work.  The generated javascript looks like "addEventListener('click', new xxx(this))" which doesn't work (the key thing here being "new" I'd guess).  I found no other way to call it directly and eventually resorted to doing it from a jsni function instead:

        public static native void jsAddEventListener(Element elem, String event, EventListener listener) /*-{

elem.addEventListener(event, function(ev) { listener.onEvent(ev); });

        }-*/;

Which demo uses addEventListener?

https://www.youtube.com/watch?v=wFMD1GXR2Tg#t=190

--
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/fGIr4sRkz7s/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

[田传武]

See the Live Playground and the generated js library.

What does the trick is:

https://github.com/goodow/realtime-channel/blob/master/src/main/java/com/goodow/realtime/html/HtmlScheduler.java#L46-L52

To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

[Cristian Rinaldi]

HTMLElement implementation is done by the GWT compiler, so the code you say I would not know how to incorporate it. 

For example, I am using Polymer PathObserver:

public interface OpenObserverListener {
  void onOpen(String oldValue, String newValue);
}

....
....

@JsType(prototype = "PathObserver")
public interface PathObserver {
  void open(OpenObserverListener handler);
}

....
....

PathObserver observer1 = PathObserverFactory.createObserver(person, "name");
observer1.open(new OpenObserverListener() {
  @Override
  public void onOpen(String oldValue, String newValue) {
    window().getConsole().log(oldValue);
    window().getConsole().log(newValue);

  }
});

And I have the same problem, 

sorry if I have not understood what you have told me. 

Any idea?

Thanks.

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsubscribe@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.