Vaadin 8:如何将JavaScript文件包含在返回的网页中并执行它

时间:2017-12-19 08:47:57

标签: vaadin vaadin8

例如:
    我有一个html文件和一个JavaScript文件。如果两个文件直接用浏览器打开。它可以工作。
    如果将这些文件放到Vaadin Frame并使用@JavaScript注释运行,它只显示一个静态html 只需要JavaScript和html页面之间的通信,不需要服务器 这是我的代码

HTML(example.html的):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js Test Uses</title>
<script type="text/javascript" src="mylibrary.js"></script>
</head>
<body>
    <div id="foo"></div>

    <script type="text/javascript">
        window.foo = new mylibrary.MyComponent(document.getElementById("foo"));
        window.foo.click = function () {
               alert("Value is " + this.getValue());
           }
    </script>
</body>
</html>

mylibrary.js

var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) {
    element.innerHTML = "<div class='caption'>Hello, kitty!</div>" 
        + "<div class='textinput'>Enter a value: " 
        + "<input type='text' name='value'/>"
        + "<input type='button' value='Click'/>"
        + "</div>";

    element.style.border="thin solid red";
    element.style.display="inline-block";

    this.getValue = function() {
        return element.getElementsByTagName("input")[0].value;
    };

    this.setValue = function (value) {
        element.getElementsByTagName("input")[0].value = value;
    };

    this.click = function () {
        alert("Error: Must implement click() method");
    };

    var button = element.getElementsByTagName("input")[1];
    var self = this;
    button.onclick = function () {
        self.click();
    };
};

Vaadin(MyUI.java):

@Theme("mytheme")
@JavaScript("mylibrary.js")
public class MyUI extends UI {

    private static final long serialVersionUID = -6891373465168098637L;

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        CustomLayout layout = null;
        try {
            layout = new CustomLayout(MyUI.class.getResourceAsStream("examples.html"));
        } catch (IOException e) {
            e.printStackTrace();
          }
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
        private static final long serialVersionUID = -9170703857949837824L;
    }
}

this is my project package explorer image, is a initial project.

this is my project source(zip)

1 个答案:

答案 0 :(得分:0)

恐怕你想要的方式不可能。请参阅示例this answer

注释train/ class1/ img1.jpg img2.jpg ........ class2/ IMG1.jpg IMG2.jpg test/ class1/ img1.jpg img2.jpg ........ class2/ IMG1.jpg IMG2.jpg ........ 的目的有点不同。它使您可以从train_generator = train_datagen.flow_from_directory('train', target_size=(50, 50), batch_size=batch_size, class_mode='binary',color_mode='grayscale') validation_generator = test_datagen.flow_from_directory('test', target_size=(50, 50),batch_size=batch_size, class_mode='binary',color_mode='grayscale') model.fit_generator( train_generator,steps_per_epoch=250 ,epochs=40, validation_data=validation_generator, validation_steps=21 ) 服务器端代码调用脚本。

要使用@JavaScript,请参阅this answer。请特别注意包含脚本的路径。

所以基本上Vaadin允许你做像

这样的事情
@JavaScript

其中@JavaScriptcom.vaadin.ui.JavaScript.getCurrent().execute("hello()"); 中声明的函数,其中包含hello()