在Vaadin 7中添加JavaScript / jQuery和客户端代码

Question

我有三个问题：

1. Vaadin 中的每一个动作都会调用服务器。是否有一种方法可以避免每个动作都调用服务器，例如在客户端代码中为特定的行为编写代码并多次使用？例如在 CSValidation add-on 中。

2. 我想知道如何在 Vaadin 7 中添加 Javascript/JQuery。在 Vaadin 6 中似乎很容易，但我在 Vaadin 7 中无法使其工作。希望有人能向我展示一些相关的示例。如果是 JQuery，那就更好了。

3. 'Javascript.getCurrent().execute("");' 可以将 '执行 JavaScript' 或 '将指定脚本' 添加到代码中。这对解决我的第二个问题有帮助吗？

- Gugan

---

有人能回答一下吗？ - Gugan

任何 JSFiddle 或 Code 都可以帮助回答。如果可能，请提供。 - MarmiK

Answer 1

1) Vaadin中的每一个动作都会调用服务器。有没有办法避免每个动作都向服务器发出请求？例如，在客户端为特定的多次使用的动作编写代码，就像在CSValidation附加组件中。

这取决于客户端代码。Vaadin是建立在服务器端编程模型上的，但如果您需要限制服务器调用的数量，您需要自己处理。在Vaadin 7中，包含第三方库相对容易一些，就像在Vaadin 6中一样。

2) 我想知道如何在Vaadin 7中添加Javascript / JQuery。 在Vaadin 6中似乎很容易。 但是，在Vaadin 7中我无法让它起作用。 我希望他们现在能更加简单化。 有人能给我展示一些相关示例吗？ 如果是JQuery，那会对我很有帮助。

在这里，您可以找到一个很好的教程，了解如何将jQuery与Vaadin 7集成：http://java.dzone.com/articles/integrating-html-and-0

主要解决方案是创建一个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
}

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

3）将“执行JavaScript”或“添加指定脚本”到代码中。

如Vaadin 7书所述（https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html），将执行以下代码片段。

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

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

我建议您仔细阅读Vaadin官方书籍，其中包含了许多重要信息，通常可以帮助解决使用Vaadin时出现的大部分问题。

- Jonas

---

谢谢Jonas。我会检查你的答案。 - Gugan

@Gugan 我同意。但你可以先使用这本书。之后，Vaadin 7论坛实际上非常活跃。 - Jonas

Answer 2

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

我可以告诉你，你的第三个问题是通过它来运行JavaScript命令。

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

但是，为此你必须在页面中包含jQuery。

对于问题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()"));

现在没有支持代码，你必须确定实际插件功能是在每个操作上调用服务器的函数。确保如果你覆盖这个函数...你将在某个时刻需要那个功能...所以不要覆盖实际需要的函数....

问题2， 是的，jQuery可以在vaadin中使用，请参考论坛。 它说你可以直接调用jQuery，像这样$wnd.JQuery 希望这能帮到你...

- MarmiK