我目前正在开发一个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
.javapackage 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日蚀
如果有人能向我解释我做错了什么,我会很高兴。我对自给自足的方法没有太多经验,并且有一些困难。
谢谢。
几周前我已经解决了我的问题,如果有人遇到类似的问题,我会发布我的解决方案。
在主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 { (...)
其他一切都按照教程链接中的描述工作,我在原始问题帖子中引用了。