Vaadin (self contained) portlet (Liferay) with Javascript (d

我目前正在开发一个portlet，我想在其中使用vaadin和一个自定义的javascript组件。为了得到一个想法，它是如何工作的，我尝试编写以下简单的示例 http://www.rapidpm.org/2013/10/13/using-javascript-libraries-%28d3%29-in-vaa.html。

但是，当我将我的portlet集成到Liferay上时，我收到以下错误：星期二 Dec 09 19：02：34 GMT+100 2014 com.vaadin.client.VConsole SEVERE： 无法确定覆盖的应用程序连接。覆盖层将直接附加到根面板

http://localhost:8080/web/guest/testLine 0.

(来源萤火虫(

无法加载小部件集：/asdg-0.0.1-SNAPSHOT/VAADIN/widgetsets/testd3.d3.AppWidgetSet/testd3.d3.AppWidgetSet.nocache.js？1418149425812

(Chrome 开发工具(

我的代码：

图连接器 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]));
}

}

示意图.java

package testd323.asdg;
import java.util.List;
import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;
@JavaScript({"d3.v3.min.js",
"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();
}
}

图状态.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 coords;
}
public void setCoords(final List<Integer> coords) {
    this.coords = coords;
}
}

MyPortletUI

package testd323.asdg;
import java.util.ArrayList;
import java.util.List;
import javax.portlet.PortletContext;
import javax.portlet.PortletSession;
import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.portal.kernel.log.Log;
import com.liferay.portal.kernel.log.LogFactoryUtil;
import com.liferay.portal.service.UserLocalServiceUtil;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Widgetset;
import com.vaadin.data.validator.IntegerRangeValidator;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.WrappedPortletSession;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
@Theme("mytheme")
@SuppressWarnings("serial")
@Widgetset("testd3.d3.AppWidgetSet")
public class MyPortletUI extends UI {
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<Integer>();
@Override
protected void init(VaadinRequest request) {
    configureIntegerField(xCoordField);     //not interesting, just adding converter/validator to the textFields
    configureIntegerField(yCoordField);
    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(Button.ClickEvent event) {
            if(xCoordField.isValid() && yCoordField.isValid()){
                coords.clear();
                coords.add(Integer.parseInt(xCoordField.getValue()));
                coords.add(Integer.parseInt(yCoordField.getValue()));
                diagram.setCoords(coords);
            }
        }
    });
    //now we build the layout.
    layout.setSpacing(true);
    layout.addComponent(xCoordField);
    layout.addComponent(yCoordField);
    layout.addComponent(button);
    layout.addComponent(diagram);     //add the diagram like any other vaadin component, cool!
    setContent(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);
}
}

我的设置是：Maven 7.2.6 Vaadin-liferay-portlet Archertype生命射线 6.2.1d3.v3.min.js日蚀

如果有人能向我解释我做错了什么，我会很高兴。我对自给自足的方法没有太多经验，并且有一些困难。

谢谢。