Vaadin复选框未正确呈现 [英] Vaadin checkbox is not correctly rendered

问题描述

在不兼容模式下使用Vaadin 14.0.13.

Using Vaadin 14.0.13 without compatibility mode.

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

I use a view to create a Dialog with dynamic content:

@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实例化:

instantiated by Spring Boot (version 2.2.1.RELEASE) with a bean:

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

当我单击按钮时，将打开对话框，但该复选框没有该框:

When I click on the button, the dialog is opened but the checkbox haven't the box:

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

The source code is on github: https://github.com/gronono/bug-vaadin-checkbox

我不明白为什么以及如何解决它.如果我将复选框创建内容包含在主视图中，则可以正常工作:

I don't understand why and how I can fix it. If I include the checkbox creation inside the main view, it works fine:

@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()));
    }
}

推荐答案

这听起来很像基本上，当您没有直接使用Checkbox的任何View，而是通过反射或您的情况下的contentProvider等其他方式发生时，会发生这种情况，因为在您的应用程序中没有任何Checkbox的import语句(->因此，安装过程中的vaadins扫描不会检测Checkbox的使用，因此不会下载npm内容作为复选框.)
在github中说这将在14.1中修复

Basically, this happens when you don't have any View that uses a Checkbox directly, but through other means like reflection or in your case the contentProvider, because in no view of your app there is any import statement of Checkbox (--> therefore, vaadins scan during the installation will not detect usages of Checkbox, so it will not download npm stuff for checkbox).
in the github it says this will be fixed in 14.1

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

If you need a fix now, for me it worked when I declared a field of that type in any view with a @Route. That field doesn't have to be used.

@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组件有关.

Addendum: This is not related to the Checkbox component specifically, it happens with any vaadin component that isn't initially scanned in a route, but used anyway through reflective-, provider-, or generic means.

当前，您还可以通过将@Route(registerAtStartup = false)添加到直接使用Checkbox的提供程序中来解决此问题.这将使vaadins扫描查看复选框的用法(因此导入其npm软件包)，但实际上不会将提供程序注册为真实路由.

You can also work around this currently by adding a @Route(registerAtStartup = false) to your provider that uses the Checkbox directly. This will make vaadins scan see the checkbox usage (therefore importing its npm package), but will not actually register the provider as a real route..

如果您需要多个组件，我更喜欢的另一种方法是用@Route(registerAtStartup = false)创建一个新视图，其中 only 为应用程序中需要的每个组件定义私有变量(并且arent在您的某些视图中已经直接使用了 ).这样一来，所有这些组件使用情况定义都可以在一个地方使用，一旦发布了正式修订，您只需要删除一个类就可以了，不赞成使用的解决方法就不存在了.

Another way which I prefer if you need this for multiple components is to create a new View with a @Route(registerAtStartup = false) which only defines private variables for each component that you'll need in the application (and arent already used directly in some view of yours). This has the advantage of all these component usage definitions in one place, and once the official fix is released, you need only to delete one class and the deprecated workaround is gone.

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

这篇关于Vaadin复选框未正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！