A component with Javascript

Vaadin 6 / 7 / 8
1

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
});”+
“”;
}
}

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.