vaadin - 如何将 javascript 注入 Vaadin 以支持插件

Question

某些 Vaadin 插件，例如 Invient Charts (https://vaadin.com/directory#addon/invient-charts)，需要包含 javascript 库才能运行。

如何在不必为 Vaadin 应用程序创建自定义 Servlet 的情况下做到这一点？

Answer 1

没有将自定义资源添加到页头的扩展点。

无论如何，你可以添加一个内容模式为 CONTENT_RAW 的标签和任何自定义内容，如 JS / CSS。如果需要，您可以将内容添加到头部

document.getElementsByTagName("head")[0].appendChild().

Answer 2

使用 Scaladin 插件和 Scala 语言，这是通过应用程序的 init() 方法中的以下代码完成的：

override def init() {
  super.init()

  // bring in javascript needed for addons
  val jqsrc = io.Source.fromInputStream(getClass.getResourceAsStream("/js/jquery-1.4.4.min.js"))
  val hcsrc = io.Source.fromInputStream(getClass.getResourceAsStream("/js/highcharts.js"))
  val xpsrc = io.Source.fromInputStream(getClass.getResourceAsStream("/js/modules/exporting.js"))
  mainWindow.executeJavaScript((jqsrc ++ hcsrc ++ xpsrc).mkString)
  jqsrc.close(); hcsrc.close(); xpsrc.close() }

请注意，作为 InputStreams 打开的 javascript 文件必须位于类路径中。要使用 SBT 执行此操作，请在 src/main 目录下创建一个资源目录，并将 /js 目录和 .js 文件放入其中。这些将在构建 war 文件时放入 WEB-INF/classes 目录中。当您从 xsbt Web 插件使用 container:start 时，它们也会出现在类路径中，因此相同的代码允许在制作 .war 文件之前进行测试。

这种方法应该能够在没有 Scala 的情况下工作（但需要更多的 Java 代码），但这有什么乐趣呢？

一种更有效的方法是将 JavaScript 代码加载到对象中保存的字符串中，以避免重复读取它：

object Script {
  val js = Seq("/js/jquery-1.4.4.min.js", "/js/highcharts.js", "/js/modules/exporting.js") map { f =>
    val in = io.Source.fromInputStream(getClass.getResourceAsStream(f))
    val s = in.mkString
    in.close()
    s
  }
}

然后在 Vaadin 应用程序中：

class MyApp extends Application(title = "My App", applicationTheme = "reindeer")  {
  override def init() {
    super.init()

    // bring in javascript needed for addons
    Script.js foreach mainWindow.executeJavaScript
  }
.
.
.

Answer 3

在 Vaadin 6 中，您有两种选择：

1. 您已经提到的选项：扩展 Vaadin servlet

2. 将文件包含到已编译的小部件集中：

在包含 .gwt.xml 文件和客户端目录的文件夹下创建一个名为 public 的目录。在此处将要包含的文件复制到小部件集中。这些文件很可能是 js 和 css 文件，也可能是一些图片。该目录下的所有文件都将被复制到已编译的小部件集中。

如果您希望将 js 文件包含到您的 Vaadin 应用程序中，请将以下行添加到 .gwt.xml 文件中（src 相对于公共文件夹）：

<script src="jquery/jquery.js" />