how to include a JavaScript File to returned web page and execute it.


  • For instance:
  • I have a html file and a JavaScript file. If two file open directly with browser. It can be work.
  • If put these to Vaadin Frame and use @JavaScript annotation and running, it only shows a static html.
  • Only need communication between JavaScript and html page, no need with server.
  • here my code:

// MyUI:
public class MyUI extends UI {

private static final long serialVersionUID = -6891373465168098637L;

protected void init(VaadinRequest vaadinRequest) {
    VerticalLayout layout = new VerticalLayout();

    Label label = new Label(getHtmlResource("examples.html"), ContentMode.HTML);

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

public String getHtmlResource(String fileNames) {
    InputStream in = null;
    try {
        in = MyUI.class.getResourceAsStream(fileNames);
        return, "UTF-8");
    } catch (Exception e) {
        return "blank";


// examples.html:

Insert title here

Click here

// mylibrary.js
var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) {
element.innerHTML = “

Hello, kitty!

  • "
    Enter a value: "
  • “”
  • “”
  • “”;“thin solid red”;“inline-block”;

this.getValue = function() {
return element.getElementsByTagName(“input”)[0]

this.setValue = function (value) {
.value = value;
}; = function () {
alert(“Error: Must implement click() method”);

var button = element.getElementsByTagName(“input”)[1]
var self = this;
button.onclick = function () {;

39423.js (774 Bytes)
39424.html (435 Bytes)

I am not sure what you want to accomplish here. I mean that why you are defining the UI in html file first place, and not in Vaadin java code (e.g. add Button to you UI, etc.) If you really want and need to use html for you UI, there some mechanisms for that in Vaadin 8.



(I do not know what is your path so you need to figure it out yourself)

See generic documentation here:

I may be wanna saying, use
Label label = new Label(“HtmlSourceFileString”, ContentMode.HTML);
returned html page(i have been put js file to label) couldn’t to execute JavsScript part.
if a open this html file with browsers, it can be work.
so, i wanna a method to solve it. (74.1 KB)

If you’re embedding tags in your HTML, I think you’ll need to extract those to a .js file instead and maybe create a


Yes, I agree with Olli. Generally it is bad practice to include executable JavaScript in components content that allow HTML. In some cases those are automatically filtered by Jsoup, and in case not, you should consider use e.g. when setting component content that comes from sources that may include executable javascript.

Correct way to include executable script is widgetset, and JavaScriptExtension is method to create custom components with JavaScript. Alternatively @JavaScript can be used in some cases.