Add javascript/Jquery & client side code in Vaadin 7

Question

I have 3 questions:

1. Each and every action in Vaadin makes a call to the server. is there a way to avoid calls to server for every actions? like having a code at client side for particular actions that is used many times? Like in CSValidation add-on.

2. I want to know how to add Javascript/JQuery in Vaadin 7. It seems easy in Vaadin 6. But, I couldn't get it working in Vaadin 7. I hope they would have made it more easy now. Can anyone show me some examples regarding this. If it is JQuery, It will help me a lot.

3. And also will

   Javascript.getCurrent().execute("");

'execute the javascript' or 'add specified script' in to the code. Will this help me to solve my 2nd question?

Answer 1

1) Each and every action in Vaadin makes a call to the server. Is there a way to avoid calls to server for every actions? like having a code at client side for particular actions that is used many times? Like in CSValidation add-on.

This depends on the client-side code. Vaadin is built with a server side programming model, but if you need to restrict the amount of server calls, you need to do it yourself. Vaadin 7 made it relatively easier to include third party libraries as it was in Vaadin 6.

2) I want to know how to add Javascript/JQuery in Vaadin 7. It seems easy in Vaadin 6. But, I couldn't get it working in Vaadin 7. I hope they would have made it more easy now. Can anyone show me some examples regarding this. If it is JQuery, It will help me a lot.

Here you have a nice tutorial on how to integrate jQuery with Vaadin 7: http://java.dzone.com/articles/integrating-html-and-0

It basically goes about creating a JavascriptExtension class, this is the main part of the solution:

@JavaScript({ "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" })
public class JavascriptJQueryExtension extends AbstractJavaScriptExtension {
    ... // Please see the link above for an example of implementation
}

The path can either be an URL or an internal path to the jQuery library.

3) 'execute the javascript' or 'add specified script' in to the code.

The following code snippet will be executed, as stated in the Book of Vaadin 7 (https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html)

// Shorthand
JavaScript.getCurrent().execute("alert('Hello')");

The JavaScript is executed after the server request that is currently processed returns. (...)

I would suggest for you to take a good look at the Book of Vaadin. It contains a lot of important information that is usually helpful to solve most of the problems that arise when working with Vaadin.