是否可以在 Vaadin 框架内使用 jQuery？答案

【问题标题】：Is it possible to use jQuery inside of Vaadin framework?是否可以在 Vaadin 框架内使用 jQuery？
【发布时间】：2012-03-07 09:27:11
【问题描述】：

由于 Vaadin 是一个 Java Web 应用程序框架，所以是否可以在 Vaadin Java 代码中插入 jQuery javascript sn-p？

【问题讨论】：

我不明白为什么不这样做，但我不明白你为什么要...该框架肯定允许分离视图和控制器吗？
框架提供自定义组件使用原生js代码。但是，虽然我尝试了一些复杂的 js 代码，但可能什么也没发生。这就是我问这个问题的原因。

标签： java javascript jquery vaadin

【解决方案1】：

是的。

像这样创建自己的 ApplicationServlet 扩展类：

public class MyApplicationServlet extends ApplicationServlet {

    @Override
    protected void writeAjaxPageHtmlVaadinScripts(Window window,
            String themeName, Application application, BufferedWriter page,
            String appUrl, String themeUri, String appId,
            HttpServletRequest request) throws ServletException, IOException {

        page.write("<script type=\"text/javascript\">\n");
        page.write("//<![CDATA[\n");
        page.write("document.write(\"<script language='javascript' src='./jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
        page.write("//]]>\n</script>\n");

        super.writeAjaxPageHtmlVaadinScripts(window, themeName, application,
            page, appUrl, themeUri, appId, request);
    }
}

然后替换 web.xml 中的 Vaadin servlet（默认为com.vaadin.terminal.gwt.server.ApplicationServlet）：

<servlet-class>com.example.MyApplicationServlet</servlet-class>

然后你可以在你的代码中调用 jQuery：

MyApplication.getMainWindow().executeJavascript(jQueryString);

【讨论】：

正如我所尝试的，这一行的代码：MyApplication.getMainWindow().executeJavascript(jQueryString);可能只适用于一些简单的javascript代码。好像不太支持更复杂的js代码。
我不太了解 jQuery，但至少在我的 Vaadin 应用程序中，Invient 图表（基于 Highcharts）使用了它。如果你在一个 js 文件中声明你的 jQuery 东西，把它放在页面标题中（比如 jQuery.js）并用 executeJavascript 调用你的函数，它对你有用吗？此外，您是否检查过（使用 firebug 或类似工具）jQuery 库是否已成功加载？
我也在使用 Invient 图表。这对我来说很有用。我需要 jQuery 来实现 Vaadin 不提供的其他一些组件。关于如何从 Vaadin 服务器端与客户端进行通信的问题。
你能举个例子说明你想要达到的目标吗？
“如何从 Vaadin 服务器端与客户端进行通信的问题”是什么意思。 ?

【解决方案2】：

您可以使用@JavaScript 和@StyleSheet 注释

@StyleSheet({
                /*
                 * JQuery UI
                 */
                "vaadin://jquery/jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css",
})

@JavaScript({   
                /*
                 * JQuery
                 */
                "vaadin://jquery/jquery-1.11.1.min.js",

                /*
                 * JQuery UI 
                 */
                "vaadin://jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js",
})

public class MyUI extends UI {
 ...
}

执行：

JavaScript.getCurrent().execute("...javascript code here...")

小心使用较大的脚本。通过 vaadin 注释添加 javascript 的性能非常差。最好手动将脚本注入到 html 标头中。

【讨论】：

文件（例如/jquery/...）在哪里？在项目的哪个文件夹中？
文件进入应用程序的“VAADIN”文件夹，可以通过“vaadin://”url访问

【解决方案3】：

ApplicationServlet 的更多定制：

public class VaadinApplicationServlet extends ApplicationServlet {

    @Override
    protected void writeAjaxPageHtmlHeader(BufferedWriter page, String title, String themeUri, HttpServletRequest request) throws IOException {
        page.write("<script language='javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>");
        super.writeAjaxPageHtmlHeader(page, title, themeUri, request);
    }

}

【讨论】：