Vaadin 8: как включить файл JavaScript на возвращаемую веб-страницу и выполнить его

Например:
У меня есть файл html и файл JavaScript. Если два файла открыть напрямую в браузере. Это может работать.
Если поместить этот файл во фрейм Vaadin и использовать аннотацию @JavaScript, он покажет только статический HTML.
Требуется только связь между JavaScript и HTML-страницей, нет необходимости с сервером.
здесь мой код

HTML (пример.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>

моя библиотека.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();
    };
};

Ваадин (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;
    }
}

это образ обозревателя пакетов моего проекта, начальный проект.

это исходный код моего проекта (zip)


vaadin vaadin8
person Broderick    schedule 19.12.2017    source источник
comment
Можете ли вы обновить свой вопрос с информацией, где у вас есть эти файлы в вашем проекте?   -  person pirho    schedule 19.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Боюсь, это невозможно так, как вы хотите. См., например, этот ответ.

Аннотация @JavaScript имеет немного другое назначение. Это позволяет вам вызывать скрипт из Vaadin кода на стороне сервера.

Для использования @JavaScript см. этот ответ. Обратите особое внимание на путь, по которому включен скрипт.

Таким образом, в основном @JavaScript позволяет вам делать такие вещи, как

com.vaadin.ui.JavaScript.getCurrent().execute("hello()");

где hello() — это функция, объявленная в javascript, которую вы включаете с @JavaScript

person pirho    schedule 20.12.2017