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

2022-09-04 02:11:40

我有3个问题:

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

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

  3. 并且还将

    Javascript.getCurrent().execute(“”);

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


答案 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时出现的大多数问题。


答案 2

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

我可以告诉你,你的问题3是通过它运行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

我希望这会有所帮助...