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

Add javascript/Jquery & client side code in Vaadin 7

提问by Gugan

I have 3 questions:

我有3个问题：

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("");

1. Vaadin 中的每一个动作都会调用服务器。有没有办法避免每次操作都调用服务器？喜欢在客户端有一个代码用于多次使用的特定操作？就像在 CSValidation 附加组件中一样。

2. 我想知道如何在 Vaadin 7 中添加 Javascript/JQuery。在 Vaadin 6 中似乎很容易。但是，我无法在 Vaadin 7 中使用它。我希望他们现在能让它变得更容易。任何人都可以向我展示一些关于此的示例。如果是 JQuery，它会对我有很大帮助。

3. 而且还会

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

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

在代码中“执行 javascript”或“添加指定的脚本”。这会帮助我解决我的第二个问题吗？

回答by Jonas

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.

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

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)

将执行以下代码片段，如 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 时出现的大多数问题。

回答by MarmiK

I am not expert of Vaadin Framework...

我不是 Vaadin 框架的专家...

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 includedin 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,

问题2，

yes the jQuery is available with vaadin, refer forum

是的 jQuery 可用于 vaadin，请参阅论坛

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

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

I hope this will help...

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