如何在我的网页中嵌入在可视化编辑器中创建的 Vaadin Composite 组件？

Question

我正在尝试为我的网站设计网页。我正在使用 Vaadin 框架和 Java 语言。我在 Vaadin 中使用可视化编辑器来放置 UI 元素，即我创建了一个复合组件。这是在 class MyComponent.java 中完成的。我有一个 DownloadManager.java class 扩展 UI class 并显示网页。我尝试在 UI class 中创建一个 MyComponent.java 的对象，以便我使用可视化编辑器添加的所有组件都显示在网页上。但是这样做只会显示一个空白页面。我对使用 Vaadin Framework 还很陌生，所以如果这个问题很微不足道，请原谅。我遵循了 Book of Vaadin 的指导方针，但找不到上述问题的答案。下面是我的 classes:

的代码片段

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)

如何在我的网页中嵌入在可视化编辑器中创建的 Vaadin Composite 组件？

How to embed Vaadin Composite component created in Visual editor in my webpage?

java

eclipse

vaadin