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?

Solution 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.

Solution 2

I am not expert of Vaadin Framework...

I can tell you that your Question No.3 is to run JavaScript commands through that..

You can also run jQuery command through that..

But for that you must have jQuery included in the page..

for Question 1: I can say it is possible, as Vaadin have the functionality that overrides function..

JavaScript.getCurrent().addFunction("com.example.foo.myfunc",
                                    new JavaScriptFunction() {
    @Override
    public void call(JSONArray arguments) throws JSONException {
        Notification.show("Received call");
    }
});

Link link = new Link("Send Message", new ExternalResource(
        "javascript:com.example.foo.myfunc()"));

Now in absence of supporting code, you must identify the actual plugin's function that is making call to server on each action. Make sure if you override the function.. you will require that functionality at some point.. so do not override the actually required function....

Question 2,

yes the jQuery is available with vaadin, refer forum

it says you can call jQuery directly like this $wnd.JQuery

I hope this will help...

Comments

[Gugan]

Thank you Jonas.. I will check ur answer.

[Jonas]

@Gugan I agree. But you can use the Book as the first stop. After that, the Vaadin 7 Forum is actually very active.