Wednesday, July 23, 2014

Re: JsInterop and EventListener

I resolve this problem, 
If not an elegant solution, maybe the compiler should do it automatically, but the most instructed to answer this question is +RayCromwell
My solution was to make a small JSNI functions that return the object generated by JsType getting the same object as a parameter. 

Here's an example:

@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);
}

@JsType
public interface EventListener<E extends JsObject> {
   
void onEvent(E event);
}

public static native EventListener eventListener(EventListener handler) /*-{
     return function(evt){
         handler.onEvent(evt);
     }
}-*/
;

@Override
public void onModuleLoad() {
 
Document doc = getDocument();
       
....
 
HTMLElement button = doc.createElement("button");
 
HTMLBodyElement body = bodyElement();


 
final Person person = new Person();
 
PathObserver observer = PathObserverFactory.createObserver(person, "name");
  input
.bind("value", observer);


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

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


   button
.addEventListener("click", eventListener(new EventListener() {
     
@Override
     
public void onEvent(JsObject event) {
        window
().getConsole().log(person);
     
}
   
}));
   
.....
   body
.appendChild(button);
 
}

The all code in my Github:


Thanks!!!

El miércoles, 23 de julio de 2014 10:54:42 UTC-3, Cristian Rinaldi escribió:
I'm doing tests with JsInterop (JsType, JsExport, etc), and I encounter a problem when adding a listener. 

Part of my code:

@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");
HTMLBodyElement body = bodyElement();

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

button
.addEventListener("click", new EventListener<JsObject>() {
   
@Override
   
public void onEvent(JsObject event) {
        window
().getConsole().log(event);
   
}
});

The handler is never executed...

The code generated for copiler is:

_.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);
  
(new $wnd.PathObserver(person, "name")).open(new clgsc$gwt_sample$01(this));
  person
.name = "Cristian";
  person
.name = "Cristiaa";
  button
.innerText = "UPDATE - See the console";
  button.addEventListener("click", new clgsc$gwt_sample$02(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(62, cggl$Ljava_lang_Object_2_classLit);
function clgsc$gwt_sample$02(this$0) {
  this.this$01 = this$0;
  jl$$0init__V__devirtual$0(this);
}

-----------------------------------------------------------------------------------------------


The generated code should be 

button.addEventListener("click", function(e){...});

I think so ... :)

Any Idea?
Thanks...

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

No comments:

Post a Comment