Trigger Listener in javascript from window.executeJavaScript()

Hi !

I try to trigger a listener with javascript code, which is runned using the window.executeJavaScript(XXX) function.

The idea is to execute dynamic javascript that I generate from the server side, in order to retrieve some data in the page, then submit this data to the vaadin context and do some stuff…

I manage to make some simple client script actions (alert, getElementById etc…) but when I try to trigger a Vaadin listener using the change() or click() event, it fails… I have tried this with buttons and textfields, this does not work.

Is this normal, like some kind of build-in security in order to keep the state integrity of the UI ?

Thanks for any help !

To me this sounds more like you would like to make a custom component with a client side (GWT) counterpart for retrieving the data rather than using JavaScript directly. Using Javascript in the way you propose sounds kind of fragile and is not really currently supported by Vaadin.

Hi John !

Thank you for your answer. “Not really supported” means “it is a limitation” or “we can not confirm this works” ? :slight_smile:

I just wanted to make this work quickly (proof of concept application…) so I thought I could achieve what I wanted doing it this way.

Can you confirm I can’t trigger a vaadin listener manually by calling event functions with javascript ?

I haven’t heard anyone doing such a thing before so I cannot say if it is a limitation but since the GWT compiler obfuscates all methods when it compiles the GWT Java code into javascript I do not really see a way to safely do what you are trying to do.

If you are trying to prototype something on the client side I strongly suggest taking a look at how client side widgets are created in Vaadin.

For example, if you want to run a javascript snippet it would be much easier to make a component that reads the javascript on the server side, sends it the the client side, executes it on the client side and sends the result back to the server and then on the server side trigger those listeners you want to trigger.

Besides, if you do it like that you will then have full control of what happens with the javascript. You can even write inline Javascript in your client side GWT component using JSNI if you need to.

Using Window.executeJavascript is very limited compared with the freedom you get when rolling your own component.

To get started (and if your using eclipse with the Vaadin plugin) just right click on your vaadin project, select New->Other->Vaadin Widget and it will create a good example for you of how client side widgets are made in Vaadin.

You can explicitly tell GWT to publish a method with a cleartext name - that way, you could call it from JavaScript.

In Vaadin 7 alpha 3, we are planning to make some changes that will make it easier to integrate JavaScript components etc. Nevertheless, using a custom GWT widget wrapping the JavaScript library is often a better way to integrate with Vaadin.

Thank you both for your answer. I understand what you say but I doubt this fits my use case since the javascript I want to execute is fully dynamic.

Anyway I managed to make my thing work, but I was very surprised : Listeners are not triggered when the inputs are not visible, but they do when they are visible.

I am trying to find an explanation to this. Any idea ?

Thank you

Which listeners do you refer to? On which level (JavaScript, GWT, Vaadin server side)?

Although I believe that is not what you mean, Vaadin server side ignores events from invisible components. In Vaadin 7, the client does not receive even placeholders from the server for invisible components. As for the other levels of listeners, those should not be Vaadin specific in any way.

Indeed I mean the server side listeners.

There are surely some reasons you made this choice for invisible components, maybe this point should be documented. Or perhaps I should have got it reading the setVisible doc :

Thanks Henri !

The javadoc for this is somewhat clearer at least in the Vaadin 7 branch, where invisible components are not sent to the client at all.