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

As Vaadin is a Java web application framework, so is it possible to insert the jQuery javascript snippet in the Vaadin Java code?

由于Vaadin是一个Java Web应用程序框架,因此可以在Vaadin Java代码中插入jQuery javascript片段吗?

3 个解决方案

#1

Yes it is.

是的。

Create your own ApplicationServlet extending class like this:

像这样创建自己的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);
    }
}

Then replace the Vaadin servlet in your web.xml (the default is com.vaadin.terminal.gwt.server.ApplicationServlet):

然后替换web.xml中的Vaadin servlet(默认为com.vaadin.terminal.gwt.server.ApplicationServlet):

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

You can then make jQuery calls in your code by calling:

然后,您可以通过调用以下命令在代码中进行jQuery调用:

MyApplication.getMainWindow().executeJavascript(jQueryString);

#2

You can use the @JavaScript and @StyleSheet annotations

您可以使用@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 {
 ...
}

For execution:

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

Be careful with larger scripts. Adding javascript via the vaadin annotation has very poor performance. Better inject the script in the html header manually.

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

#3

One more customizing for ApplicationServlet:

还有一个针对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);
    }

}

#1