D3 Intergration Vaadin (could not initialize javascript connector)

Question

I Have D3 Intergrated in my Project. Anytimes comes the Exception "could not initialize javascript connector because no javascript init function was found"

Here my Code MainUI

package testd323.asdg;

import java.util.ArrayList;
import java.util.List;

import com.company.grafiktest5.ui.MainView;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Widgetset;
import com.vaadin.data.validator.IntegerRangeValidator;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.xdev.ui.XdevUI;
import com.xdev.ui.navigation.XdevNavigator;

@Theme("mytheme")
@SuppressWarnings("serial")
@Widgetset("CircleD3.circle.AppWidgetSet")
@com.vaadin.annotations.JavaScript( {"d3.v3.min.js",
"CircleD3_circle_Diagram.js"} )
public class MainUI extends XdevUI {
    final VerticalLayout layout = new VerticalLayout();
    final TextField xCoordField = new TextField("X");
    final TextField yCoordField = new TextField("Y");
    final Button button = new Button("move circle");
    final Diagram diagram = new Diagram();
    final List<Integer> coords = new ArrayList<>();

    @Override
    protected void init(final VaadinRequest request) {

        configureIntegerField(this.xCoordField);     //not interesting, just adding converter/validator to the textFields
        configureIntegerField(this.yCoordField);

        this.button.addClickListener(new Button.ClickListener() {   //ATTENTION! Here we get the coordinates from the textfields and apply them to our Diagram via calling diagram.setCoords()
            @Override
            public void buttonClick(final Button.ClickEvent event) {
                if(MainUI.this.xCoordField.isValid() && MainUI.this.yCoordField.isValid()){
                    MainUI.this.coords.clear();
                    MainUI.this.coords.add(Integer.parseInt(MainUI.this.xCoordField.getValue()));
                    MainUI.this.coords.add(Integer.parseInt(MainUI.this.yCoordField.getValue()));
                    MainUI.this.diagram.setCoords(MainUI.this.coords);
                }
            }
        });
        //now we build the layout.
        this.layout.setSpacing(true);
        this.layout.addComponent(this.xCoordField);
        this.layout.addComponent(this.yCoordField);
        this.layout.addComponent(this.button);
        this.layout.addComponent(this.diagram);     //add the diagram like any other vaadin component, cool!
        setContent(this.layout);
    }

    private void configureIntegerField(final TextField integerField) {
        integerField.setConverter(Integer.class);
        integerField.addValidator(new IntegerRangeValidator("only integer, 0-500", 0, 500));
        integerField.setRequired(true);
        integerField.setImmediate(true);
    }

Diagramm.Java

package testd323.asdg;

import java.util.List;

import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;

@JavaScript({"d3.v3.min.js",
"testd323.asdg.diagram_connector.js"})
public class Diagram extends AbstractJavaScriptComponent {

public void setCoords(final List<Integer> coords) {
getState().setCoords(coords);
}

@Override
public DiagramState getState() {
return (DiagramState) super.getState();
}
}

DiagramState.java

package testd323.asdg;

import java.util.List;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class DiagramState extends JavaScriptComponentState {

    private List<Integer> coords;

    public List<Integer> getCoords() {
        return this.coords;
    }

    public void setCoords(final List<Integer> coords) {
        this.coords = coords;
    }
}

diagram_connector.js

window.testd323_asdg_Diagram = function() {
    var diagramElement = this.getElement();
    var diagramFrame = d3.select(diagramElement).append("svg:svg").attr("width", 500).attr("height", 500);
    diagramFrame.append("svg:circle").attr("cx", 250).attr("cy", 250).attr("r", 20).attr("fill", "red");

    this.onStateChange = function() {
        var coords = this.getState().coords;
        d3.selectAll("circle").transition().attr("cx", parseInt(coords[0]));
        d3.selectAll("circle").transition().delay(500).attr("cy", parseInt(coords[1]));
    }

Hope that anyone can help me. Thanks!

Answer 1

JavaScript文件必须位于resources/testd323/asdg中才能找到。