Re: Understanding JsInterop

Amazing trick!

Obvious if you think about it - but very difficult to think it initially (for us mere mortals).

   Vassilis

On Thu, Feb 15, 2018 at 11:53 AM, Thomas Broyer <t.broyer@gmail.com> wrote:

On Thursday, February 15, 2018 at 10:21:59 AM UTC+1, Scott Shumway wrote:

Greetings

I am trying to get a DOMRect from an Element. I can do this with JSNI, but have been unable to make a JsInterop version. Here's what I have:

public final class DOMRect extends JavaScriptObject

{

 // returns DOMRect or null

 public static native DOMRect getBoundingClientRect(Element element)

 /*-{

 return element.getBoundingClientRect && element.getBoundingClientRect();

 }-*/;

 protected DOMRect()

 {

 }

 public final native double getX()

 /*-{

 return this.x;

 }-*/;

 // etc.

}

I can make a JsType for DOMRect, no problem. The issue I'm having is with getBoundingClientRect(). This function may not exist which is why there is a null check.

You'll want a @JsProperty for the method so you can check whether it's null or not; and then either declare it also as a @JsMethod in parallel to call it, or have the @JsProperty return a @JsFunction (or then cast to an elemental2.dom.Element).

And you can hide the details the same way you did with JSNI, with a @JsOverlay:

@JsType(isNative=true, namespace=JsPackage.GLOBAL, name="Element")
class Element {
  @JsProperty(name="getBoundingClientRect") private native Object getGetBoundingClientRect();
  @JsMethod(name="getBoundingClientRect") private native DOMRect callGetBoundingClientRect();


  @JsOverlay
  public DOMRect getBoundingClientRect() {
    return getGetBoundingClientRect() == null ? null : callGetBoundingClientRect();
  }
}

or

@JsType(isNative=true, namespace=JsPackage.GLOBAL, name="Element")
class Element {
  @JsProperty(name="getBoundingClientRect") public native GetBoundingClientRect getBoundingClientRect();


  @JsFunction
  interface GetBoundingClientRect {
    public DOMRect invoke();
  }
}

If I make an interface for getBoundingClientRect, I'm not allowed to cast Element to implement it.

How so‽

You cannot use JavaScriptObject#cast(), but you should be able to use a standard Java cast.

You might have to first cast to Object to please javac:

((HasGetBoundingClientRect) (Object) elt).getBoundingClientRect()

 

I can't extend Element, either. With JSNI, I am allowed to compile Javascript into Javascript, but I can't with JsInterop. It seems like a lot of trouble for 1 line of Javascript.

How can I do this? Thanks in advance...

getBoundingClientRect is supported in (literally) all browsers, so don't bother and just call the method: https://caniuse.com/#feat=getboundingclientrect, https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Browser_compatibility

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

--

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.