How to use JavaScript callback function in GWT UiBinder?

Question

I want to do Facebook Login on a mobile web page. This can be done with a Facebook Login Button. It works great. I have the following code in my GWT UiBinder page:

<g:HTMLPanel>
    <div class="fb-login-button" data-max-rows="1" data-size="xlarge" 
                data-show-faces="false" data-auto-logout-link="false" 
                data-scope="email,publish_actions,user_birthday,user_likes" 
                onlogin="alert('I am a JavaScript callback');"></div>

</g:HTMLPanel>

If login is successful, the onlogin JavaScript function is called.

How can I use this callback function somehow to get notified when this function is called? Is there a way to use JSNI or something else here?

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

In your class, you can expose a native javascript method, for example called myOnLoadThing

class MyClass{

   MyClass(){

     expose();

     // UiBinder stuff here
   }

   // Call this once. Exports your Java method as a javascript method
   public native void expose()/*-{
       $wnd.myOnLoadThing = function(){
            @com.my.MyClass::myOnload()();
       }
    }-*/;

   public void myOnload(){
       // Put your java onload function here
   };
}

And in your uiBinder, make sure to call that myOnLoadThing

<g:HTMLPanel>
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" 
            data-show-faces="false" data-auto-logout-link="false" 
            data-scope="email,publish_actions,user_birthday,user_likes" 
            onlogin="window.myOnLoadThing();"></div>

</g:HTMLPanel>

There's also a good answer here: How to call GWT java function from Javascript?

edited May 23 '17 at 11:49

Community

1
1

answered Mar 20 '14 at 01:24

logan

3,416
1
33
45

1

I think you missed the var instance = this; – Michael Mar 20 '14 at 01:35
1

@confile You should not make edits that change the meaning of the answer. Instead, you should point out your change/suggestion here in comments, and allow the original poster to change if they agree. If you feel the change is significant enough, perhaps you can also creat your own answer to the question. – Gaffi Mar 20 '14 at 18:12
thanks for pointing that out @Gaffi -- I was wondering what happened to this thread – logan Mar 20 '14 at 22:28

score 1 · Accepted Answer · edited May 23 '17 at 10:31

Here is the correct working version based on logans answer. I added the instance variable which is needed because the myOnload() method is non-static. I also added the $entry() function to track error in GWT.

class MyClass{

   MyClass(){

     expose();

     // UiBinder stuff here
   }

   // Call this once. Exports your Java method as a javascript method
   public native void expose()/*-{
       var instance = this;
       $wnd.myOnLoadThing = $entry(function(){
           instance.@com.my.MyClass::myOnload()();
       });
    }-*/;

   public void myOnload(){
       // Put your java onload function here
   };
}

And in your uiBinder, make sure to call that myOnLoadThing

<g:HTMLPanel>
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" 
            data-show-faces="false" data-auto-logout-link="false" 
            data-scope="email,publish_actions,user_birthday,user_likes" 
            onlogin="window.myOnLoadThing();"></div>

</g:HTMLPanel>

There's also a good answer here: How to call GWT java function from Javascript?

How to use JavaScript callback function in GWT UiBinder?

2 Answers2