javascript - Vaadin(自包含)portlet (Liferay) 与 Javascript (d3js)

Question

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

但是，当我将 portlet 集成到 liferay 时，出现以下错误: Tue Dec 09 19:02:34 GMT+100 2014 com.vaadin.client.VConsole 严重:无法确定覆盖的 ApplicationConnection。覆盖层将直接附加到根面板

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

(源 Firebug )

无法加载小部件集:/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();
}
}

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 coords;
}

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

MyPortletUI.java

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 Liferay 6.2.1 d3.v3.min.js eclipse

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

非常感谢。

Answer 1

几周前我已经解决了我的问题，如果有人有类似的问题，我会发布我的解决方案。

在主 UI 类中，您必须添加一个引用您使用的 Javascript 库的 Anootation。例如，在我的例子中，我必须添加 MyPorletUI.java:

@Theme("mytheme")
@SuppressWarnings("serial")
@Widgetset("CircleD3.circle.AppWidgetSet")
@com.vaadin.annotations.JavaScript( {"d3.v3.min.js",
"CircleD3_circle_Diagram.js"} )
public class MyPortletUI extends UI { (...)

其他一切都按照教程链接中所述进行，我在原始问题帖子中提到过。