Vaadin 8 : 반환 된 웹 페이지에 JavaScript 파일을 포함하여 실행하는 방법

예 :
HTML 파일과 JavaScript 파일이 있습니다. 두 파일이 브라우저에서 직접 열리는 경우. 그것은 일이 될 수 있습니다.
이 파일을 Vaadin Frame에 넣고 실행중인 @JavaScript annotation을 사용하는 경우 정적 HTML 만 표시합니다.
자바 스크립트와 HTML 페이지 사이의 통신 만 필요하며 서버가 필요 없습니다. 여기
내 코드Vaadin 8 : 반환 된 웹 페이지에 JavaScript 파일을 포함하여 실행하는 방법

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(); 
    }; 
};

만약 angel (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)

출처

2017-12-19 Broderick

에 포함 javascript에 선언하는 기능입니다

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

등의 작업을 수행 할 수 있습니다 너의 프로젝트? – pirho

나는 당신이 원하는대로 두려워합니다. 예를 들어 this answer을 참조하십시오.

주석 @JavaScript은 약간 다른 용도로 사용됩니다. Vaadin 서버 측 코드에서 스크립트를 호출 할 수 있습니다.

@JavaScript을 사용하는 경우 this answer을 참조하십시오. 특히 스크립트가 포함 된 경로에주의하십시오.

그래서 기본적으로 @JavaScript는 hello() 당신이 당신이 이러한 파일을 않는 정보로 질문을 업데이트 할 수 @JavaScript

출처

2017-12-20 13:24:04 pirho

Vaadin 8 : 반환 된 웹 페이지에 JavaScript 파일을 포함하여 실행하는 방법

답변

관련 문제