在Vaadin 7中添加javascript / Jquery和客户端代码

I have 3 questions:

我有3个问题:

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.

Vaadin中的每个动作都会调用服务器。有没有办法避免每个动作调用服务器?比如在客户端有代码用于多次使用的特定操作?就像在CSValidation插件中一样。
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.

我想知道如何在Vaadin 7中添加Javascript / JQuery。在Vaadin 6中看起来很容易。但是,我无法让它在Vaadin 7中运行。我希望他们现在能让它更容易。谁能告诉我一些关于这方面的例子。如果它是JQuery,它将帮助我很多。
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?

'执行javascript'或'添加指定的脚本'到代码中。这有助于我解决第二个问题吗?

2 个解决方案

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

1)Vaadin中的每个动作都会调用服务器。有没有办法避免每次操作都调用服务器?比如在客户端有代码用于多次使用的特定操作?就像在CSValidation插件中一样。

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.

这取决于客户端代码。 Vaadin是使用服务器端编程模型构建的,但如果您需要限制服务器调用量,则需要自己完成。 Vaadin 7使得包含第三方库变得相对容易,就像在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.

2)我想知道如何在Vaadin 7中添加Javascript / JQuery。在Vaadin 6中看起来很容易。但是,我无法让它在Vaadin 7中运行。我希望他们现在能让它更容易。谁能告诉我一些关于这方面的例子。如果它是JQuery,它将帮助我很多。

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

在这里,您有一个很好的教程,介绍如何将jQuery与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:

它基本上是创建一个JavascriptExtension类,这是解决方案的主要部分:

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

路径可以是URL或jQuery库的内部路径。

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

3)'执行javascript'或'添加指定的脚本'到代码中。

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

将执行以下代码段,如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. (...)

在当前处理的服务器请求返回后执行JavaScript。 (......)

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.

我建议你好好看看Vaadin书。它包含许多重要信息,通常有助于解决使用Vaadin时出现的大多数问题。

#2

I am not expert of Vaadin Framework...

我不是Vaadin Framework的专家......

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

我可以告诉你,你的问题3是通过它运行JavaScript命令..

You can also run jQuery command through that..

你也可以通过它运行jQuery命令..

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

但为此你必须在页面中包含jQuery ..

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

问题1:我可以说这是可能的,因为Vaadin具有覆盖功能的功能。

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

是的,jQuery可以与vaadin一起使用,请参阅论坛

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

它说你可以像这个$ wnd.JQuery一样直接调用jQuery

I hope this will help...

我希望这个能帮上忙...

#1