如何在我的网页中嵌入在Visual编辑器中创建的Vaadin Composite组件

Question

我正在为我的网站设计一个网页。我使用的Vaadin框架和Java语言也是一样的。我使用Vaadin中的Visual编辑器来放置UI元素，即我创建了一个复合组件。这是在类MyComponent.java中完成的。我有一个DownloadManager.java类，它扩展了UI类并显示网页。我试着在UI类中创建一个MyComponent.java对象，这样我使用可视化编辑器添加的所有组件都会显示在网页上。但这样做只会显示一个空白页面。我是Vaadin框架的新手，所以如果这个问题很琐碎，请原谅。我遵循了《瓦丁书》的指导方针，但无法找到上述问题的答案。下面是我的类的代码片段：

public class DownloadmanagerUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = DownloadmanagerUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
//final VerticalLayout layout = new VerticalLayout();
//layout.setMargin(true);
//setContent(layout);
MyComponent m = new MyComponent();
//layout.addComponent(m);
/*Button button = new Button("Click Me");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
layout.addComponent(new Label("Thank  for clicking"));
}
});
layout.addComponent(button);*/
}

Mycomponent.java：

public class MyComponent extends CustomComponent {
/*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */
@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private TextField textField_2;
@AutoGenerated
private TextField textField_1;
@AutoGenerated
private LoginForm loginForm_1;
@AutoGenerated
private Label label_1;
@AutoGenerated
private Button button_1;
/**
* The constructor should first build the main layout, set the
* composition root and then do any custom initialization.
*
* The constructor will not be automatically regenerated by the
* visual editor.
*/
public MyComponent() {
buildMainLayout();
setCompositionRoot(mainLayout);
// TODO add user code here
}
@AutoGenerated
private AbsoluteLayout buildMainLayout() {
// common part: create layout
mainLayout = new AbsoluteLayout();
mainLayout.setImmediate(false);
mainLayout.setWidth("100%");
mainLayout.setHeight("100%");
// top-level component properties
setWidth("100.0%");
setHeight("100.0%");
// button_1
button_1 = new Button();
button_1.setCaption("Button");
button_1.setImmediate(true);
button_1.setWidth("-1px");
button_1.setHeight("-1px");
mainLayout.addComponent(button_1, "top:314.0px;left:200.0px;");
// label_1
label_1 = new Label();
label_1.setImmediate(false);
label_1.setWidth("-1px");
label_1.setHeight("-1px");
label_1.setValue("Label");
mainLayout.addComponent(label_1, "top:82.0px;left:131.0px;");

Answer 1

在您的init调用中：setContent(m)(https://vaadin.com/api/7.4.3/com/vaadin/ui/UI.html#setContent%28com.vaadin.ui.Component%29)