Java-Script Callback?!?!

Vaadin 6 / 7 / 8
1

Hi!

In your book, you describe a method and class, which is nowhere to be found:
https://vaadin.com/de/book/vaadin7/-/page/advanced.javascript.html

That method: JavaScript.getCurrent().addCallback(…)

And that class: JavaScriptCallback

Is not available on latest vaadin. It was in some vaadin alpha 7.0.0 sources/Java-Doc, but not in the current release!!

I find it very missleading, that the book shows examples which are not working and you cannot find via google any solution to it.

Am I the only one who needs a callback? Or is there another solution?

Best regards

Edith: Do you have to use the ServerRPC and JavaScriptCallbackRpc instead of the other solution?

2

Hi,

The “…Callback” was renamed as “…Function” at some point.

Looks like I have updated the
book example here
 to use it, but not in the book.

Thanks for informing about the error, I’ll fix it soon.

3

Well i was 5 minutes faster… Just tested the addFunction method and well, it worked…

But is there a way, to call the “original javascript-function”?

For example, if I overwrite alert:
JavaScript.getCurrent().addFunction(“alert”, new JavaScriptFunction(){ …});

I want to log all alert messages to a file, but I still want that it should popup like a normal alert?

Is that possible or is the function completly overrwritten?

4

Hello.

You can handle the call by server and i think it is possible to call the original client side function by native javascript

5

You can have a look at
this(overriding alert)
 and
this(overriding function and call original)
.
The storing an instance of the function thing might not be possible using JavaScript.addFunction but maybe using a JavaScript Extension/Component

6

@Mario: Any tipps how I can do that?

@Marius: Ok, so storing the original function somewhere else, could be a solution. But i would have a JS to make this and call it from Vaadin. Or is there an extension/component, where i can write Java-Script functions and add them to the client? (like addFunction, but with JS code?)

7

I’m not sure if it works or not. But try something like this.

JavaScript.getCurrent().addFunction("server_alert", new JavaScriptFunction(){
//do something
callClientAlert(String text);
});

private native void callClientAlert(String text)/*-{
$wnd.alert(text);
}-*/;

This is first idea… you can call imaginary function server_alert (without any declaration in js file), you will be redirected to your function handler (do something) and if you are done you can call original function (declared in js) by native method (for example callClientAlert with parameter text to show in alert).

Or you can try all of this but at first part you will not override imaginary function server_alert but rather original alert, and the by native method call original. But i’m warried about loop which can create. I’m not really sure how this work at the lowest level.

// i’m thinking about native method … it will not work. Try Javascript.execute(“window.alert(‘tralalalala’)”);

8

The most dirty thing to do which seem to have worked when i just tested it was doing:

JavaScript.getCurrent().execute("(function() { var proxied = window.alert; window.alert = function() { console.log('Doing something else'); return proxied.apply(this, arguments); }; })();")

When you then call alert(‘Something’) it will log Doing something else in your Developer Tools’ JS console.

@Mário
The callClientAlert function can only be declared in a client-side/GWT Module and if I would go so far as to create an extension or a Custom client-side Component to achieve this i would do the part with adding the function also on the Client. There you could even attach your own Js File in the head containing the function.

…I just had an idea. You could probably use
this technique
 to modify the Bootstrap Page and add a script tag to the Header by getting the response and append your tag to the head.

9

@Marius
Yes yes … at the end of my post i comment last line in which i agree that wouldn’t work because the code is in server side not in client and native work only on client. so i suggested the call of Javascript.execute(…)

I was hurry in writing so i dont delete wrong suggestion

10

I have a .js file that is d3 and i want to call with JavaScript.getCurrent().addFunction…how i can do this… i am getting lot of confusion regarding this!!!