Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
A component with Javascript
I try to implement a component with javascript, I have read an article that is called "Vaadin loves Javascript" and I made all according to the example, I implemented state, component classes which extend JavaScriptComponentState and AbstractJavaScriptComponent, also implemented connector.js, the snippets of code are bellow:
//----------------------------------------------------------------------------------
package ru.maximgorin.ams.monitor.gui.view;
import com.vaadin.shared.ui.JavaScriptComponentState;
public class SvgViewState extends JavaScriptComponentState{
public String path;
}
//----------------------------------------------------------------------------------
package ru.maximgorin.ams.monitor.gui.view;
import com.vaadin.annotations.JavaScript;
import com.vaadin.server.Resource;
import com.vaadin.ui.AbstractJavaScriptComponent;
import com.vaadin.ui.Image;
@JavaScript({ "vaadin://js/SvgView.js",
"vaadin://js/browserify.js",
"vaadin://js/control-icons.js",
"vaadin://js/shadow-viewport.js",
"vaadin://js/stand-alone.js",
"vaadin://js/svg-pan-zoom.js",
"vaadin://js/svg-utilities.js",
"vaadin://js/uniwheel.js",
"vaadin://js/utilities.js", })
public class SvgView extends AbstractJavaScriptComponent {
public SvgView() {
setWidth("100%");
setHeight("100%");
}
@Override
public void setWidth(String width) {
super.setWidth(width);
getState().width = width;
}
public void setHeight(String height) {
super.setHeight(height);
getState().height = height;
}
public void setSource(Resource source) {
getState().path = source.toString();
}
public void setResource(Resource resource) {
if (resource == null) {
throw new IllegalArgumentException("resource is null");
}
getState().path = resource.toString();
Image l;
}
@Override
protected SvgViewState getState() {
return (SvgViewState) super.getState();
}
}
//------------------------------------------------------------------------
ru_maximgorin_ams_monitor_gui_view_SvgView=function() {
var e = this.getElement();
this.onStateChange = function() {
var path=this.getState().path;
var width=this.getState().width;
var height=this.getState().height;
e.innerHTML = "<img id=\"svgview\" src=\"" + path + "\" style=\"width: " + width + "; height: " + height + ";\"/>" +
"<script src=\"svg-pan-zoom.js\">svgPanZoom('#svgview', {
zoomEnabled: true,
controlIconsEnabled: true
});"+
"</script>";
}
}
And the last file I put into ../VAADIN/js directory and the file is accessible to a link: http://localhost:8080/App/VAADIN/js/SvgView.js. When I try to show my component I always have the next error:
Could not initialize JavaScriptConnector because no JavaScript init function was found. Make sure one of these functions are defined:ru_maximgorin_ams_monitor_gui_view_SvgView
com_vaadin_ui_AbstractJavaScriptComponent
com_vaadin_ui_AbstractComponent
com_vaadin_server_AbstractClientConnector
What's wrong? I have made components according to documentation, and I tried to put the connector file into different places and result is the same.