Vaadin 复选框未正确呈现

Question

在没有兼容模式的情况下使用 Vaadin 14.0.13。

我使用视图来创建具有动态内容的对话框：

@Route("")
public class MainView extends VerticalLayout {

   public MainView(DialogContentProvider contentProvider) {
      this.add(new Button("Click me!", event -> new Dialog(contentProvider.create()).open()));
   }
}

contentProvider 是一个接口

public interface DialogContentProvider {
    Component create();
}

使用此实现：

public class CheckBoxContentProvider implements DialogContentProvider {
    @Override
    public Component create() {
        return new Checkbox("My checkbox", true);
    }
}

由 Spring Boot（版本 2.2.1.RELEASE）用 bean 实例化：

    @Bean
    public DialogContentProvider contentProvier() {
        return new CheckBoxContentProvider();
    }

当我点击按钮时，对话框打开但复选框没有框：

源码在github上：https://github.com/gronono/bug-vaadin-checkbox

我不明白为什么以及如何解决它。如果我在主视图中包含复选框创建，它工作正常：

@Route("")
public class MainView extends VerticalLayout {

    public MainView(DialogContentProvider contentProvider) {
//        this.add(new Button("Click me!", event -> new Dialog(contentProvider.create()).open()));
        this.add(new Button("Click me!", event -> new Dialog(new Checkbox("My checkbox", true)).open()));
    }
}

Answer 1

这听起来很像this (related github issue)

基本上，当您没有任何直接使用 Checkbox 的视图时会发生这种情况，而是通过其他方式（例如反射或在您的情况下为 contentProvider），因为在您的应用程序视图中没有任何 Checkbox 的导入语句（--> 因此，安装期间的 vaadins 扫描不会检测到 Checkbox 的使用情况，因此它不会为复选框下载 npm 内容）。
在 github 上它说这将在 14.1 中修复

如果您现在需要修复，对我来说，当我在任何带有 @Route 的视图中声明该类型的字段时，它就起作用了。不必使用该字段。

@Route("")
public class MainView extends VerticalLayout {
    private Checkbox unusedCheckbox; // this line fixes it. 

    public MainView(DialogContentProvider contentProvider) {
        this.add(new Button("Click me!", event -> new Dialog(contentProvider.create()).open()));
    }
}

附录：这与 Checkbox 组件无关，它发生在任何最初未在路由中扫描但通过反射、提供程序或通用方式使用的任何 vaadin 组件。

编辑：您目前也可以通过将@Route(registerAtStartup = false) 添加到直接使用复选框的提供程序来解决此问题。这将使 vaadins 扫描看到复选框的使用情况（因此导入其 npm 包），但实际上不会将提供程序注册为真实路由..

---

如果您需要多个组件，我更喜欢的另一种方法是使用@Route(registerAtStartup = false) 创建一个新视图，仅为您在应用程序中需要的每个组件定义私有变量（并且在您的某些观点中已经直接使用过）。这具有将所有这些组件使用定义集中在一个地方的优势，并且一旦发布了官方修复程序，您只需删除一个类，不推荐使用的解决方法就消失了。

@Route(registerAtStartup = false)
public class ComponentImportView extends VerticalLayout {
    private Checkbox checkBox;
    private Upload upload;
    private ProgressBar progressBar;
}