Javascript in custom component

I have created a custom component.
In this component I have added an image.
When clicked on this Image, I call a javascript function.
In this function I update a variable and I have to access this
variable from the main vadin application class.
How will it be possible.

In short I want the access to the html objects placed inside custom component.


If you really need that, I’d suggest you create a custom widget with client side part, where you could conduct fine tuning of your image interaction and call your JS through JSNI. The value of your variable can be kept also on the client side (maybe statically). In your application u can have references to your component (serverside part) which will retreive the value of the variable through client-server communication.


Hi Sasha-

Would you be able to elaborate a little on that or reference some good starting points? I find myself in the same place as Ashwin, having recently crammed a bunch of custom JS into a CustomLayout using “executeJavaScript” only to find that it won’t refresh with the browser and has limited cross-communication ability. My attempts to find a “simple” example of a Widget that uses some custom JS and communicates back and forth with Vaadin have left me completely confused.

Is there a good “Custom Vaadin Widget Hello World”? One where I’m not making a custom mashup of components but instead generating some truly unique JS that can communicate back? Or a good starting point for learning about JSNI?



There’s a great (though complex, not hello-worldish) add-on -
. It wraps the JS library Highcharts and exposes its API to the server side Vaadin component. Even though the source is not available through the link - I would suggest you downloading the jar and just unzipping it. The structure of the add-on is pretty clean and I am sure you will find the clues. Also, I would recommend to read this
JSNI tutorial