Customizing elements and dom manipulation with javaScript

General
1

Hi. I like many of the features of Vaadin, especially data binding and beans and how they make life so much easier. However I find some aspects limiting in terms of customization on the client side. What is the best way to create very customized user web interfaces, such as hover changes the type of an element from text to textfield or other such very dynamic changes? These are quite easy to do on the client using javaScript and Ajax, but is there a good way to do this in Vaadin?

Also what is the best way to inject your own javaScript and dom manipulations for Vaadin version 7? I feel that it would make life easier in making the look and feel and interactions match exactly what is required. Also as an ex front developer & web analyst I feel the urge to do some javaScript :), so if you can give some advice in how to add JS in a smart way with Vaadin 7 I would appreciate it. thanks.

2

This is a wide topic and also something that depends quite heavily whether you’re using Vaadin versions before or after 10. Since you mention Vaadin 7, I urge you to take a look at the docs, starting from https://vaadin.com/docs/v7/framework/clientside/clientside-overview.html and https://vaadin.com/docs/v7/framework/gwt/gwt-overview.html . The short version is: it’s all JavaScript in the browser, although Vaadin 7 and 8 use GWT to compile client-side Java code into a JavaScript widgetset. For plain-JavaScript integration, you might want to take a look at https://vaadin.com/docs/v7/framework/gwt/gwt-javascript.html .