/**
- 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:
@Theme(“mytheme”)
@JavaScript(“mylibrary.js”)
public class MyUI extends UI {
private static final long serialVersionUID = -6891373465168098637L;
@Override
protected void init(VaadinRequest vaadinRequest) {
VerticalLayout layout = new VerticalLayout();
Label label = new Label(getHtmlResource("examples.html"), ContentMode.HTML);
layout.addComponent(myComponent);
layout.addComponent(label);
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;
}
public String getHtmlResource(String fileNames) {
InputStream in = null;
try {
in = MyUI.class.getResourceAsStream(fileNames);
return org.apache.commons.io.IOUtils.toString(in, "UTF-8");
} catch (Exception e) {
e.printStackTrace();
return "blank";
}
}
}
// examples.html:
Insert title here// mylibrary.js
var mylibrary = mylibrary || {};
mylibrary.MyComponent = function (element) {
element.innerHTML = “
Hello, kitty!
”
- "Enter a value: "
- “”
- “”
- “”;
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();
};
};