Vaadin框架内部可以使用jQuery吗？

问题描述：

由于Vaadin是一个Java Web应用程序框架，因此可以在Vaadin Java代码中插入jQuery JavaScript片段吗？Vaadin框架内部可以使用jQuery吗？

我不明白为什么不，但我不明白为什么你会想...当然，框架允许分离的视图和控制器？ – bdares 2012-02-16 00:01:03

该框架提供了使用本地js代码的自定义组件。然而，当我尝试了一些复杂的js代码时，可能没有任何事情发生。这就是为什么我问这样的问题。 – Kyleinincubator 2012-02-27 05:14:18

答

是的。

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

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

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

然后，您可以让jQuery的电话在您的代码通过电话：

MyApplication.getMainWindow().executeJavascript(jQueryString);

正如我试过的，这行代码：MyApplication.getMainWindow（）。executeJavascript（jQueryString）;可能只适用于一些简单的JavaScript代码。它似乎不太适合支持更复杂的js代码。 – Kyleinincubator 2012-02-16 20:59:38

我不太了解jQuery，但至少在我的Vaadin应用程序中它由Invient图表（基于Highcharts）使用。如果你在一个js文件中声明你的jQuery东西，将它放在页面头文件（如jQuery.js）中并用executeJavascript调用你的函数，它会对你有用吗？此外，你检查（w/firebug或类似的）jQuery库已成功加载？ – miq 2012-02-17 07:10:15

此外，请查看此示例：http://vaadinjquery.appspot.com/ – miq 2012-02-17 07:29:41

答

另一个习惯mizing为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); 
    } 

}

答

您可以使用@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/...'）在哪里？项目中的哪个文件夹？ – luckydonald 2016-06-11 12:33:49

文件进入可通过“vaadin：//”url访问的应用程序的“VAADIN”文件夹 – d2k2 2016-06-13 08:20:05

Vaadin框架内部可以使用jQuery吗？

相关推荐